Menu
one:
<div class="row">
<div class="col-md-12">
<div class="row">
.
.
</div>
</div>
</div>
two:
<div class="row">
<div class="col-md-12 row">
.
.
</div>
</div>
Is both the implementations are same?can i use the 2 method so that i can reduced the mark-up.
361
You can easily nest grids using bootstrap by adding additional rows. Here is a step-by-step guide for this process. Within the desired column, create another element with class row . This second row element will contain your nested grid.
The first approach uses bootstrap offset class. The key is to set an offset equal to half of the remaining size of the row. So for example, a column of size 2 would be centered by adding an offset of 5, that's (12-2)/2.
You can use col-md-* class for child element inside the parent row class to split the columns for your need.
According to Bootstrap's own API documentation, when nesting columns any columns .col should be nested within a .row. The two should not be combined on a single element.
Aside from the fact this makes more sense semantically- the underlying CSS properties both classes affect are reliant on this structure.
Also note, when using col-md-12 in isolation, you are effectively creating a full width element (which a row is anyway). In which case using the grid layout may not be relevant unless you have other elements showing/coming into play at different screen sizes.
Right (if using other columns as well as col-md-12):
<div class="row">
<div class="col-md-12">
<div class="row">
.
.
</div>
</div>
</div>
Wrong:
<div class="row">
<div class="col-md-12 row">
.
.
</div>
</div>
If you just want a full width element, you dont need to use the grid layout and/or can remove one level of nesting.
155
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
