The alignment of each row can be customized, irrespective of the alignment of the previous or succeeding rows, that is, using the justify-content-start, justify-content-center, and justify-content-end classes, columns can be left-, right-, and center-aligned. For example, let's revert to our simple, unnested grid and arrange the grid in such a way that the columns on the first row are center-aligned and align the columns on the second and third row to the right and to the left, respectively. To do so, we simply add the justify-content-start class alongside the row to the first element, and the justify-content-start and justify-content-end classes to the following rows:
<div class="container">
<h1>Our Print Sizes</h1>
<div class="row justify-content-center">
<div class="col-sm-6 col-md-3">Small</div>
<div class="col-sm-6 col-md-3">Medium</div>
</div>
<div class="row justify-content-start">
<div class="col-sm-6 col-md-3">Large</div>
<div class="col-sm-6 col-md-3">Extra Large</div>
</div>
<div class="row justify-content-end">
<div class="col-sm-6 col-md-3">Enormous</div>
<div class="col-sm-6 col-md-3">Extra Enormous</div>
</div>
</div>
Columns without margin and padding
You will have noted that columns are padded. To remove the padding, you can simply apply the no-gutters class to any row. The class removes the negative margin from the default row and then the horizontal padding from all immediate children columns to prevent runaway style inheritance.
You will have noted that columns are padded. To remove the padding, you can simply apply the no-gutters class to any row. The class removes the negative margin from the default row and then the horizontal padding from all immediate children columns to prevent runaway style inheritance.