half col with bootstrap

Question

how can I create something like image below with bootstrap?

Answer 1

Bootstrap customizing:
Actually Bootstrap is built on Less, and also they provide Sass to manage css dynamically. Less/Sass are CSS pre-processor language (it allow variable,function etc). Less files are already included in main Source code inside less folder.

Follow option 1 or option 2 (I prefer option 2)

Option -1(local):
Open variables.less inside less folder and find @grid-columns: 12; (Line 325). Change to @grid-columns: 24; save and compile boostrap.less file with any less compiler (koala).
After compile you will get .css file.

Option -2 (online):
You can also do it from bootstrap official site Go to http://getbootstrap.com/customize

Make sure all checkbox are checked. Change @grid-columns 12 to 24 under Grid system section. Then download from the bottom click on "compile and download" button. use in your project this generated css.

How it works:

Now you have to use 24-column-grid (ex: 100% width=col-md-24) instead of 12-column-grid.

<div class="row">
    <div class="col-md-9"></div> //Same as 4.5 
    <div class="col-md-6"></div> // Same as 3
    <div class="col-md-9"></div> //same as 4.5
</div>

Thanks

Answer 2

If you're using LESS/SCSS, you have the bootstrap source and you can use the mixins/functions that are written into bootstrap. To make an col-xs-4.5, you could do...

// SCSS
.col-xs-4-5 {
    @include make-xs-column(4.5);
}

// LESS
.col-xs-4-5 {
    .make-xs-column(4.5);
}

Or you can recreate it on your own...

.col-xs-4-5 {
    position: relative;
    float: left;
    width: 20%;
    padding-left: 15px;
    padding-right: 15px;
}