Make columns with equal size writing less html classes, combine them with other sizes from bootstrap
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
README.md
addons-grid-bootstrap.css
addons-grid-bootstrap.scss

README.md

bootstrap-addon-shorter-grid

I found the bootstrap very repetitive to make columns when usually they are the same width, or only one of them has different size.

View Demo Codepen

So you put the class .Row--BaseColumnWidth-{size media query}-{columns 12 based} So this:

  <div class="row Row--BaseColumnWidth--sm-2">
    <div>col-1</div>
    <div class="col-sm-8">Col 2 big</div>
    <div>col-6</div>
  </div>

Is the same as this

  <div class="row">
    <div class="col-sm-2">col-1</div>
    <div class="col-sm-8">Col 2 big</div>
    <div class="col-sm-2">col-6</div>
  </div>

.Row--noGap

you can add columns without gap (gutter) easily like so: 6 columns grid with only a class on the row (base-sm-2 2 columns of 12 each children of this row)

  <div class="row Row--BaseColumnWidth--sm-2 Row--noGap">
    <div>column 1</div>
    <div>column 2</div>
    <div>column 3</div>
    <div>column 4</div>
    <div>column 5</div>
    <div>column 6</div>
  </div>

10 columns based grid

Sometimes I found usefull to have 10 columns based grid, like 5 columns, same example than up there.

  <div class="row Row--Grid10--BaseColumnWidth--sm-2">
    <div>column 1</div>
    <div class="col10-sm-6">Column 2 (big)</div>
    <div>column 3</div>
  </div>