47

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 enter image description here

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

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
Vodokan
  • 723
  • 1
  • 8
  • 16
  • 1
    Possible duplicate of [Five equal columns in twitter bootstrap](http://stackoverflow.com/questions/10387740/five-equal-columns-in-twitter-bootstrap) – benomatis Mar 10 '16 at 10:00

20 Answers20

64

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

solidau
  • 4,021
  • 3
  • 24
  • 45
Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • 2
    Please how do I later add a col-xs-6 to it, so as to achieve a responsive layout on mobile view to get two equal grids – Endurance Ekhoragbon Dec 22 '17 at 11:11
  • @ZimSystem - Could you please elaborate "you can get the 5 colums to wrap witin the same .row using a clearfix break such as
    or
    very 5 columns."     – blueren Jul 31 '18 at 17:24
  • 1
    But what if I have 10 or more boxes. and I have to keep 5 box in each row. – Sinju Angajan Jan 23 '19 at 12:04
  • 1
    Simple and right answer. I used to be asked this question in an interview. – Dales Vu Apr 08 '20 at 03:58
  • Not equal. Width of columns depends on theirs content. – Tomáš Vavřinka Oct 14 '20 at 07:34
  • 1
    @TomášVavřinka .. yes they're equal until the parent container/content don't allow which is the flexbox spec and effectively works in most cases as it did for the person who asked the question. If you must force equal with use `flex-basis: 20%` – Carol Skelly Oct 14 '20 at 12:53
56

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.

vanntile
  • 2,727
  • 4
  • 26
  • 48
  • 2
    Works, good idea! The important thing is to use the right % value for the gaps depending on the number of columns.. – eyal_katz Mar 19 '17 at 04:23
10

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>
Mohammad Ayoub Khan
  • 2,422
  • 19
  • 24
7

Just add this to your CSS

/* 5 Columns */

.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

.col-xs-15 {
    width: 20%;
    float: left;
}
@media (min-width: 768px) {
    .col-sm-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
}
Rafael Prato
  • 162
  • 2
  • 10
  • 2
    it might be morally correct to cite the source, which is http://www.wearesicc.com/quick-tips-5-column-layout-with-twitter-bootstrap/, apparently, unless you are the owner of that site ;) – benomatis Mar 10 '16 at 09:55
  • @Rafael Prato why float in flex box, Question here for bootstrap 5 not 3? – AJAY MAURYA May 17 '23 at 12:20
4

Sometimes I'm asked to use some pretty odd grid layouts in existing bootstrap websites (without messing up the current code). What I have done is create a separate CSS file which i can just drop into current bootstrap projects and use the grid layout styles in there. Here is what the bootstrap-5ths.css file contains along with an example of how it looks for bootstrap version 4.

If you want to use this with bootstrap version 3, just remove the col-xl-* styles and change the min-widths from 576px to 768px, 768px to 992px and 992px to 1200px.

.col-xs-5ths, .col-sm-5ths, .col-md-5ths, .col-lg-5ths, .col-xl-5ths, 
.col-xs-two5ths, .col-sm-two5ths, .col-md-two5ths, .col-lg-two5ths, .col-xl-two5ths, 
.col-xs-three5ths, .col-sm-three5ths, .col-md-three5ths, .col-lg-three5ths, .col-xl-three5ths, 
.col-xs-four5ths, .col-sm-four5ths, .col-md-four5ths, .col-lg-four5ths, .col-xl-four5ths, 
.col-xs-five5ths, .col-sm-five5ths, .col-md-five5ths, .col-lg-five5ths, .col-xl-five5ths, 
{
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 576px) {
    .col-sm-5ths {width: 20%;float: left;}
    .col-sm-two5ths {width: 40%;float: left;}
    .col-sm-three5ths {width: 60%;float: left;}
    .col-sm-four5ths {width: 80%;float: left;}
}

@media (min-width: 768px) {
    .col-md-5ths {width: 20%;float: left;}
    .col-md-two5ths {width: 40%;float: left;}
    .col-md-three5ths {width: 60%;float: left;}
    .col-md-four5ths {width: 80%;float: left;}
}

@media (min-width: 992px) {
    .col-lg-5ths {width: 20%;float: left;}
    .col-lg-two5ths {width: 40%;float: left;}
    .col-lg-three5ths {width: 60%;float: left;}
    .col-lg-four5ths {width: 80%;float: left;}
}

@media (min-width: 1200px) {
    .col-xl-5ths {width: 20%;float: left;}
    .col-xl-two5ths {width: 40%;float: left;}
    .col-xl-three5ths {width: 60%;float: left;}
    .col-xl-four5ths {width: 80%;float: left;}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
  <div class="col-md-5ths">1</div>
  <div class="col-md-5ths">1</div>
  <div class="col-md-5ths">1</div>
  <div class="col-md-5ths">1</div>
  <div class="col-md-5ths">1</div>
 </div>
<div class="row">
  <div class="col-md-5ths">1</div>
  <div class="col-md-two5ths">2</div>
  <div class="col-md-two5ths">2</div>
</div>
<div class="row">
  <div class="col-md-three5ths">3</div>
  <div class="col-md-two5ths">2</div>
 </div>
<div class="row">
  <div class="col-md-four5ths">4</div>
  <div class="col-md-5ths">1</div>
 </div>
<div class="row">
  <div class="col-md-five5ths">5</div>
 </div>
 </div>
Myke Black
  • 1,299
  • 15
  • 15
3

Why not using grid?

.container {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-column-gap: 20px
}
Derek Wang
  • 10,098
  • 4
  • 18
  • 39
3
<div class="row">
    <div class="col">One</div>
    <div class="col">Two</div>
    <div class="col">Three</div>
    <div class="col">Four</div>
    <div class="col">Five</div>
</div>

you can customize however you need by writing media query. So that we can maintain responsive design

@media(max-width: 425px) {
    .col {
      flex-basis: auto;
      -webkit-box-flex: 1;
      flex-grow: 1;
      max-width: 100%;
    }
}
@media(min-width: 426px) and  (max-width: 961px){
  .col {
    flex-basis: auto;
    -webkit-box-flex: 1;
    flex-grow: 1;
    max-width: 50%;
  }
}
Ganesh K
  • 81
  • 6
2

CSS

.bg{
    background-color: #9DC3E6;
    border-radius: 10px;
    color: #fff;
    padding: 15px;
}
.col-xs-5-cols,
.col-sm-5-cols,
.col-md-5-cols,
.col-lg-5-cols {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-xs-5-cols {
  width: 20%;
  float: left;
}

@media (min-width: 768px) {
  .col-sm-5-cols {
      width: 20%;
      float: left;
  }
}

@media (min-width: 992px) {
  .col-md-5-cols {
      width: 20%;
      float: left;
  }
}

@media (min-width: 1200px) {
  .col-lg-5-cols {
      width: 20%;
      float: left;
  }
}

html

<div className="row">
    <div className="col-md-5-cols">1<div className="bg"></div></div>
    <div className="col-md-5-cols">2<div className="bg"></div></div>
    <div className="col-md-5-cols">3<div className="bg"></div></div>
    <div className="col-md-5-cols">4<div className="bg"></div></div>
    <div className="col-md-5-cols">5<div className="bg"></div></div>
</div>
Pankaj Upadhyay
  • 2,114
  • 21
  • 22
2

If you want to enforce the 20% column width for every row that you have, even if you don't have 5 columns in some rows, you will have to add the following to your css or scss file:

.col-xs-5-cols,
    .col-sm-5-cols,
    .col-md-5-cols,
    .col-lg-5-cols {
        position: relative;
        width: 100%;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
    }

    .col-xs-5-cols {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
    @media (min-width: 768px) {
        .col-sm-5-cols {
            -ms-flex: 0 0 20%;
            flex: 0 0 20%;
            max-width: 20%;
        }
    }
    @media (min-width: 992px) {
        .col-md-5-cols {
            -ms-flex: 0 0 20%;
            flex: 0 0 20%;
            max-width: 20%;
        }
    }
    @media (min-width: 1200px) {
        .col-lg-5-cols {
            -ms-flex: 0 0 20%;
            flex: 0 0 20%;
            max-width: 20%;
        }
    }

And in your html, use the added class as following:

<div class="row">
        <div class="col-lg-5-cols"></div>
        <div class="col-lg-5-cols"></div>
        <div class="col-lg-5-cols"></div>
        <div class="col-lg-5-cols"></div>
        <div class="col-lg-5-cols"></div>
</div>
Luay Abdulraheem
  • 751
  • 3
  • 11
1

Put some margin-left in all green divs but not in the first

arodriguezdonaire
  • 5,396
  • 1
  • 26
  • 50
1

Take a look at this page for general Boostrap layout information http://getbootstrap.com/css/#grid-offsetting

Try this:

<div class="col-xs-2" id="p1">One</div>
<div class="col-xs-3">
  <div class="col-xs-8 col-xs-offset-2" id="p2">Two</div>
</div>
<div class="col-xs-2" id="p3">Three</div>
<div class="col-xs-3">
  <div class="col-xs-8 col-xs-offset-2" id="p4">Four</div>
</div>
<div class="col-xs-2" id="p5">Five</div>

I've split the width into 5 uneven div with col-xs- 2,3,2,3,2 respectively. The two div with col-xs-3 are 1.5x the size of the col-xs-2 div, so the column width needs to be 2/3x (1.5 x 2/3 = 1) the col-xs-3 widths to match the rest.

Chris Dobson
  • 140
  • 7
1

That's better, you can use any div count.

.col-xs-2{
    background:#00f;
    color:#FFF;
}

.col_item {
    margin-left:4.166666667%
}
.col_item:first-child,
.col_item:nth-child(5n+1) {
    margin-left: 0;
}
<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 col_item" id="p1">One</div>
        <div class="col-xs-2 col_item" id="p2">Two</div>
        <div class="col-xs-2 col_item" id="p3">Three</div>
        <div class="col-xs-2 col_item" id="p4">Four</div>
        <div class="col-xs-2 col_item" id="p5">Five</div>
        <div class="col-xs-2 col_item" id="p5">One</div>
    </div>
</div>
user2105483
  • 35
  • 8
0

The best way to honestly do this is to change the number of columns you have instead of trying to bodge 5 into 12.

The best number you could probably use is 20 as it's divisble by 2, 4 & 5.

So in your variables.less look for: @grid-columns: 12 and change this to 20.

Then change your html to:

      <div class="row">
        <div class="col-xs-20">
          <div class="col-xs-4" id="p1">One</div>
          <div class="col-xs-4" id="p2">Two</div>
          <div class="col-xs-4" id="p3">Three</div>
          <div class="col-xs-4" id="p4">Four</div>
          <div class="col-xs-4" id="p5">Five</div>
        </div>
        <!-- //col-lg-20 -->
      </div>

I'd personally use display: flex for this as bootstrap isn't designed greatly for a 5 column split.

Dan Gamble
  • 3,965
  • 1
  • 24
  • 44
0

Copypastable version of wearesicc's 5 col solution with bootstrap variables:

.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: ($gutter / 2);
    padding-left: ($gutter / 2);
}

.col-xs-15 {
    width: 20%;
    float: left;
}
@media (min-width: $screen-sm) {
    .col-sm-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: $screen-md) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: $screen-lg) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
}
eballeste
  • 712
  • 1
  • 11
  • 23
0

can use as below in bootstrap3: 

<div class="row">

    <div class="col-md-2 col-md-offset-1">One</div>
    <div class="col-md-2">Two</div>
    <div class="col-md-2">Three</div>
    <div class="col-md-2">Four</div>
    <div class="col-md-2">Five</div>

</div>
MiPhyo
  • 49
  • 5
0

Instead of adding margin why not add a padding-right of 1px to each col-xs-2 coz padding would be still a part of that div

  .col-xs-2 :not(.col-xs-2:nth-child(5))
   {padding-right:1px}
Himanshu
  • 3,830
  • 2
  • 10
  • 29
0
.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-4" id="p1">One</div>
        <div class="col-xs-4 col-half-offset" id="p2">Two</div>
        <div class="col-xs-4 col-half-offset" id="p3">Three</div>
        <div>Test</div>
    </div>
</div>
arash narimani
  • 79
  • 1
  • 1
  • Please don't post only code as answer, but also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes. – Tyler2P Jan 07 '21 at 15:25
0

In bootstrap 4 and latest bootstrap 5 has become more simpler to handle 5 Column layout in big screen it will show 5 item, medium screen it will show 3 item, in small screen it will show 2 item with center alignment.

<div class="row justify-content-center">
   <div class="col-sm-6 col-md-4 col-lg">One</div>
   <div class="col-sm-6 col-md-4 col-lg">Two</div>
   <div class="col-sm-6 col-md-4 col-lg">Three</div>
   <div class="col-sm-6 col-md-4 col-lg">Four</div>
   <div class="col-sm-6 col-md-4 col-lg">Five</div></div>
Mahesh Paradkar
  • 1
  • 1
-1

Here is another simple way of doing this, by adding width 20% to every col-xs-2:

<div class="col-xs-12">
     <div class="col-xs-2" style="width:20%;" id="p1">One</div>
     <div class="col-xs-2" style="width:20%;" id="p2">Two</div>
     <div class="col-xs-2" style="width:20%;" id="p3">Three</div>
     <div class="col-xs-2" style="width:20%;" id="p4">Four</div>
     <div class="col-xs-2" style="width:20%;" id="p5">Five</div>
</div>
Nitin Uprety
  • 1
  • 1
  • 1
-1

What about using offset?

<div class="row">
  <div class="col-sm-8 offset-sm-2 col-lg-2 offset-lg-1">
    1
  </div>
  <div class="col-sm-8 offset-sm-2 col-lg-2 offset-lg-0">
    2
  </div>
  <div class="col-sm-8 offset-sm-2 col-lg-2 offset-lg-0">
    3
  </div>
  <div class="col-sm-8 offset-sm-2 col-lg-2 offset-lg-0">
    4
  </div>
  <div class="col-sm-8 offset-sm-2 col-lg-2 offset-lg-0">
    5
  </div>
</div>
guianzollin
  • 9
  • 3