"Multi Column Layouts with CSS"
Bootstrap 3.3.0 Snippet by joyparker

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-12"> <article class="col col-3"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel nisi cursus, lobortis quam imperdiet, porta eros. Donec vitae mattis ex. Sed nibh ligula, bibendum id mollis a, vulputate non odio. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi blandit tincidunt nisl quis scelerisque. Phasellus eu elit quis ligula aliquam auctor non vel mauris. Suspendisse lacinia est risus, quis faucibus nunc semper at. Phasellus porttitor eu nisi sit amet placerat. In sit amet magna lacus. Vivamus cursus vulputate nisl volutpat congue. Nam dictum lectus et magna sollicitudin tincidunt ac eget mauris.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel nisi cursus, lobortis quam imperdiet, porta eros. Donec vitae mattis ex. Sed nibh ligula, bibendum id mollis a, vulputate non odio. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi blandit tincidunt nisl quis scelerisque. Phasellus eu elit quis ligula aliquam auctor non vel mauris. Suspendisse lacinia est risus, quis faucibus nunc semper at. Phasellus porttitor eu nisi sit amet placerat. In sit amet magna lacus. Vivamus cursus vulputate nisl volutpat congue. Nam dictum lectus et magna sollicitudin tincidunt ac eget mauris.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel nisi cursus, lobortis quam imperdiet, porta eros. Donec vitae mattis ex. Sed nibh ligula, bibendum id mollis a, vulputate non odio. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi blandit tincidunt nisl quis scelerisque. Phasellus eu elit quis ligula aliquam auctor non vel mauris. Suspendisse lacinia est risus, quis faucibus nunc semper at. Phasellus porttitor eu nisi sit amet placerat. In sit amet magna lacus. Vivamus cursus vulputate nisl volutpat congue. Nam dictum lectus et magna sollicitudin tincidunt ac eget mauris.</p> </article> </div> </div> </div>
:root { --light-yellow: #F15355; --default: #fff; } article p { font-size: 16px; color: var(--default); } .col { background: var(--light-yellow); padding: 15px 25px; } .col-3 { column-count: 3; } /*media query docs*/ @media (max-width: 600px) { .col-3 { column-count: 1; } } @media (max-width: 991px) and (min-width: 601px) { .col-3 { column-count: 2; } }

Related: See More


Questions / Comments:

Doesn't Bootstrap have the grid for this purpose - it's like a grid on top of a grid now, no?

YuriySklyar () - 5 years ago - Reply 0