Dealing with Bootstrap's column's free spaces

Question

I have a big problem with

Bootstrap

's grid system. My problem is free space in result of being only 12 sections in a row:

As you can see, this two column's have only 1 point difference with each other but because of big effort of each point in gird system, they have a free space between them.

So if we have a BIG screen, that free space will be much bigger. What I want is something like that this: each column just wrap it's content and remove unnecessary space! Since I use

Bootstrap

's grid system in my whole project, I have to use it but I want a feature like

wrap-content

.

Event if a row can be more than 12 section's, we could create more accurate parts.

In this situation that described in the picture, if I resize page, cols could overlap on each other too. I just they stay beside each other with a little space.

Answer 1

The extra space is exactly because Bootstrap set the width to the col-* in %.

e.g

.col-xs-3 {
    width: 25%;
}
.col-xs-2 {
    width: 16.66666667%;
}

Check this out for more information

By doing this you will achieve what you want:

.wrap-content{
    width: auto;
    border: 1px solid; /*only to show the boundaries of the elements*/
}

<div class="row">
    <div class="col-xs-2 wrap-content">
        <button class="my-btn">button</button>
    </div>
    <div class="col-xs-3 wrap-content">
        <button class="my-btn">button</button>
    </div>
</div>

Here a working JSFiddle

But I really recommend you to use a different markup, do not change the grid system of bootstrap eventually this can create inconsistencies.

I'm using col-xs just to make viable the jsfiddle example, change it to your desired col-.

Dealing with Bootstrap's column's free spaces

Sign up