Rows and columns (4)

To create complex responsive layouts with Bootstrap styles, you need to learn about Bootstrap's grid system.

Rows and columns (1): Use of simple col class (not responsive).
Rows and columns (2): Shows how use of simple col class breaks the page on small screens.
Rows and columns (3): The alternative is to use responsive column classes, such as col-md-3, to adapt to screens of any size.

The first key idea is that a row element (such as a DIV) is assumed to have 12 equal-width columns in it. When you add elements to the row and apply column classes to them, you can make an element fill all 12 columns, or only six, or two, or just one (the default). The second key idea is that you control how the columns reformat for different screen sizes by using the full Bootstrap column classes.

A full column class has three parts: col- and a breakpoint and a number. Example: class="col-lg-6" (the hyphens are required as shown).

Lesson 1

class="col-xl-1 col-md-2" ← here we specify two conditions for one column element. This code is on EACH column DIV in the top row below.

col-xl-1 means that at the XL breakpoint and wider, the element will be the width of ONE column (1 in 12).
col-md-2 means that at the MD breakpoint and wider, the element will be the width of TWO columns (2 in 12). This causes the row shown here to break into two equal rows of six columns each. (When the width is XL or wider, the previous rule applies.)
When the browser window is less than the MD breakpoint (more narrow, smaller), all the columns in the row go to the full width of the row.
Note that using only two of the full column classes is usually enough to make the page work well on all devices! The ideal breakpoints will depend on how many column units (out of 12) the element is using, and also the size of the contents inside the element.

Please resize your browser window to see this in action!

Column 1

Column 2

Column 3

Column 4

Column 5

Column 6

Column 7

Column 8

Column 9

Column 10

Column 11

Column 12

Lesson 2

The first row below is one you saw in previous examples — (2) and (3). What's new here is the row below it, the second row.

If you're using a laptop or larger device, you will see three columns in the first row and then two columns in the second row. All five columns are the same width. The second row is missing 4 columns. That is, the two boxes you see in the second row each span 4 columns, or 8 out of the 12. By using a class on the ROW ELEMENT (for the second row only), you tell the two elements to move into the center of the row.

Second row only: <div class="row mt-4 justify-content-center">

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis auctor elit sed vulputate mi. Enim praesent elementum facilisis leo vel fringilla. Condimentum mattis pellentesque id nibh. A diam sollicitudin tempor id eu nisl nunc mi ipsum.

Pellentesque elit ullamcorper dignissim cras tincidunt. In cursus turpis massa tincidunt dui. Suspendisse in est ante in nibh mauris. Sed risus ultricies tristique nulla aliquet enim tortor. Penatibus et magnis dis parturient montes nascetur ridiculus. Vulputate odio ut enim blandit volutpat.

Vulputate eu scelerisque felis imperdiet proin. Felis eget nunc lobortis mattis. Ultrices in iaculis nunc sed augue lacus. Dictum fusce ut placerat orci nulla pellentesque. Fermentum posuere urna nec tincidunt. Purus non enim praesent elementum facilisis leo. Diam sit amet nisl suscipit adipiscing bibendum.

Non arcu risus quis varius quam quisque id. Dolor sed viverra ipsum nunc aliquet bibendum enim. Enim diam vulputate ut pharetra. Diam quis enim lobortis scelerisque fermentum dui faucibus in. Pharetra massa massa ultricies mi. Enim nec dui nunc mattis enim. Nec sagittis aliquam malesuada bibendum arcu.

Rutrum quisque non tellus orci ac. Aliquam faucibus purus in massa tempor nec feugiat nisl pretium. Ultrices vitae auctor eu augue ut lectus. Elementum nisi quis eleifend quam. Aliquet enim tortor at auctor urna nunc id. Mattis nunc sed blandit libero volutpat sed cras ornare arcu.

You can change the way those two boxes are aligned in the row: <div class="row mt-4 justify-content-evenly">

Note that all the boxes are still responsive! Resize your browser window gradually to see how the boxes behave on smaller screens. Learn more about the options for aligning column elements inside a row here, in the Bootstrap docs: Columns: Horizontal alignment.

Learn more about Bootstrap's grid system to really understand the flexibility you can bring to your page layouts, without needing to write any media queries.