-
- Mailbox
- HotIndox
- Read Message
- Compose
- Template
News
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.
Liquid Fixed
Liquid Fixed Layouts
Below are liquid layouts where the layout spans the entire page width wise, expanding and contracting as the page is resized.
2 Column Layout
Left Fixed
This is a two columns liquid layout with the left column being static, always in view.
Fixed - 250px
Liquid
Right Fixed
Just change the pull-left class to pull-right without changing any code.
Fixed - 250px
Liquid
3 Column Layout
This is a three-column layout where the side columns are fixed-width and the center column is liquid.
In this layout the side column widths are in pixels and the centre page adjusts in size to fill the rest of the screen.
Fixed - 250px
Fixed - 200px
Liquid
Fixed - 250px
Fixed - 200px
Liquid
Fixed - 250px
Fixed - 200px
Liquid
4 Column Layout
You can create layouts with any number of fixed and liquid/fluid columns.
Fixed - 160px
Fixed - 160px
Fixed - 160px
Liquid
Fixed - 160px
Fixed - 160px
Fixed - 160px
Liquid
Fixed - 160px
Fixed - 160px
Fixed - 160px
Liquid
Fixed - 160px
Fixed - 160px
Fixed - 160px
Liquid
Class Name
|
Extra small devices Phones (<768px) |
Small devices Tablets (≥768px) |
Medium devices Desktops (≥992px) |
Large devices Desktops (≥1200px) |
|
|---|---|---|---|---|
| Fixed width 160px | .fixed-xs-160 |
.fixed-sm-160 |
.fixed-md-160 |
.fixed-lg-160 |
| Fixed width 200px | .fixed-xs-200 |
.fixed-sm-200 |
.fixed-md-200 |
.fixed-lg-200 |
| Fixed width 250px | .fixed-xs-250 |
.fixed-sm-250 |
.fixed-md-250 |
.fixed-lg-250 |
| Fixed width 300px | .fixed-xs-300 |
.fixed-sm-300 |
.fixed-md-300 |
.fixed-lg-300 |
| Fixed width 350px | .fixed-xs-350 |
.fixed-sm-350 |
.fixed-md-350 |
.fixed-lg-350 |
| Force the column to the left. | .pull-xs-left |
.pull-sm-left |
.pull-md-left |
.pull-lg-left |
| Force the column to the right. | .pull-xs-right |
.pull-sm-right |
.pull-md-right |
.pull-lg-right |
Responsive column resets
Fixed Sizes
Fixed column will be resized for each device.
| Device | Width |
|---|---|
| Large devices | 350px |
| Medium devices | 200px |
| Small devices | 160px |
| Extra Small devices | 100% |
Liquid
Shifting columns.
The fixed column moves to the left on the medium device and returns to the right on the small device.
| Device | Position |
|---|---|
| Large devices | Right |
| Medium devices | Left |
| Small devices | Right |
| Extra Small devices | Center |
Hide columns.
On medium devices the fixed column will be hidden.