Some awesome Bootstrap 4 Responsive Utilities

Bootstrap has made our lives easier because of its responsive utilities (recommended having a basic HTML and CSS knowledge before playing with Bootstrap).  I’ve been using Bootstrap 4 for the past 7 months and I was surprised at the really good features and amazing utilities they released on this version. I want to share some valuable lessons from studying those docs. And please, if you have others as well, please share! 🙂

Bootstrap Grid

To give a brief context, keep in mind that Boostrap uses a property called Grid System. For this tutorial, all you need to understand is how those grids are broken into five  breakpoints, one for each screen size, from extra small to extra large devices:

// Extra Small devices (Portrait phones)
// .col-xs-*
@media (min-width: 576px) { }

// Small devices (Landscape phones)
// .col-sm-*
@media (min-width: 576px) { }

// Medium devices (tablets, 768px and up)
// .col-md-*
@media (min-width: 768px) { }

// Large devices (desktops, 992px and up)
// .col-lg-*
@media (min-width: 992px) { }

// Extra large devices (large desktops, 1200px and up)
// .col-xl-*
@media (min-width: 1200px) { }

That means you can modify them as you need and being aware of those breakpoints is pretty useful, including when you want to show or hide some content dependig on the screen size.

Usage

Now let’s go to the fun part, the examples:

  • To maintan a consistent responsiveness to you app, use col-* , so you don’t need to rely on any breakpoint to organize the elements on your page (keep in mind that depending on what you want, you may need to set a breakpoint):
// Regardless of the screen size, the columns will always have the same width

<div class="row">
  <div class="col-3">
    <div class="card">
      <div class="card-body">
        < ... >
      </div>
    </div>
  </div>
  <div class="col-9">
    < ... >
  </div>
</div>
  • Hide content depending on the screen size:
// this card will be visible only on lg screen

<div class="card d-none d-lg-block">
  <div class="card-body">
    < ... >
  </div>
</div>
  • If we want to the opposite, i.e., show on every grid except on the lg sizes, we can use the .d-lg-none class to the element:
// this list of icons be hidden on screen >= lg

<div class="fixed-bottom">
  <div class="card d-lg-none">
    <div class="nav-icons card-body">
      < ... >
    </div>
  </div>
</div>

Example

Here I have a screencast showing all of that together, resulting in a very fully responsive page, without any weird behaviour when switching between the screen size:

Hope you liked this. I was really impressed of how Boostrap 4 has made our lives easier. Enjoy it!

Leave a Reply

Your email address will not be published. Required fields are marked *