Boxes

Regular Boxes

Boxes can be styled in a variety of ways to achieve the look required by using a combination of size class, background color/border-color, text color classes and border style classes. See Styling Classes for more examples.

Boxes also work with notification classes such as .success, .info, .alert, and .warning.

This is a regular box
This is a box with a background color class called .bkg-navy and a color class called .color-white
This is a box with a border color class called .border-green-light
This is a success box
This is an info box
This is an alert box
This is a warning box
Example
								
									
Sometimes when you innovate, you make mistakes. It is best to admit them quickly, and get on with improving your other innovations. Steve Jobs

Dismissable Boxes

All boxes can be made dismissable by adding the .dismissable class to the box wrapper.

This is a regular dismissable box
This is a dismissable box with a background color class called .bkg-navy and a color class called .color-white
This is a dismissable box with a border color class called .border-green-light
This is a dismissable success.
This is a dismissable info.
This is an dismissable alert.
This is a dismissable warning.

Addtional Styles

Boxes can be styled further with rounded corners and altered in size. To add rounded corners simply add the .rounded class to the box wrapper. To alter size simply add .small, .medium, .large or .xlarge classes to the box wrapper. See Styling Classes for more examples.

This is a small box
This is a medium sized box
And this is an extra large box
Example
								
									
Sometimes when you innovate, you make mistakes. It is best to admit them quickly, and get on with improving your other innovations. Steve Jobs
Theme Mountain

Current Version