0

columns here exceeds max limit of 12 allowed in bootstrap, yet it is works. How?

<div row="container">
<div class="col-md-4 col-sm-6 portfolio-item">...</div>
<div class="col-md-4 col-sm-6 portfolio-item">...</div>
<div class="col-md-4 col-sm-6 portfolio-item">...</div>
<div class="col-md-4 col-sm-6 portfolio-item">...</div>
<div class="col-md-4 col-sm-6 portfolio-item">...</div>
<div class="col-md-4 col-sm-6 portfolio-item">...</div>
</div>
Sid
  • 51
  • 10
  • 1
    It means that after 12, it's gonna expand to the next row.. – choz Mar 06 '17 at 01:24
  • So basically the guy is not explicitly defining it but rather counting on the implicit function? – Sid Mar 06 '17 at 01:25
  • Something like that. In this case, the guy only wants to display 3 portfolio items per row in md devices and 2 items per row in sm devices. You can play around with that to see how it will behave. – choz Mar 06 '17 at 01:28
  • Thanks for the brief. Got it – Sid Mar 06 '17 at 01:31
  • This doc explains: http://stackoverflow.com/documentation/twitter-bootstrap/6124/using-clearfix-in-rows-and-cols/28651/can-bootstrap-column-units-exceed-12-in-a-row#t=201703060159093416594 Also, `.col-` should always be wrapped inside a `.row` – Carol Skelly Mar 06 '17 at 02:00

1 Answers1

1

Whenever arow exceeds 12 columns in bootstrap the rest of the columns move to the next row, as if a next row is being created.

but according to bootstrap documentation you should always wrap the columns inside a row. so it is a bad practice.

see the effect in the example

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div row="container">
<div class="col-md-4 col-sm-6 portfolio-item" style="background-color:blue;">...</div>
<div class="col-md-4 col-sm-6 portfolio-item" style="background-color:black;">...</div>
<div class="col-md-4 col-sm-6 portfolio-item" style="background-color:green;">...</div>
<div class="col-md-4 col-sm-6 portfolio-item" style="background-color:brown;">...</div>
<div class="col-md-4 col-sm-6 portfolio-item" style="background-color:grey;">...</div>
<div class="col-md-4 col-sm-6 portfolio-item" style="background-color:yellow;">...</div>
</div>

<br><br>
<div class="col-md-12 col-xs-8 portfolio-item" style="background-color:blue;">...</div>
<div class="col-md-12 col-xs-4 portfolio-item" style="background-color:black;">...</div>
<div class="col-md-12 col-xs-8 portfolio-item" style="background-color:green;">...</div>
<div class="col-md-4 col-xs-8 portfolio-item" style="background-color:brown;">...</div>
<div class="col-md-4 col-xs-5 portfolio-item" style="background-color:grey;">...</div>
<div class="col-md-4 col-xs-4 portfolio-item" style="background-color:yellow;">...</div>
</div>
neophyte
  • 6,540
  • 2
  • 28
  • 43