OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Bootstrap 4 compatibility with collapsibles and display utilities

  • Thread starter Thread starter terryeah
  • Start date Start date
T

terryeah

Guest
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.


Code:
.container {
  margin: 30px;
}

Code:
<!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>
<p>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 <code>.collapse</code> class which used to work correctly with Bootstrap 3. </p>

<p>Basically I want to display <code>#demo</code> by default on <code>sm, md, lg, and xl</code> and hide it on mobile view, <code>xs</code> which does not exist in Bootstrap 4 according to <a href="https://getbootstrap.com/docs/4.1/utilities/display/" rel="nofollow noreferrer">this</a> when using display property.</p>

<p>So when I click on the collapse button on mobile view, I want <code>#demo</code> to show.</p>

<p>Also, <code>.collapsing</code> isn't working properly either. Any help with this would be very much appreciated.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
margin: 30px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><!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></code></pre>
</div>
</div>
</p>
Continue reading...
 

Latest posts

J
Replies
0
Views
1
jbowerbir
J
Top