Half size column in bootstrap grid

From Bootstrap 12 grid column classes , take the one column class col-xs-1 / col-sm-1 / col-md-1 / col-lg-1 which has width: 8.33333333%; and break that one column into half size column where you will get 8.33333333% divided by 2 => 4.16666665%. This is called half size column in bootstrap grid classes.

This half size column is useful when you are in a situation where you need to code as per design requirements in which width of one part is less than one column width like the one i got here.

The above image is the design i got and if you see 1) and 2) , they are select option tag and search input tag respectively.

Size of select tag is 115px around and i cannot able to code in one column size or two column size where both are small and big respectively. Hence i searched in google and got these links http://www.bootply.com/128927  , http://www.bootply.com/125321. But while using these codes makes extra html inside the column, i.e coding another div class=”row” and splitting again. So i created my own custom half size column class.

.col-lg-onehalf {
  width: 12.5%;
  float: left;
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

I divided the one column width of 8.33333333% by 2 resulted in 4.16666665% and added to the same 8.3333% width so it becomes 12.5%. That’s how i created col-half(half column). I created a sass @mixin which is useful dynamically for all grid column sizes.

@mixin col-half($number){
width:(8.33333333% * $number) + 4.16666665%;
float:left;
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}

Here you can put the number of columns in argument $number and result will be yours.

Here is a CodePen example.

See the Pen Half size column grid size in bootstrap by Arun-Htamilan (@imarun) on CodePen.

After writing this post , i found a better solution  http://www.anklebootstrap.com/
Actually the creator of anklebootstrap really puts very extraordinary effort to document the whole site for Half column bootstrap only. Hats off 🙂

Enjoy cheers. Hope you understood.