Container Classes

  • Content Formatting

Please read Applying HTML Content Classes for information on applying container classes in Mura.

The following classes are paired with their visual style and are all available in the NatSci web theme for content styling.


class="lead"; Lead is designed to lead off a page's content with a large and strong font to draw some attention.

class="well"; Well is designed to emphasis like content. It can be paired with "well-large" or "well-small" for a few additional options.

class="notice"

class="notice" highlights an on-page warning. When used in conjunction with headers and font icons, you can create a nice looking callout.

class="alert alert-warning"

"alert alert-warning" can be used to bring attention to something that has gone wrong.

class="alert alert-danger"

"alert alert-danger" can be used to bring attention to something that has gone wrong.

class="alert alert-success"

"alert alert-success" is great for positive feedback.

class="alert alert-info"

"alert alert-info" is a little more neutral for a less dramatic presence.

class="pull-left" puts a DIV on the left side.
class="pull-right" puts a DIV on the right side.
class="clearfix" resets all floats.

 

The example below is based on a 12 column grid layout. Screen sizes are as follows:

  • extra small (xs) - phones; col-xs-12 (or any number of columns 1-12)
  • small (sm) - tablets; col-sm-12 (or any number of columns 1-12)
  • medium (md) - desktops; col-md-12 (or any number of columns 1-12)
  • large (lg) - larger desktops; col-lg-12 (or any number of columns 1-12)

Bootstrap grid examples

class="col-lg-9" sets the width of the DIV to span 9 columns of the 12 column grid on a large screen. This one is used with the well class. When using columns, make sure to wrap them in a DIV with a class of row to complete the layout.
This container is using 3 out of the 12 columns with no "well" class. Many more styles are available at http://getbootstrap.com/

 

Other classes are listed in articles, Integrated Brand Colors and College and Unit Colors.