Bootstrap Rows and Columns 3

An example of using Bootstrap's standard rows and column styles correctly for responsive page layout.

This layout is fully responsive. Resize your browser window to see what happens at a narrow width. Compare this to the Rows and columns (2) example, which looks exactly the same on a larger screen but is very poor on small screens because the columns do not reformat. Note also that here, the two rows change at different browser widths.

The difference: Here, in example 3, I'm using col-lg-4 in the first row and col-md-6 in the second row. In example 2 (the one that's bad), I used the simple col class, which does not build in any breakpoints. See Rows and columns (4) for tips on using the breakpoint styles.

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. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Pellentesque dignissim enim sit amet venenatis urna cursus eget. Amet facilisis magna etiam tempor orci eu lobortis elementum nibh. Nulla facilisi morbi tempus iaculis urna. Semper eget duis at tellus at urna condimentum mattis. Et molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit. Elit eget gravida cum sociis. Parturient montes nascetur ridiculus mus mauris.

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. Morbi tincidunt augue interdum velit euismod in pellentesque massa. Aliquam faucibus purus in massa tempor nec feugiat nisl. Eu non diam phasellus vestibulum lorem sed risus ultricies tristique. Elementum integer enim neque volutpat ac tincidunt vitae. A arcu cursus vitae congue mauris rhoncus. Euismod in pellentesque massa placerat duis. Tristique senectus et netus et malesuada fames ac. Lorem donec massa sapien faucibus et molestie. Amet consectetur adipiscing elit pellentesque habitant. Eget duis at tellus at urna condimentum mattis pellentesque.

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. Bibendum enim facilisis gravida neque. Lorem dolor sed viverra ipsum. Dis parturient montes nascetur ridiculus mus mauris vitae ultricies leo. Vitae suscipit tellus mauris a diam maecenas sed enim. Nunc sed velit dignissim sodales ut eu sem integer vitae.

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. Cursus eget nunc scelerisque viverra mauris in aliquam sem fringilla. Pulvinar sapien et ligula ullamcorper malesuada proin libero. Ut diam quam nulla porttitor. Blandit cursus risus at ultrices. Vulputate mi sit amet mauris commodo. Venenatis urna cursus eget nunc scelerisque viverra. Condimentum vitae sapien pellentesque habitant morbi tristique. Et molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit. Orci sagittis eu volutpat odio facilisis mauris. Vivamus arcu felis bibendum ut tristique et egestas quis. Nunc faucibus a pellentesque sit amet porttitor eget dolor. Purus semper eget duis at tellus at urna condimentum. Orci eu lobortis elementum nibh tellus molestie.

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. Nisl condimentum id venenatis a condimentum vitae sapien. Suspendisse sed nisi lacus sed viverra tellus in hac. Praesent tristique magna sit amet. Turpis in eu mi bibendum. Semper viverra nam libero justo laoreet sit amet cursus sit.

Rows and columns (3)