Per this they are:
| xs | extra small | below 576 pixels wide | ||
| sm | small | 576 pixels or wider | ||
| md | medium | 768 pixels or wider | ||
| lg | large | 992 pixels or wider | ||
| xl | extra large | 1200 pixels or wider |
Per this you use this stuff kinda like this:
<div class="col-sm-3 col-md-6">
Hello World
</div>
This shows off how one would fall over to a another setting, three columns wide, instead of six, when the screen real estate drops below 992 pixels in width. The number denotes the number of grid columns in a twelve-wide grid. (You may have two little six wide tables float beside each other horizontally, but not two seven wide tables, etc.) If there is just a large and small setting then everything below large is small. If there is just a large setting, then everything is large. Now what if you want to have a size larger than 1200 pixels for large displays? Well, here are a couple of hacks for that:
- http://stackoverflow.com/questions/23256977/bootstrap-3-extra-large-xl-columns
- https://gist.github.com/noisymask/9798e943fd191200b28f
...but neither of these are current for Bootstrap 4. :(
No comments:
Post a Comment