Page Structures

What Bootstrap structure do I need to know?

Bootstrap has one basic feature that you need to understand. Once you appreciate this creating a web page layout that works on any device becomes very simple.
 

Bootstrap Grid System

Bootstrap's grid system allows up to 12 columns across the page.

If you do not want to use all 12 columns individually, you can group the columns together to create wider columns. Any combination can be used so long as the total is 12 eg 6+6 or 3+3+6 or 2+10 even 1+5+5+1

Bootstrap's grid system is responsive, and the columns will re-arrange depending on the screen size: On a big screen it might look better with the content organised in three columns, but on a small screen it would be better if the content items were stacked on top of each other.

Try making your browser window narrower and wider (on large screens of course) to see how the layout below adapts to the screen size.

One Third

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non libero magna. Sed et quam lacus

Two Third

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident

Three Fourth

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est

One Fourth

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non libero magna

One Fourth

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non libero magna.

One Half

At vero eos similique sunt in culpa qui officia deserunt et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias

One Fourth

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non libero magna

One Third

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum

One Third

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti

One Third

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum

One Half

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in feugiat.

One Half

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique suntin

How is this achieved?

The Bootstrap formatting is achieved using classes associated with HTML tags. One HTML tag that you need to be aware of is the

. The HTML
element is the generic container for flow content and does not inherently represent anything. The Bootstrap classes applied to the tags are what perform the magic for the layout. Typically a row with two columns would look like this in HTML code:

 

 
Column 1 content
 
Column 2 content

The good news is that you don't need to know how to code this HTML, the PyroCMS Page Editor does this for you. The reason you need to be aware of what is being done is that the Page Editor shows the page structure and reveals the underlying HTML tag names. So for the above code, you would actually see this:

You might use a column that contains nothing as a way of formatting layout. For example, on this page the "Next:" heading you see below as a single blank column before it.

The

shows as a grey DIV, highlighted in yellow in the picture to make it clearer.

 

 

 

Next:

  Page Editor