CODEWITHSUNDEEP
csstwitter-bootstrap
Hearaman
Hearaman

Reputation: 8726

Can i write a grid with more columns without targeting the row columns count size 12 in Bootstrap?

One of my designers coded as below, to show responsive product blocks. Design presenting 3 products in Desktop and 2 products in Tablets.

This Markup showing more than 12 column count in a row. I never seen such kind of structure in Bootstrap documentation or in other sources. Is this Valid? Do you support this Markup?

<div class="row">
    <div class="col-sm-6 col-md-4">Product</div>
    <div class="col-sm-6 col-md-4">Product</div>
    <div class="col-sm-6 col-md-4">Product</div>
    <div class="col-sm-6 col-md-4">Product</div>
    <div class="col-sm-6 col-md-4">Product</div>
    <div class="col-sm-6 col-md-4">Product</div>
    ........
    .......
    .......

Upvotes: 1

Views: 39

Answers (2)

the_velour_fog
the_velour_fog

Reputation: 2184

Each div with the column attributes like col-md-4 gets a simple set of CSS properties added to it.
some padding: (its a really long line - you need to scroll sideways) https://github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap.css#L814

[...] .col-md-4,[ ..] {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

then, above the media query breakpoint, the float property is applied and its width is set
https://github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap.css#L1207

  .col-md-4 {
    float: left;
    width: 33.333333%;
  }

because the stylesheet uses box-sizing: border-box this 33.33% is applied to the border - not the content - box (not totally relevant - just a side issue).

Because the nature of floated elements is to simply stack alongside each other until there is no room, then they drop down into a new line box , this seems like it is fine.
The parent class="row" being display: block; will have its margin box set to full width of it parents content box.
In this case the columns elements get their widths set to be 1/3 of the parent container, because there are alot more than 3, i.e. the markup is saying here are some child elements whose aggregated width is 300% of its parent the row elements fall back to wrapping.
Which is quite a nice effect.

Upvotes: 1

Andrei Belokopytov
Andrei Belokopytov

Reputation: 1081

Yes, this markup is valid. There is an official Bootstrap example where same layout is used.

Upvotes: 1

Related Questions