O'Reilly logo

Bootstrap 4 Site Blueprints by Ian Whitley, David Cochran, Bass Jobsen

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 responsive columns

We have three blocks of text, each with a heading, a short paragraph, and a link. In screen sizes of approximately tablet width or more, we would like this content to be laid out in three columns. In narrower screen widths, the content will organize itself in one full-width column.

Take a moment to visit and read the documentation for Bootstrap's mobile-first responsive grid. You can find it at http://getbootstrap.com/css/#grid.

In short, the grid is based on a 12-column system. The basic class structure allows us to use a class of col-12 for full width, col-6 for half width, col-4 for one-third width, and so on.

Thanks to the creative use of media queries, Bootstrap's grid can be very adept at responding to different ...

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