O'Reilly logo

Bootstrap 4 – Responsive Web Design by Jason Marah, Benjamin Jakobus, Matt Lambert, Silvio Moreto

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Creating the landing page for different devices

Now that we have fixed everything and learned some things about media queries and CSS3 properties, let's play with our layout and change it a bit for different devices. We will be starting with mobile and go further until we reach large desktops.

To do so, we must apply the column class for the specific viewport, as we did for medium displays using the .col-md-* class. The following table was presented in the previous chapter to show the different classes and the resolutions applicable for specific classes:

 

Extra small devices (phones < 544px / 34em)

Small devices (tablets ≥ 544px / 34em and < 768px / 48em)

Medium devices (desktops ≥ 768px /48em < 900px / 62em)

Large devices (desktops ≥ 900px ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required