CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Emraan Aly
Emraan Aly

Reputation: 145

how to collapse div on media query for mobile only (without javascript / only bootstrap 4)

Regarding Bootstrap 4: i was trying to collapse .card div on mobile view only. i tried .collapse class but in this way it collapses on all sizes of screen. here are my codes in case if somebody wants to see;

<div class="col-lg-3">
    <div class="card>
        <div class="card-header">
            <a data-toggle="collapse" data-target="#t10"><h3>Top 10</h3></a>
        </div>
        <div class="card-body collapse" id="t10">
            <div class="row ">
                <div class="col-md-12>
                <h4>ABC</h4>
                <h5>Review: <img src="../../images/4stars.png"><br></h5>
            </div>
        </div>
    </div>
</div>

after spending hours searching on internet, i didn't find anything probably i was using wrong search terms (as newbie), I got an idea to reverse the situation so I un-collapsed for =>992px in media query, codes as following:

@media (min-width: 992px) {
    #t10.collapse { display: block; }
}

As you can see it is OK but I really want to learn the best way to collapse a div/card when screen size changes to less than 992px.

(Pardon my English. I am not Eng speaker).

Upvotes: 1

Views: 7849

Answers (3)

user3244842
user3244842

Reputation:

Just add .dont-collapse-sm class to Your collapsible div to not disappear over 768px breakpoint.

Credits for: https://codepen.io/glebkema/pen/xryaKK (also helped me a lot!)

@media (min-width: 768px) {
  .collapse.dont-collapse-sm {
    display: block;
    height: auto !important;
    visibility: visible;
  }
}

Upvotes: 3

pradeep kumar
pradeep kumar

Reputation: 1011

Bootstrap 4 providing classes for responsive screen. like col-lg-* col-sm-*

So, You can try changing the display by using the bootstrap class itself.

E.g.

<div class="d-block d-sm-block d-md-flex d-lg-flex d-xl-flex">
  /** your content **/
</div>

This classes will change the display property for every screens which we mentioned.

For your reference, Check the Bootstrap 4 Docs: Here

Upvotes: 0

Carol Skelly
Carol Skelly

Reputation: 362300

Use the responsive display classes.

For example,

<div class="card-body d-none d-lg-flex" id="t10"></div>

Will hide this DIV on screen widths less that 992px.

Upvotes: 0

Related Questions