Is it possible to specify 16 colums to bootstrap 3

Question

I'm a bit confused. I'm tying to adapt the boostrap 3 grid to 16 column.

I'm changing these vars in my variable.less:

@grid-columns: 16;
@gridColumnWidth: 32px;
@gridGutterWidth: 30px

But still when I inspect my col-lg-12 class, it has a 100% width.

Answer 1

Add this grid generator as *.less file

/**
  GRID GENERATOR

  .grid-generator(16,20px,'mycol','myrow');

  generate 16-column grid with 20px-gutter

  ROW

    .myrow{...}

  COLUMNS

    .mycol-1{...} ... .mycol-16{...}

  OFFSETS

    .mycol-offset-1{...} ... .mycol-offset-15{...}

  PULLS

    .mycol-pull-0{...} ... .mycol-pull-15{...}

  PUSHS

    .mycol-push-0{...} ... .mycol-push-15{...}

  or for Bootstrap 3

  standard bootstrap-3 grid

    .grid-generator-responsive();

  16-column bootstrap-3 grid with 20px gutter

    .grid-generator-responsive(16, 20px);

  @author: [e-mail]

 */

.grid-generator(@cols: 12, @gutter: 30px, @col-name: 'col', @row-name: 'row', @offsets: true, @ordering: true){

  // row container
  .init-row() when (@row-name > '') {
    @name: ~".@{row-name}";
    @{name}{
      margin-left: (@gutter / -2);
      margin-right: (@gutter / -2);
      &:before,&:after{
        content: " ";
        display: table;
      }
      &:after{
        clear: both;
      }
    }
  }
  .init-row();

  // common properties
  .properties(@index) when (@index = @cols)
  {
    @name: ~".@{col-name}-@{index}";
    .properties(@index - 1, @name);
  }

  .properties(@index, @names) when (@index > 0)
  {
    @name: ~".@{col-name}-@{index}";
    .properties(@index - 1, ~"@{names}, @{name}");
  }

  .properties(@index, @names) when (@index = 0)
  {
    @{names}
    {
      position: relative;
      min-height: 1px;
      padding-left: (@gutter / 2);
      padding-right: (@gutter / 2);
      float: left;
    }
  }

  .properties(@cols);

  // unfloat for full width
  @lname: ~".@{col-name}-@{cols}";
  @{lname} {
    float: none;
  }

  // WIDTH of columns
  .width(@index) when (@index > 0)
  {
    @name: ~".@{col-name}-@{index}";
    @{name}
    {
      width: (100% / @cols * @index);
    }
    .width(@index - 1);
  }

  .width(@cols);

  // OFFSET
  .offset(@index) when (@index > 0) and (@offsets)
  {
    @name: ~".@{col-name}-offset-@{index}";
    @{name}
    {
      margin-left: (100% / @cols * @index);
    }
    .offset(@index - 1);
  }
  .offset(@index) when (@index = 0) and (@offsets)
  {
    @name: ~".@{col-name}-offset-@{index}";
    @{name}
    {
      margin-left: 0;
    }
  }
  .offset(@cols - 1);

  // PUSH
  .push(@index) when (@index > 0) and (@ordering)
  {
    @name: ~".@{col-name}-push-@{index}";
    @{name}
    {
      left: (100% / @cols * @index);
    }
    .push(@index - 1);
  }
  .push(@index) when (@index = 0) and (@ordering)
  {
    @name: ~".@{col-name}-push-@{index}";
    @{name}
    {
      left: auto;
    }
  }
  .push(@cols - 1);

  // PULL
  .pull(@index) when (@index > 0) and (@ordering)
  {
    @name: ~".@{col-name}-pull-@{index}";
    @{name}
    {
      right: (100% / @cols * @index);
    }
    .pull(@index - 1);
  }
  .pull(@index) when (@index = 0) and (@ordering)
  {
    @name: ~".@{col-name}-pull-@{index}";
    @{name}
    {
      right: auto;
    }
  }
  .pull(@cols - 1);

}

// standard bootstrap-3 grid
//   .grid-generator-responsive();

// 16-column bootstrap-3 grid with 20px gutter
//   .grid-generator-responsive(16, 20px);

.grid-generator-responsive(@cols: 12, @gutter: 30px, @col-name: 'col', @row-name: 'row'){

  // XS
  .grid-generator(@cols, @gutter, ~"@{col-name}-xs", @row-name, false, false);

  // SM
  @media (min-width: 768px) {
    .grid-generator(@cols, @gutter, ~"@{col-name}-sm", '');
  }

  // MD
  @media (min-width: 992px) {
    .grid-generator(@cols, @gutter, ~"@{col-name}-md", '');
  }

  // MD only
  @media (min-width: 1200px){
    .grid-generator(@cols, @gutter, ~"@{col-name}-lg", '');
  }
}

and add less code

.grid-generator-responsive(16, 30px, 'col', 'row');

or using default

.grid-generator-responsive(16);

It will generate 16-column bootstrap grid with 30px gutter

Answer 2

It's possible to achieve more than 12 columns by nesting a grid within a column. I have experimented with this and came up with this sample code.

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-9">Nullam vehicula magna eget egestas vestibulum. Fusce sagittis vitae enim a interdum. Cras a augue placerat, laoreet nulla vel, posuere quam. Vivamus suscipit, justo at iaculis vulputate, felis ex placerat magna, at tincidunt ligula metus non ligula. Ut maximus neque quis diam aliquam, eget efficitur mauris cursus. Phasellus ultrices dui vitae porttitor fermentum. Mauris id hendrerit felis, nec pellentesque diam. Nullam pellentesque scelerisque orci eget elementum. Phasellus eget risus rhoncus, facilisis nunc sit amet, fringilla mauris. Nunc vitae ultricies nisi, at pretium tortor. Vestibulum vulputate nibh ex, vitae placerat nisi consectetur nec. Maecenas fringilla in eros nec varius. Nam at dolor finibus, porttitor quam nec, consectetur dui. Nulla rhoncus sit amet magna sed condimentum.</div>
            <div class="col-md-3">Proin suscipit et urna sit amet ultrices. Morbi et tincidunt augue. Mauris ornare commodo urna quis sagittis. Phasellus egestas vehicula ex et fringilla. Curabitur tristique ultrices massa. Quisque nisl enim, malesuada eget purus id, luctus facilisis libero. Praesent ut nisl ligula. Maecenas augue velit, gravida id enim eu, feugiat laoreet orci.</div>
        </div>
        <div class="row">
            <div class="col-md-12">Sed a dignissim mauris, eget accumsan nunc. Nullam facilisis magna orci, vel volutpat justo accumsan vitae. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eleifend nisi ut purus volutpat varius. Integer volutpat erat vitae imperdiet feugiat. Nullam nec luctus mi. Donec accumsan lacus mi, a aliquam elit pretium sit amet. Aenean laoreet fermentum tempor. Phasellus sagittis dui ornare, varius nisl ut, bibendum urna.</div>
        </div>
        <div class="row">
            <div class="col-md-9">
                <div class="row">   <!-- Row nested inside a column -->
                    <div class="col-md-2">Proin viverra porta orci, et lacinia nisl tempus vitae. Nam a pharetra massa.</div>
                    <div class="col-md-2 col-md-offset-1">In sed vestibulum risus, ut malesuada nisl. Nulla cursus, enim in pretium euismod, orci est consectetur lorem, ut posuere nunc nisi vitae tellus.</div>
                    <div class="col-md-2">In sed vestibulum risus, ut malesuada nisl. Nulla cursus, enim in pretium euismod, orci est consectetur lorem, ut posuere nunc nisi vitae tellus.</div>
                    <div class="col-md-2">In sed vestibulum risus, ut malesuada nisl. Nulla cursus, enim in pretium euismod, orci est consectetur lorem, ut posuere nunc nisi vitae tellus.</div>
                    <div class="col-md-2 col-md-offset-1">Proin viverra porta orci, et lacinia nisl tempus vitae. Nam a pharetra massa.</div>
                </div>
            </div>
            <div class="col-md-2 col-md-offset-1">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.</div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>       <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>     <!-- Latest compiled and minified JavaScript -->
</body>

Answer 3

The number of columns is hard coded into the .less file. @grid-columns is only used to calculate the widths.

Bootstrap source code: https://github.com/twbs/bootstrap/blob/master/less/grid.less#L74

Apparently changing the number of columns will possibly be added to version 3.1. https://github.com/twbs/bootstrap/issues/9436#issuecomment-22849238