Bootstrap 3, 11 evenly spaced columns?

Question

I'm new to bootstrap 3, and I'm trying to grasp the concept of the grid system. This has been fine so far as the controls I'm working are all designed in columns that factors of 12.

However, there's one particular control that has 11 columns, and they're evenly spaced.

How can I achieve this whilst still complying with the bootstrap grid system to keep it all responsive?

Answer 1

This would get you fairly close..

<div class="col-sm-11">
    <div class="col-sm-1 col-sm-offset-1">1</div>
    <div class="col-sm-1">1</div>
    <div class="col-sm-1">1</div>
    <div class="col-sm-1">1</div>
    <div class="col-sm-1">1</div>
    <div class="col-sm-1">1</div>
    <div class="col-sm-1">1</div>
    <div class="col-sm-1">1</div>
    <div class="col-sm-1">1</div>
    <div class="col-sm-1">1</div>
    <div class="col-sm-1">1</div>
</div>

Demo: http://bootply.com/91138

However, this won't take up the full width of the page.. That would require customization.

Answer 2

customize bootstrap find the option @gridcolumns enter the required number of columns and u can generate your customized css