bootstrap column vertical align
<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>no-gutter bootstrap 4
<div class="row no-gutters">
<div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>Bootstrap 4 Grid
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>.row bootstrap
.row{
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}bootstrap grid
<!----------------------- BOOTSTRAP GRID SYSTEM ------------------------>
This code will create 4 boxes placed side by side, which will be
dynamically positioned, according to the size of the screen. We define
the following behavior:
<!-- Desktop Display: we have 4 columns per row (each occupies 3 units out of 12) -->
class = "col-lg-3" <!-- display large with 12/3 = 4 columns -->
<!-- Tablet Display: we have 3 columns per row (each occupies 4 units out of 12) -->
class = "col-md-4" <!-- display medium with 12/4 = 3 columns -->
<!-- Mobile Display: we have 2 columns per row (each occupies the 6 units of 12) -->
class = "col-sm-6" <!-- display small with 12/6 = 2 columns -->
<!-- CODE -->
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6" style="background-color:red; border:1px solid black;">
One of four columns
</div>
<div class="col-lg-3 col-md-4 col-sm-6" style="background-color:yellow; border:1px solid black;">
One of four columns
</div>
<div class="col-lg-3 col-md-4 col-sm-6" style="background-color:green; border:1px solid black;">
One of four columns
</div>
<div class="col-lg-3 col-md-4 col-sm-6" style="border:1px solid black;">
One of four columns
</div>
</div>Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
