Bootstrap 3 and .Col-Xs-* - Do You Not Need Rows of 12 Units

Bootstrap 3 and .col-xs-* -- Do you not need rows of 12 units?

Bootstrap is a 12 column rid, but you can put more than 12 columns in a row. The remaining columns will simply wrap onto the next line below, depending on the viewport.

In this example, on "md" viewports (≥992px), the contents would span 12 columns total (8 + 4). But on "xs" (<768px) the content would span 18 columns, there would be one full row (12 columns) and then below it a half-row (6 columns).

<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

md...

|    8   |  4 |

xs...

|     12     |
|   6  |  

EDIT: Make sure to check out the Responsive Column Reset section of the documentation if you run into any issues with columns not wrapping correctly.

Bootstrap3 is it valid for 1 row to have infinity columns?

This is absolutely valid and documented markup for bootstrap. Have a look at my answer explaining this idea in depth: Bootstrap 3 and .col-xs-* -- Do you not need rows of 12 units? (includes pictures for a visual representation).

From the documentation:

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

If you look at the second example in the code, there are 3 columns, and the xs breakpoint has the value 6 for all columns. The sum of those columns being 18 (ie > 12).

This allows you to use the same markup for different row breaks on different breakpoints. The simplified idea is that you don't need to have different markup templates for different viewports. The actual .rows are guidelines, not concrete implementations that should only allow for columns equal to or less than 12.

Can I give the col-md-1.5 in bootstrap?

As @bodi0 correctly said, it is not possible. You either have to extent Bootstrap's grid system (you can search and find various solutions, here is a 7-column example) or use nested rows e.g. http://bootply.com/dd50he9tGe.

In the case of nested rows you might not always get the exact result but a similar one

<div class="row">
    <div class="col-lg-5">
        <div class="row">
            <div class="col-lg-4">1.67 (close to 1.5)</div>
            <div class="col-lg-8">3.33 (close to 3.5)</div>
        </div>    
    </div>
    <div class="col-lg-7">
        <div class="row">
            <div class="col-lg-6">3.5</div>
            <div class="col-lg-6">3.5</div>
        </div>    
    </div>
</div>

Bootstrap grid system- Can we use 2 col-*-12 in a .row class?

Yes it is valid. According to the doc

If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

UPDATE:

If you have different height blocks and you put everything inside one row block, you will get incorrect behavior. See this plunker

but if you use col-X-12 only, it does not really matter the way you use row classes. I think for col-X-12 you can even skip row and col-X-12 class. Just put everything inside regular div tag and you will get 100% width.

---

Related Topics