Bootstrap – 5 column layout

by

5 Columns with Bootstrap 4

Here is 5 equal, full-width columns (no extra CSS or SASS) using the auto-layout grid..

<div class="container-fluid">
    <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
        <div class="col">4</div>
        <div class="col">5</div>
    </div>
</div>

http://codeply.com/go/MJTglTsq9h

This solution works because Bootstrap 4 is now flexbox. You can get the 5 colums to wrap within the same .row using a clearfix break such as <div class="col-12"></div> or <div class="w-100"></div> every 5 columns.

Update 2020

As of Bootstrap 4.4, you can also use the row-cols-5 class on the row…

<div class="container">
    <div class="row row-cols-5">
        <div class="col">
            X
        </div>
        <div class="col">
            X
        </div>
        <div class="col">
            X
        </div>
        <div class="col">
            X
        </div>
        <div class="col">
            X
        </div>
        <div class="col">
            X
        </div>
    </div>
</div>

https://codeply.com/p/psJLGuBuc3

More Related Contents:

  1. How To Create This Type of Structure in html css and bootstrap?
  2. vertical-align with Bootstrap 3
  3. Bootstrap row with columns of different height
  4. Bootstrap 4: Multilevel Dropdown Inside Navigation
  5. Twitter Bootstrap 3 Sticky Footer
  6. Extend bootstrap row outside the container
  7. How to center nav-items in Bootstrap? [duplicate]
  8. How to make Bootstrap 4 cards the same height in card-columns?
  9. Bootstrap – align button to the bottom of card
  10. Bootstrap: add margin/padding space between columns
  11. How to remove focus around buttons on click
  12. Bootstrap 4 – Sticky footer – Dynamic footer height
  13. How to center content in a Bootstrap column?
  14. How to implement curve background in CSS? [duplicate]
  15. How do I add a margin between bootstrap columns without wrapping [duplicate]
  16. Bootstrap navbar: nothing is displayed on smaller devices
  17. Bootstrap 3 Glyphicons CDN
  18. Text-align class for inside a table
  19. What is the purpose of .row in Bootstrap? [duplicate]
  20. How to move placeholder to top on focus AND while typing?
  21. Bootstrap – Fill fluid container between header and footer
  22. Bootstrap row and col explanation
  23. Can a div have multiple classes (Twitter Bootstrap) [duplicate]
  24. How to implement a Navbar Dropdown Hover in Bootstrap v4?
  25. How can I make Bootstrap 4 columns all the same height? [duplicate]
  26. Changing image src depending on screen size
  27. How to work with ellipsis in bootstrap responsive table
  28. Why is my .sticky-top class not working in Bootstrap 4?
  29. CSS float-right not working in Bootstrap 4 Navbar [duplicate]
  30. How to make Bootstrap cards the same height in card-columns?

Leave a Comment