Page Layouts

  • Site Layout
  • Patty Kirkey

Bootstrap Grid System

The NatSci theme uses the Bootstrap grid system that divides the page up into 12 columns across the page. Columns can be combined as shown in the example below. There could be twelve 1 column width columns,  three 4 column width columns, two 6 column width columns, a single 12 width column, or any combination that adds up to a total of 12. 

Screenshot demonstrating the Bootstrap grid system

Available Page Layouts

The new NatSci theme has significantly reduced the number of available page layouts to better help with consistency and ease of use across all of the websites housed within Mura.

Mura page layout dropdown

These layouts include:

  • Department Home 1 Column
  • Department Home 2 Columns
  • Department Home 3 Columns
  • NatSci Home
  • News Article
  • Secondary Page
  • Section Front

Department Home 1 Column

This layout is reserved for department and program website homepages. The content area consists of a single column for content.

Department Home 2 Column

This layout is reserved for department and program website homepages. The content area consists of two columns for content.

Department Home 3 Column

This layout is reserved for department and program website homepages. The content area consists of three columns for content.

NatSci Home

This layout is reserved for the College of Natural Science homepage.

News Article

This layout should be used for all news related posts. It includes specialized functionality specific to news, including a large hero image and social media share buttons. This layout is divided into 2 columns, with the left column having a width of 8, and the right column having a width of 4. The left column should be used for the primary page content, with the right column being used for side navigation and additional information.

Secondary Page

This layout should be used for all other pages within a site. This layout is divided into 2 columns, with the left column having a width of 8, and the right column having a width of 4. The left column should be used for the primary page content, with the right column being used for side navigation and additional information.

Section Front

This layout should be used as the main page for a section within the site (typically the top-level pages in your top navigation). This layout has a display object area that extends across the entire width of the page above the left and right columns. See https://natsci.msu.edu/current-students/ for an example of what this page looks like.