How to change bootstrap columns width

If you have 9 col-md-1 columns it is impossible since they cant be divided by 12 (grid system has 12 parts).

However, you can have 3 col-md-4 additional wrappers and put 3 col-md-4 columns inside each and that should give you the result you ask for.

Something similar to this:

 <div class="container-full">
         <div class="row clearfix">
    <div class="col-md-3 column well">
        <h2>
            Heading
        </h2>
        <p>
            Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
        </p>
        <p>
            <a class="btn" href="#">View details »</a>
        </p>
    </div>
    <div class="col-md-9 column">

        <div class="col-md-4">
            <div class="col-md-4">
                ...content...
            </div>
            <div class="col-md-4">
                ...content...
            </div>
            <div class="col-md-4">
                ...content...
            </div>
        </div>

        <div class="col-md-4">
            <div class="col-md-4">
                ...content...
            </div>
            <div class="col-md-4">
                ...content...
            </div>
            <div class="col-md-4">
                ...content...
            </div>
        </div>

        <div class="col-md-4">
            <div class="col-md-4">
                ...content...
            </div>
            <div class="col-md-4">
                ...content...
            </div>
            <div class="col-md-4">
                ...content...
            </div>
        </div>

    </div>
</div>

Edit: Fixed spelling mistake to wrapper col-md-3 => col-md-4


This might help https://github.com/drew-r/bootstrap-n-column you can create n-column bootstrap layouts using LESS


I've had to do this on RARE occasion...but when necessary, it can help...but anyway, you can create a custom grid definition so you could have a 7 column grid:

<div class='row grid7'>
    <div class='col-md-1'>1/7th</div>
    <div class='col-md-1'>1/7th</div>
    <div class='col-md-1'>1/7th</div>
    <div class='col-md-1'>1/7th</div>
    <div class='col-md-1'>1/7th</div>
    <div class='col-md-1'>1/7th</div>
    <div class='col-md-1'>1/7th</div>
</div>

Then, some CSS to make it work:

.grid7 .col-md-1 { width: 14.285714285714%; }
.grid7 .col-md-2 { width: 28.571428571429%; }
.grid7 .col-md-3 { width: 42.857142857143%; }
.grid7 .col-md-4 { width: 57.142857142857%; }
.grid7 .col-md-5 { width: 71.428571428571%; }
.grid7 .col-md-6 { width: 85.714285714286%; }
.grid7 .col-md-7 { width: 100%; }