How can I use a half of a column on bootstrap?

Question

I am trying to get the columns of a row with bootstrap like this:

col 1.5 | col 9 | col 1.5

but I do not have any idea about how to get it. I looked on this post: Half columns in Twitter Bootstrap 3 but it also do not help me because I need that the entire column will be on the center of the 1.5 columns.

Is there a way to do this on bootstrap?

Thanks in advance!

In recent versions you can customize number of columns in a grid. For your case you might want to select 24-column configuration. See http://getbootstrap.com/customize/#grid-system — PM 77-1, Feb 09 '16 at 23:21

score 0 · Answer 1 · edited May 23 '17 at 10:28

You would have to create your own styles if you are unwilling to use the answer posted here: Half columns in Twitter Bootstrap 3

If you look at Bootstrap, you'll see there is little mystery to how it works. For example:

.col-sm-5 {
    width: 41.66666667%;
}

Since bootstrap is (usually) a 12 column grid, you can see that the math is straightforward: 5 / 12 = 41.6666667%.

So, you would just write your OWN styles, and do the math: 1.5 / 12 = 12.5%;

Bootstrap 3 sizes:

// Note, you can't use a dot in the middle, so separate with underscore or dash
.col-xs-1_5 {
    width: 12.5%;
}

@media(min-width:768px){
    .col-sm-1_5 {
        width: 12.5%;
    }
}

@media(min-width:992px){
    .col-md-1_5 {
        width: 12.5%;
    }
}

@media(min-width:1200px){
    .col-lg-1_5 {
        width: 12.5%;
    }
}

Do not modify the bootstrap css file. Put the above styles into your own css file.

How can I use a half of a column on bootstrap?

1 Answers1