Divide Bootstrap Grid into an odd columns

Hello friends. Today I am covering very small topic about how to divide row into odd columns as many of you are requested me earlier. So lets's get started.

So, If you are not familiar with Bootstrap grid, Please refer this link to understand bootstrap grid system.

As we all know bootstrap row is divided into 12 columns maximum and each column has an equal width. We can easily divide our columns into an even number like below

 <div class="row"> <!-- Total width 100% -->
    <div class="col-lg-3">
     <!-- Width of this column will be 25% -->
    </div>
    <div class="col-lg-3">
     <!-- Width of this column will be 25% -->
    </div>
    <div class="col-lg-3">
     <!-- Width of this column will be 25% -->
    </div>
    <div class="col-lg-3">
     <!-- Width of this column will be 25% -->
    </div>
</div> 

<!-- OR --->

<div class="row">
    <div class="col-lg-4">
    </div>
    <div class="col-lg-4">
    </div>
    <div class="col-lg-4">
    </div>
</div>

Here .col-lg-, .col-md-, col-sm-, col-xs- are Bootstrap's grid system work across multiple devices. lg covers large breakpoints like Desktop, md covers medium breakpoints like tablets and ipads, sm means small breakpoints like latest smartphones & xs covers extra small devices.

Now, coming to our focus on dividing grid into an odd columns. If you look at above code where columns are divided into 4 parts then you will get the logic of column width. Bootstrap row is build with full width (i.e. 100%) of your screen size. So, if I want to divide my columns into 5 equal parts then it's very simple to calculate my each column width is having 20% width pretty simple right ?

This needs to be done for Bootstrap 3 only as Bootstrap 4 provide the class name col- which divides your column into an equal parts automatically.

You can use Bootstrap 4 class col- to do your work but it will keep dividing your layout and you can't put the control if you are dealing with any dynamic UI.

  <!-- Bootstrap 4 -->
  <div class="row"> 
    <div class="col">  </div>
    <div class="col">  </div>
    <div class="col">  </div>
    <div class="col">  </div>
    <div class="col">  </div>
     ....
     ....
  </div>
   <!-- col class automatically divides my columns
   into equal parts -->

For example above, if we keep dividing our UI using this col class and if we want control over col-xs- type devices, then eventually UI will not handle automatically. Sometimes it's preferable also with some situations.

So, let's write some CSS to do our work doesn't matter if you are using any older or newer version of Bootstrap. (You can also use SASS / SCSS)

 # Solution

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

# Next, we are adding here some media queries with various
  breakpoints

.col-xs-equal {
    width: 20%;
    float: left;
}
@media (min-width: 768px) {
.col-sm-equal {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-equal {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-equal {
        width: 20%;
        float: left;
    }
}

Now, you are ready to build your HTML and apply these classes together

<div class="row">
    <div class="col-lg-equal col-md-equal col-sm-equal 
    col-xs-equal">
    ...
    </div>
    <div class="col-lg-equal col-md-equal col-sm-equal 
    col-xs-equal">
    ...
    </div>
    <div class="col-lg-equal col-md-equal col-sm-equal 
    col-xs-equal">
    ...
    </div>
    <div class="col-lg-equal col-md-equal col-sm-equal 
    col-xs-equal">
    ...
    </div>
    <div class="col-lg-equal col-md-equal col-sm-equal 
    col-xs-equal">
    ...
    </div>
</div>

You can always change in media queries according to your UI needs. Here we took example of dividing row into 5 columns so you can also try to divide your column into 7, 9, etc. columns the logic will remain same only need to change width into your applied css.