BS5 Grid Stacked/Horizontal
Bootstrap 4 Grid Example: Stacked-to-horizontal
We’ll design a simple grid system that appears stacked on very small devices and turns horizontal on larger ones.
A straightforward “stacked-to-horizontal” two-column layout is demonstrated in the example below, which will provide a 50%/50% split on all displays with the exception of extremely small screens, which will automatically stack (100%):
col-sm-6
col-sm-6
Example: Stacked-to-horizontal
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 bg-primary">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6 bg-dark">
<p>Sed ut perspiciatis...</p>
</div>
</div>
8</div>
Note: The values in the .col-sm-* classes represent the number of columns (out of 12) that the div should span. Thus, a column is spanked by .col-sm-1, 4 columns by .col-sm-4, 6 columns by .col-sm-6, and so on.
Note: You do not have to use all 12 of the available columns; just make sure the total comes up to 12 or less.
Note: By changing the .container class to .container-fluid, you may convert any fixed-width layout to a full-width layout:
Example: Responsive Container
<div class="container">
<div class="row">
<div class="col-sm-6">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Auto Layout Columns
One simple method to achieve identical width columns on all devices with Bootstrap 4 is to remove the number from .col-size-* and limit the use of the .col-size class to a predetermined amount of col elements. Bootstrap will determine the number of columns and set the width of each column to match. The responsiveness of the columns is determined by the size classes:
<!-- Two columns: 50% width on all screens, except for extra small (100% width) -->
<div class="row">
<div class="col-sm">1 of 2</div>
<div class="col-sm">2 of 2</div>
</div>
<!-- Four columns: 25% width on all screens, except for extra small (100% width)-->
<div class="row">
<div class="col-sm">1 of 4</div>
<div class="col-sm">2 of 4</div>
<div class="col-sm">3 of 4</div>
<div class="col-sm">4 of 4</div>
</div>
