bootstrap breakpoints
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }boostrap grid
<!- BOOTSTRAP GRID SYSTEM ------------------------>
Extra small .col- <576px Mobile Display
Small .col-sm- ≥576px Mobile Display
Medium .col-md- ≥768px Tablet Display
Large .col-lg- ≥992px Desktop Display
Extra large .col-xl- ≥1200px Desktop Display
<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>.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>boostrap grid
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-6">.col-6<br>Subsequent columns continue along the new line.</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
