CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3responsive-designbootstrap-4grid
Padawan Learner
Padawan Learner

Reputation: 55

Different Bootstrap Responsive Grids for Different Device Dimensions

A newcomer to Bootstrap who is experienced with other frameworks and platforms, I can't help feeling a little disappointed with the responsive grids that Bootstrap offers. Specifically, when designing a single layout that will be used with extra-small to extra-large devices, the only choice seems to be whether a column will occupy its own row or multiple columns; there doesn't seem to be inherent support for showing one particular layout on small/extra-small screens and an entirely different div if the dimensions are larger. You kind of have to ram everything into a single, hard-to-decipher layout block.

Is there any kind of support for providing different layout DIVs in the same doc and switching between them based on the dimensions of the rendering device?

I may be missing something.

Ty in advance.

Upvotes: 0

Views: 82

Answers (1)

Max P.
Max P.

Reputation: 28

You can also use display properties to show certain divs on let's say mobile only. The following code from the official Bootstrap documentation hides it on screens smaller than lg:

<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

Further information can be found here: Bootstrap Doc - Display properties

Upvotes: 1

Related Questions