...
To create a two-column row, use the "col-sm-6" class, which divides the row into two equal-width columns. The content will span half the width on small screens (tablets) and retain this layout on medium and large screens as well.
Code Snippet Example:
| Code Block | ||
|---|---|---|
| ||
<div class="container">
<div class="row">
<div class="col-sm-6">
<strong>One of two columns</strong>
<p>Content goes here.</p>
</div>
<div class="col-sm-6">
<strong>Two of two columns</strong>
<p>Content goes here.</p>
</div>
</div>
</div> |
...
To create a four-column row, use the "col-sm-3" class, which divides the row into four equal-width columns. The content will span one-fourth of the width on small screens (tablets) and retain this layout on medium and large screens as well.
Code Snippet Example:
| Code Block | ||
|---|---|---|
| ||
<div class="container">
<div class="row">
<div class="col-sm-3">
<strong>One of four columns</strong>
<p>Content goes here.</p>
</div>
<div class="col-sm-3">
<strong>Two of four columns</strong>
<p>Content goes here.</p>
</div>
<div class="col-sm-3">
<strong>Three of four columns</strong>
<p>Content goes here.</p>
</div>
<div class="col-sm-3">
<strong>Four of four columns</strong>
<p>Content goes here.</p>
</div>
</div>
</div> |
...