Bootstrap custom grid-columns

Question

How i can make custom grid-columns just for one element of div ? I need to 5 column per row (20% width for each one).

Example:

<div id="parent">
    <div class="row">
        <div class="col-md-9">...</div>
        <div class="col-md-3">...</div>
    </div>
    <div class="row">
        <div class="col-md-2">...</div> <!-- 1 -->
        <div class="col-md-2">...</div> <!-- 2 -->
        <div class="col-md-2">...</div> <!-- 3 -->
        <div class="col-md-2">...</div> <!-- 4 -->
        <div class="col-md-2">...</div> <!-- 5 -->
    </div>
</div>

I'm using Bootstrap 3.1.1

This is a recurring question, multiple answers are already given here : http://stackoverflow.com/questions/10387740/five-equal-columns-in-twitter-bootstrap — Seb33300, May 27 '14 at 08:22
@Seb33300 Thanks, I found this answer helpful: http://stackoverflow.com/a/14496611/1012405 — Hamidreza, May 27 '14 at 08:36

score 2 · Accepted Answer · edited May 23 '17 at 11:53

2

A partial solution would be the one described here (adding an offset).

However if you want to do it right, you'll have to create new classes to override Bootstrap's defaults with the appropriate width. Then add this class to each column.

.5-col-grid {
    width: 20%;
}

Additionally you can set CSS @media support if you want 100% width at smaller screen resolutions.

edited May 23 '17 at 11:53

Community

1
1

answered May 27 '14 at 08:24

Georgi Demirev

446
3
22

score 2 · Answer 2 · answered Dec 17 '14 at 10:52

2

I built out a solution to this using LESS that doesn't require modification of Bootstrap. https://github.com/drew-r/bootstrap-n-column

answered Dec 17 '14 at 10:52

Drew R

2,988
3
19
27

Looks like a cool solution, it would be annoying to build a new custom package every time I want to update bootstrap. – Kilian Perdomo Curbelo Oct 16 '17 at 16:56

score 1 · Answer 3 · answered May 27 '14 at 08:22

1

You actually dont have to, in the updated Bootstrap. You can download a custom Bootstrap 3 build, specifying the number of desired columns with the @grid-columns setting.

Go to url

http://getbootstrap.com/customize/

scroll down to "Grid system" and enter your own values for the custom grid system you desire.

answered May 27 '14 at 08:22

Mustafa sabir

4,130
1
19
28

The person asking the question said "just for one element", so not for his/her whole site. – bart Aug 13 '15 at 22:59

score 0 · Answer 4 · answered May 27 '14 at 08:21

You can create your own set of rule, taking Boostrap's way of structuring its grid as reference:

.col-custom-five {
    position: relative;
    float: left;
    width: 20%;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}

Usually five columns don't work well on really small device. So what I usually do is add a common xs declaration along with it. Something like:

<div class="row">
    <div class="col-custom-five col-xs-6">...</div> <!-- 1 -->
    <div class="col-custom-five col-xs-6">...</div> <!-- 2 -->
    <div class="col-custom-five col-xs-6">...</div> <!-- 3 -->
    <div class="col-custom-five col-xs-6">...</div> <!-- 4 -->
    <div class="col-custom-five col-xs-6">...</div> <!-- 5 -->
</div>

EDIT:

You can also generate all the custom rules directly from Bootstrap's website as well: http://getbootstrap.com/customize/#grid-system

It is. It all depends on what you want to do inside each div too, and how you want it to act at different breakpoints. It's all open for customization — rorofromfrance, May 27 '14 at 08:37

score 0 · Answer 5 · answered Sep 06 '18 at 14:51

If you want to create your own column then you need to give the div a class and then style it.

You need to specify the custom width and then make sure you float it to the left and add padding.

For example:

.custom-col {

  width:20%;
  float:left;
  padding-left:15px;
  padding-right:15px;

}

<div class="custom-columns>
  <div class="container>
    <div class="row">
      <div class="custom-col">
        <p>Sample text</p>
      </div>
      <div class="custom-col">
      <p>Sample text</p>
      </div>
      <div class="custom-col">
      <p>Sample text</p>
      </div>
      <div class="custom-col">
      <p>Sample text</p>
      </div>
      <div class="custom-col">
      <p>Sample text</p>
      </div>
    </div>
  </div>
</div>

score -1 · Answer 6 · answered May 27 '14 at 08:21

-1

Default bootstrap grid system comes with 12 columns.

If you want to define a custom one, you need to customize however you want on this page

answered May 27 '14 at 08:21

Cihad Turhan

2,749
6
28
45

Bootstrap custom grid-columns

6 Answers6