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>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>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>grid system bootstrap
Extra small .col- <576px
Small .col-sm- ≥576px
Medium .col-md- ≥768px
Large .col-lg- ≥992px
Extra large .col-xl- ≥1200pxCopyright © 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
