2

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?

  • 2
    `list-inline` might be your solution. http://stackoverflow.com/questions/19677570/how-to-create-8-even-columns-in-bootstrap-3-with-out-gutter – Heraldmonkey Oct 31 '13 at 09:40

2 Answers2

4

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.

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
1

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

Sudheer
  • 2,955
  • 2
  • 21
  • 35
  • The problem is that the rest of the site needs to still abide by the 12 column system, I can't change that 'globally'. –  Oct 31 '13 at 09:33
  • now thats hard.i would do it by generating css for 11 columns.then rename span elements to something like spaan and so on for the required elements and copy them into the original css.not a great way though – Sudheer Oct 31 '13 at 09:43