Bootstrap - 5 column layout

Question

I'm trying to get 5 column full width layout but I can't find the solution that fits on my needs

Here's the code I use

  <!-- Content Section -->
    <div class="container">
      <div class="row">
        <div class="col-lg-12" style="border: 1px solid red">
          <div class="row">
            <div class="col-xs-12">
              <div class="col-xs-2 col-xs-offset-1" id="p1">One</div>
              <div class="col-xs-2" id="p2">Two</div>
              <div class="col-xs-2" id="p3">Three</div>
              <div class="col-xs-2" id="p4">Four</div>
              <div class="col-xs-2" id="p5">Five</div>
            </div>
            <!-- //col-lg-12 -->
          </div>
          <!-- //row -->
          lorem
        </div>
      </div>
      <!-- //col-lg-12 -->
    </div>
    <!-- //row -->
  </div>
  <!-- //container -->

As a result I get

And here is what I'm trying to achieve. Full width 5 column layout with a space between each column

Answer 1

UPDATE, 2021: for modern Bootstrap (4+), I recommend Zim's answer due to it's natural way of using Bootstrap flex classes

.col-xs-2{     background:#00f;     color:#FFF; } .col-half-offset{     margin-left:4.166666667% }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <div class="container">     <div class="row" style="border: 1px solid red">         <div class="col-xs-2" id="p1">One</div>         <div class="col-xs-2 col-half-offset" id="p2">Two</div>         <div class="col-xs-2 col-half-offset" id="p3">Three</div>         <div class="col-xs-2 col-half-offset" id="p4">Four</div>         <div class="col-xs-2 col-half-offset" id="p5">Five</div>         <div>lorem</div>     </div> </div>

This should be ok.

Answer 2

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

Answer 3

Default bootstrap(version 4.6) grid allows you to do this.
You can make 7, 7 11 columns in a row.

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

Responsive version of this.

<div class="container">
  <div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-5">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>