For a site with a more fixed layout, you can use the .fixed-box
class. Below 768px
, the fixed-box will remain at 100% width. The breakpoints above 768px
are 992px
and 1200px
. To have a full-screen layout, use the .fluid-box
class.
The class you decide to use (whether it be fixed or fluid) will be the wrapping "container" for the rest of your grid, as is shown below in the example.
<div class="fluid-box">
<div class="row">
...
</div>
</div>
There are four different column sizes. Large, Medium, Small, and Extra Small. Barebones Grid is based off of a standard 12 column layout. To use the columns, simply give the class .{type}-{num}
to the object. In the case of a medium sized column, if you wish the object to have half the container size, give the class .md-6
.
Below is a table of the available types, their screen sizes, and class prefixes.
Extra Small | Small | Medium | Large | |
---|---|---|---|---|
Screen Sizes | Less than 768px | 768px to 991px | 992px to 1199px | 1200px and above |
Class Prefixes | .xs- |
.sm- |
.md- |
.lg- |
Here is an example of how to use the grid system, what it looks like, and how it behaves with resizing. (feel free to resize your screen larger and smaller to see) This is using the medium column class.
Below is the code for the example above.
<div class="row">
<div class="md-1">.md-1</div>
<div class="md-1">.md-1</div>
<div class="md-1">.md-1</div>
<div class="md-1">.md-1</div>
<div class="md-1">.md-1</div>
<div class="md-1">.md-1</div>
<div class="md-1">.md-1</div>
<div class="md-1">.md-1</div>
<div class="md-1">.md-1</div>
<div class="md-1">.md-1</div>
<div class="md-1">.md-1</div>
<div class="md-1">.md-1</div>
</div>
<div class="row">
<div class="md-8">.md-8</div>
<div class="md-2">.md-2</div>
<div class="md-2">.md-2</div>
</div>
<div class="row">
<div class="md-6">.md-6</div>
<div class="md-6">.md-6</div>
</div>
<div class="row">
<div class="md-8 md-offset-2">.md-8 .md-offset-2</div>
</div>
There are several helper classes provided for your convenience which help with bootstrapping your application.
The class .clear
will allow you to easily clear a float
.
There are two classes used for floating elements left and right. These are .float-left
and .float-right
.