Fcoder Fcoder - 5 months ago 10
HTML Question

Dealing with Bootstrap's column's free spaces

I have a big problem with

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

enter image description here

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
's grid system in my whole project, I have to use it but I want a feature like

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.


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


.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:

    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 class="col-xs-3 wrap-content">
        <button class="my-btn">button</button>

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-.