Responsive Grid

PageLines DMS encompasses a completely responsive grid system based on Bootstrap that contains 12 columns, or "spans". The grid can be used virtually anywhere. Mark it up in a post, in a page, or wherever you need structured, responsive content.

The responsive grid system uses percents instead of pixels for column widths, ensuring proper proportions for key screen resolutions and devices.

1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
3
3
3
3
4
4
4
5
2
5
6
6
7
5
8
4
9
3
10
2
11
1
12

How to use

Basic

<div class="row">
    <div class="span4">4</div>
    <div class="span8">8</div>
</div>
4
8

Offset

<div class="row">
    <div class="span6">6</div>
    <div class="span6 offset6">6 Offset 6</div>
</div>
6
6 Offset 6

Nested

<div class="row">
    <div class="span4">4</div>
    <div class="span8">8
        <div class="row-fluid">
            <div class="span6 zmb">6</div>
            <div class="span6 zmb">6</div>
        </div>
    </div>
</div>
4
8
6
6

Note: .zmb is a special PageLines utility class that you can use to specify a zero margin on top.zmt , or on bottom .zmb of any element giving you full control. Read more about these utility classes on our HTML/CSS Utilities] page.

Layout Examples

Newspaper Columns

<div class="row">
    <div class="span4">...</div>
    <div class="span4">...</div>
    <div class="span4">...</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet aliquam lectus. Nulla sagittis sed dolor ut ultrices. Nunc quam mauris, consequat at mauris cursus, hendrerit laoreet turpis. Phasellus a mauris euismod, aliquet sem sit amet, facilisis orci. Sed a augue rhoncus, elementum orci sed, laoreet elit. Vivamus venenatis sem eget risus consectetur lobortis consectetur et odio. Integer quis tincidunt enim.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet aliquam lectus. Nulla sagittis sed dolor ut ultrices. Nunc quam mauris, consequat at mauris cursus, hendrerit laoreet turpis. Phasellus a mauris euismod, aliquet sem sit amet, facilisis orci. Sed a augue rhoncus, elementum orci sed, laoreet elit. Vivamus venenatis sem eget risus consectetur lobortis consectetur et odio. Integer quis tincidunt enim.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet aliquam lectus. Nulla sagittis sed dolor ut ultrices. Nunc quam mauris, consequat at mauris cursus, hendrerit laoreet turpis. Phasellus a mauris euismod, aliquet sem sit amet, facilisis orci. Sed a augue rhoncus, elementum orci sed, laoreet elit. Vivamus venenatis sem eget risus consectetur lobortis consectetur et odio. Integer quis tincidunt enim.

Two Columns (Sidebar/Content)

<div class="row">
    <div class="span4">Sidebar Content</div>
    <div class="span8">Main Content</div>
</div>
Sidebar Content
Main Content

Three Columns (Two Sidebars/Main Content)

<div class="row">
    <div class="span3">Sidebar Content</div>
    <div class="span6">Main Content</div>
    <div class="span3">Sidebar Content</div>
</div>
Sidebar Content
Main Content
Sidebar Content

Image & Text

<div class="row">
    <div class="span4"><img src="..."></div>
    <div class="span8">Text...</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet aliquam lectus. Nulla sagittis sed dolor ut ultrices. Nunc quam mauris, consequat at mauris cursus, hendrerit laoreet turpis. Phasellus a mauris euismod, aliquet sem sit amet, facilisis orci. Sed a augue rhoncus, elementum orci sed, laoreet elit. Vivamus venenatis sem eget risus consectetur lobortis consectetur et odio. Integer quis tincidunt enim.