Bs Grid Medium
Bootstrap Grid - Medium Devices
Bootstrap Grid Example: Medium Devices
Extra small | Small | Medium | Large | |
---|---|---|---|---|
Class prefix | .col-xs | .col-sm | .col-md | .col-lg |
Screen width | <576px | >=768px | >=992px | >=1200px |
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>
Tip: Medium devices are defined equally having a covert width from 992 pixels to 1199 pixels.
For medium devices nosotros volition role the
.col-md-*
classes.Now nosotros volition add together the column widths for medium devices:
<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>
The next instance volition resultant inwards a 25%/75% split upward on minor devices in addition to a 50%/50% split upward on medium (and large) devices. On extra minor devices, it volition automatically stack (100%):
Example
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-3 col-md-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 col-md-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Note: Make certain that the amount ever adds upward to 12.
Using Only Medium
In the instance below, nosotros alone specify the.col-md-6
cast (without .col-sm-*
). This way that medium in addition to large devices volition split upward 50%/50% - because the cast scales up. However, for minor devices, it volition stack vertically (100% width):Example
<div class="row">
<div class="col-md-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-md-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
Comments
Post a Comment