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>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>breakpoint bootstrap
// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap
// 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) { ... }bootstrap grids examples
<div class="container">
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
</div>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>bootstrap screen sizes
The Bootstrap grid system has four classes:
xs (for phones - screens less than 768px wide)
sm (for tablets - screens equal to or greater than 768px wide)
md (for small laptops - screens equal to or greater than 992px wide)
lg (for laptops and desktops - screens equal to or greater than 1200px wide)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
