Container Classes

  • Content Formatting

Classes can be applied to the current paragraph with the Styles menu.

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="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="well well-green"
MSU-related notice.

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.