I'm not sure how many people have experienced this issue as I can't really find questions about it but I noticed Bootstrap 4 display utilities don't work properly with .collapse class which used to work correctly with Bootstrap 3.
Basically I want to display #demo by default on sm, md, lg, and xl and hide it on mobile view, xs which does not exist in Bootstrap 4 according to this when using display property.
So when I click on the collapse button on mobile view, I want #demo to show.
Also, .collapsing isn't working properly either. Any help with this would be very much appreciated.
.container {
margin: 30px;
}<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
<div id="demo" class="d-none d-sm-block collapse">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</body>
</html>If you look at display-none, it's doing display:none !important;, that's why toggling the collapse on small devices won't work as it will be always hidden.
My solution looks dumb but it should work really well - you duplicate collapse and display one / hide the other one based on different breakpoints.
<div class="d-sm-none">
<button type="button" class="btn btn-primary" data-toggle="collapse"
data-target="#demo">
Simple collapsible
</button>
<!-- Collapse by default -->
<div id="demo" class="collapse">
...
</div>
</div>
<div class="d-none d-sm-block">
<button type="button" class="btn btn-primary" data-toggle="collapse"
data-target="#demo-sm">
Simple collapsible
</button>
<!-- Display by default -->
<div id="demo-sm" class="show collapse">
...
</div>
</div>