Sections

Wrap all your content in a <section> tag for consistent padding on all pages. A <section> can be placed directly in the #content tag or you can add it inside a grid and create a complex layout.

Basic example

By default, all the <section> does, is apply some basic border and padding to contain some content. The main content should be placed inside a <div> with the class .section-body.

<section>
	<div class="section-body">
		~ Section body content goes here ~
	</div>
</section>

Sections with heading

Easily add a heading container to your section with .section-header.

<section>
	<div class="section-header">
		~ Section header content goes here ~
	</div>
	<div class="section-body">
		~ Section body content goes here ~
	</div>
</section>

Grid system

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

Visit the Bootstrap documentation for a detailed help about the grid system.

Cards

Cards are a big part of the Material Admin styling. There are a lot of styling options for the .card class.

Basic example

The .card class adds, by default, padding to contain the content. When you add a style, for example .style-primary, the card will become painted.

<div class="card style-primary">
	<div class="card-body">
		Basic card sample
	</div>
</div>

Card with header

Add a header container to your card with .card-head. Place a <header> inside to contain your title.
Inside the <header> you can add your title directly or place it in <span>, <strong>, <em> or <h1> through <h6> tags.

<div class="card style-primary">
	<div class="card-head">
		<header>Card header</header>
	</div>
	<div class="card-body">
		Card content
	</div>
</div>

Action bar

Add an action bar to your card with .card-actionbar. The action bar should be used to add buttons to a card. A row of buttons should be added inside an .card-actionbar-row. element.

<div class="card">
	<div class="card-body">
		Card content
	</div>
	<div class="card-actionbar">
		<div class="card-actionbar-row">
			<button type="submit" class="btn btn-flat">Cancel</button>
			<button type="submit" class="btn btn-flat btn-primary">Add event</button>
		</div>
	</div>
</div>

Styling options

Styling a .card is easy. You can put one of the .style-* classes on either the .card, .card-head or .card-body. There are 15 solid colors available.

<div class="card style-default-dark">...</div>
<div class="card style-default">...</div>
<div class="card style-default-light">...</div>
<div class="card style-default-bright">...</div>

<div class="card style-gray-dark">...</div>
<div class="card style-gray">...</div>
<div class="card style-gray-light">...</div>
<div class="card style-gray-bright">...</div>

<div class="card style-primary-dark">...</div>
<div class="card style-primary">...</div>
<div class="card style-primary-light">...</div>
<div class="card style-primary-bright">...</div>

<div class="card style-accent-dark">...</div>
<div class="card style-accent">...</div>
<div class="card style-accent-light">...</div>
<div class="card style-accent-bright">...</div>

<div class="card style-success">...</div>
<div class="card style-warning">...</div>
<div class="card style-danger">...</div>
<div class="card style-info">...</div>

Styling individual parts

A .style-* class can be placed inside different parts of the .card.
You can choose to only place the .style-* class in either the .card-head or .card-body. By default the .card class has a white background, this will result in the 2 examples below.

<div class="card">
	<div class="card-header style-primary">
		...
	</div>
	<div class="card-body">
		...
	</div>
</div>

<div class="card">
	<div class="card-header">
		...
	</div>
	<div class="card-body style-primary">
		...
	</div>
</div>

You can create a flat colored card by placing the .style-* in .card (Example 3).
If you want your header to popout, place the .style-* class in both .card-head and .card-body (Example 4).

<div class="card style-primary">
	<div class="card-header">
		...
	</div>
	<div class="card-body">
		...
	</div>
</div>

<div class="card">
	<div class="card-header style-primary">
		...
	</div>
	<div class="card-body style-primary">
		...
	</div>
</div>

Underlined header

Want your header underlined? Simply add .card-underline.

<div class="card card-underline">
	...
</div>

Card with outlining

You can create a border around your card with .card-outlined. This will create a white background in your .card.

<div class="card card-outlined style-primary">
	...
</div>

Bordered card

By adding .card-bordered to your card, you will also create a border around your card. .card-bordered however, will not color the background white of the .card class. This way you can create the effect below.

<div class="card card-bordered style-primary">
	...
	<div class="card-body style-default-bright">
		...
	</div>
</div>

Header sizes

The class .card-head can have 3 additional sizes, .card-head-xs, .card-head-sm and .card-head-lg.

<div class="card-head card-head-xs">...</div>
<div class="card-head card-head-sm">...</div>
<div class="card-head">...</div>
<div class="card-head card-head-lg">...</div>

Header tools

If you want buttons in your .card-head, you can use the .tools class. Place the .tools class in your .card-head after the <header>.

<div class="card-head">
	<header><h4>Card header</h4></header>
	<div class="tools">
		<div class="btn-group">
			<a class="btn btn-icon-toggle btn-refresh"><i class="fa fa-refresh"></i></a>
			<a class="btn btn-icon-toggle btn-collapse"><i class="fa fa-angle-down"></i></a>
			<a class="btn btn-icon-toggle btn-close"><i class="fa fa-times"></i></a>
		</div>
	</div>
</div>

No padding

To remove the padding of an element inside a card, use the class .no-padding.

<div class="card">
	<div class="card-head">
		...
	</div>
	<div class="card-body no-padding">
		Card content
	</div>
</div>

Force padding

If you removed the padding, but want to add padding to certain elements, use the class .force-padding.

<div class="card">
	<div class="card-head">
		...
	</div>
	<div class="card-body force-padding">
		Card content
	</div>
</div>

Small padding

Use the class .small-padding to reduce the padding on .card elements by half.

<div class="card">
	<div class="card-head">
		...
	</div>
	<div class="card-body small-padding">
		Card content
	</div>
</div>

No Y padding

Use the class .no-y-padding to remove the padding on top and bottom of a .card-body element.

<div class="card">
	<div class="card-head">
		...
	</div>
	<div class="card-body no-y-padding">
		Card content
	</div>
</div>

No side padding

Use the class .no-side-padding to remove the padding on the sides of a .card-body element.

<div class="card">
	<div class="card-head">
		...
	</div>
	<div class="card-body no-side-padding">
		Card content
	</div>
</div>

Typography

In addition to the standard Bootstrap typography , Material Admin has several additional options.

Font weight

Handy classes for different font weights. These classes can be used on any tag you want.

<h3 class="text-light">Font weight - light</h3>
<h3 class="text-normal">Font weight - normal</h3>
<h3 class="text-medium">Font weight - medium</h3>
<h3 class="text-bold">Font weight - bold</h3>
<h3 class="text-ultra-bold">Font weight - ultra bold</h3>

Font sizes

If you want to change the font size of certain elements, you can use these size classes.

<span class="text-sm">Small</span>
<span class="text-lg">Large</span>
<span class="text-xl">X-Large</span>
<span class="text-xxl">XX-Large</span>
<span class="text-xxxl">XXX-Large</span>

Color options

Use any of the available text classes to quickly color your text. These classes can be used on any tag you want.

<strong class="text-default-dark">Default dark</strong>
<strong class="text-default">Default</strong>
<strong class="text-default-light">Default light</strong>
<strong class="text-default-bright">Default bright</strong>

<strong class="text-primary-dark">Primary dark</strong>
<strong class="text-primary">Primary</strong>
<strong class="text-primary-light">Primary light</strong>
<strong class="text-primary-bright">Primary bright</strong>

<strong class="text-accent-dark">Accent dark</strong>
<strong class="text-accent">Accent</strong>
<strong class="text-accent-light">Accent light</strong>
<strong class="text-accent-bright">Accent bright</strong>

<strong class="text-success">Success</strong>
<strong class="text-warning">Warning</strong>
<strong class="text-danger">Danger</strong>
<strong class="text-info">Info</strong>

Icon list

You can use an icon list by adding the .dl-icon class to a .dl-horizontal list.

<dl class="dl-horizontal dl-icon">
	<dt><span class="fa fa-fw fa-graduation-cap fa-lg text-muted"></span></dt>
	<dd>
		<span class="text-muted text-muted">Career</span><br/>
		<span class="text-medium opacity-50">Manager director, Commercial manager, Commercial assistant</span>
	</dd>
	<dt><span class="fa fa-fw fa-gift fa-lg text-muted"></span></dt>
	<dd>
		<span class="text-muted">Birthday</span><br/>
		<span class="text-medium opacity-50">Juli 30</span>
	</dd>
</dl>

Shaded text

Add .text-shadow to create a text shadow.

<span class="text-xxxxl text-default-bright text-shadow">Shaded text</span>

Text divider

Create a text divider by adding the .text-divider to a <div> tag. Then add the text inside a <span>.

<div class="text-divider"><span>Email list</span></div>

Text columns

Text columns are great for displaying large portions of text on a wide screen. It creates easy to read text.
Place your text inside a .text-columns-* class to create the columns.

<div class="text-columns-2">
	<p>...</p>
</div>
<div class="text-columns-3">
	<p>...</p>
</div>
<div class="text-columns-4">
	<p>...</p>
</div>

Tables

In addition to the standard Bootstrap tables , Material Admin has several additional options.

Banded tables

Use .table-banded to add banded-striping to any table column within the <tbody>.

<table class="table table-banded">
	...
</table>

Table buttons

Use the .btn-xs in a .table row to create a button within the boundaries of the row height.

<td>
	<button type="button" class="btn btn-xs btn-default">Edit</button>
</td>

Forms

In addition to the standard Bootstrap forms , Material Admin has several additional options.

Floating labels

A floating label hides the label if no text is entered into an <input>, <select> or <textarea>. This will result in a clean form.
You can add a floating label by adding the class .floating-label to a .form-group.

<form class="form">
	<div class="form-group floating-label">
		<input type="text" class="form-control" id="floatInput">
		<label for="floatInput">Floating label</label>
	</div>
</form>

Form footer

The class .form-footer can be used if you want to add your buttons below your form, without additional styling. It only adds some basic padding to align nicely with your form elements.

Textarea heights

Use .control-*-rows to create different heights on a <textarea>.

<textarea class="form-control control-2-rows">2 rows</textarea><br>
<textarea class="form-control control-3-rows">3 rows</textarea><br>
<textarea class="form-control control-4-rows">4 rows</textarea><br>
<textarea class="form-control control-5-rows">5 rows</textarea><br>
<textarea class="form-control control-6-rows">6 rows</textarea><br>
<textarea class="form-control control-7-rows">7 rows</textarea><br>
<textarea class="form-control control-8-rows">9 rows</textarea><br>
<textarea class="form-control control-10-rows">10 rows</textarea><br>
<textarea class="form-control control-11-rows">11 rows</textarea><br>
<textarea class="form-control control-12-rows">12 rows</textarea><br>

Textarea auto size

To create a <textarea> that will grow if you add more text, add the class autosize and the attribute rows="1".

<textarea class="form-control autosize" rows="1" placeholder="Leave a message"></textarea>

Inverse form

Add .form-inverse if you want to add the form on a dark background. This will invert the colors.

<form class="form form-inverse">
	...
</form>

Buttons

In addition to the standard Bootstrap buttons , Material Admin has several additional options.

Options

Use any of the available button classes to quickly create a styled button.

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-inverse">Inverse</button>
<button type="button" class="btn btn-support1">Support 1</button>
<button type="button" class="btn btn-support2">Support 2</button>

Button styles

Material Admin has 3 types of buttons: The default style, the raised button and the flat button.

<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-raised btn-primary">Raised button</button>
<button type="button" class="btn btn-flat btn-primary">Flat button</button>

Icon buttons

If you only want to add an icon in a button, you should use either the .btn-floating-action or the .btn-icon-toggle.

<button type="button" class="btn btn-floating-action btn-primary"><i class="fa fa-star"></i></button>
<button type="button" class="btn btn-icon-toggle btn-primary"><i class="fa fa-star"></i></button>

Button labels

If you want to display a .label on your button, you just have to add a .btn-labeled class to your .btn.

<a href="#" class="btn btn-primary btn-labeled text-default-bright">
	Button
	<span class="label label-warning">12</span> 
</a>

Images

In addition to the standard Bootstrap images , Material Admin has several additional options.

Backdrop

The class .img-backdrop scales the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area.
To create a backdrop image, give a <div> tag the class .img-backdrop and set the background-image in css.

<div class="img-backdrop" style="background-image: url('../assets/latest/img/img1.jpg')"></div>

Helper classes

In addition to the standard Bootstrap helper classes , Material Admin has several additional options.

Dimensions

Use one of the following dimension classes to quickly define a width, height or width and height for your element. The width and height are incremented with 37.1428px.

	<div class="height-1"></div>  <!-- height: 40px -->
	<div class="height-2"></div>  <!-- height: 80px -->
	<div class="height-3"></div>  <!-- height: 120px -->
	<div class="height-4"></div>  <!-- height: 160px -->
	<div class="height-5"></div>  <!-- height: 200px -->
	<div class="height-6"></div>  <!-- height: 240px -->
	<div class="height-7"></div>  <!-- height: 280px -->
	<div class="height-8"></div>  <!-- height: 320px -->
	<div class="height-9"></div>  <!-- height: 360px -->
	<div class="height-10"></div> <!-- height: 400px -->
	<div class="height-11"></div> <!-- height: 440px -->
	<div class="height-12"></div> <!-- height: 480px -->
	
	<div class="width-1"></div>  <!-- width: 40px -->
	<div class="width-2"></div>  <!-- width: 80px -->
	<div class="width-3"></div>  <!-- width: 120px -->
	<div class="width-4"></div>  <!-- width: 160px -->
	<div class="width-5"></div>  <!-- width: 200px -->
	<div class="width-6"></div>  <!-- width: 240px -->
	<div class="width-7"></div>  <!-- width: 280px -->
	<div class="width-8"></div>  <!-- width: 320px -->
	<div class="width-9"></div>  <!-- width: 360px -->
	<div class="width-10"></div> <!-- width: 400px -->
	<div class="width-11"></div> <!-- width: 440px -->
	<div class="width-12"></div> <!-- width: 480px -->
	
	<div class="size-1"></div>  <!-- width & height: 40px -->
	<div class="size-2"></div>  <!-- width & height: 80px -->
	<div class="size-3"></div>  <!-- width & height: 120px -->
	<div class="size-4"></div>  <!-- width & height: 160px -->
	<div class="size-5"></div>  <!-- width & height: 200px -->
	<div class="size-6"></div>  <!-- width & height: 240px -->
	<div class="size-7"></div>  <!-- width & height: 280px -->
	<div class="size-8"></div>  <!-- width & height: 320px -->
	<div class="size-9"></div>  <!-- width & height: 360px -->
	<div class="size-10"></div> <!-- width & height: 400px -->
	<div class="size-11"></div> <!-- width & height: 440px -->
	<div class="size-12"></div> <!-- width & height: 480px -->

Containment

You can contain the width of an element by setting one of the containment classes. Your element will be centered on screen.
For example, if you use the class .contain-lg on an element, it's max-width will be 1200px. When your screen is smaller than 1200px, it will be 100% wide. These help files also use the class .contain-lg.

	<div class="contain-xs"></div> <!-- max-width: 480px -->
	<div class="contain-sm"></div> <!-- max-width: 769px -->
	<div class="contain-md"></div> <!-- max-width: 992px -->
	<div class="contain-lg"></div> <!-- max-width: 1200px -->

Opacity

Use any of the available opacity classes to change the opacity of an element.

<h2>100% opacity</h2>
<h2 class="opacity-75">75% opacity</h2>
<h2 class="opacity-50">50% opacity</h2>
<h2 class="opacity-25">25% opacity</h2>

Sticking

Sticking an element to a corner is easy with one of the sticking classes. The element that needs to containing these sticking classes, should have a position applied to it. You can use the class .holder to contain the sticking classes.

<div class="holder height-4">
	<a class="btn btn-primary stick-top-left text-default-bright">Stick top left</a>
	<a class="btn btn-primary stick-top-right text-default-bright">Stick top right</a>
	<a class="btn btn-primary stick-bottom-left text-default-bright">Stick bottom left</a>
	<a class="btn btn-primary stick-bottom-right text-default-bright">Stick bottom right</a>
</div>

No margin

To remove the margin of an element, use the class .no-margin.

<div class="no-margin">
	...
</div>

No linebreak

To avoid text from breaking, add the .no-linebreak class.

<!-- .no-linebreak can be usen in every tag. Also in a <td> tag. -->
<td class="no-linebreak">
	$ 132,093,090.98
</td>

Masking

Placing the .mask class on a <div> and restricting it's height, will mask everything inside. To control it's content, place the object to be masked inside a .bottom-layer. This will expand the layer to be as large as the .mask. If you want, you can add a .top-layer. Everything inside the .top-layer will be placed on top inside the .mask.

<div class="mask height-3 text-center">
	<div class="bottom-layer">
		<span class="text-primary-alt text-medium text-xxxxl">MASKED TEXT</span>
	</div>
	<div class="top-layer">
		<br/>
		<span class="text-xxxl text-default-dark">Text overlay</span>
	</div>
</div>

Overlay

If you want to add a text on top of something, you can use the .overlay class. It has 4 variants: .overlay-default, .overlay-primary, .overlay-shade-top and .overlay-shade-bottom.

Example

Overlay text

Overlay text

Overlay text

Overlay text

<div class="holder">
	<div class="overlay">
		<strong class="text-default-bright">Overlay text</strong>
	</div>
	<img class="img-responsive" src="#"/>
</div>
<div class="holder">
	<div class="overlay overlay-default">
		<strong class="text-default-bright">Overlay text</strong>
	</div>
	<img class="img-responsive" src="#"/>
</div>
<div class="holder">
	<div class="overlay overlay-primary">
		<strong class="text-default-bright">Overlay text</strong>
	</div>
	<img class="img-responsive" src="#"/>
</div>
<div class="holder">
	<div class="overlay overlay-shade-top">
		<strong class="text-default-bright">Overlay text</strong>
	</div>
	<img class="img-responsive" src="#"/>
</div>

Borders

Adding a border is as easy as adding the class .border-black, .border-gray or .border-white.
If you want to hide a border, add the class .border-transparent.

<div class="height-3 border-transparent"></div>
<div class="height-3 border-white"></div>
<div class="height-3 border-gray"></div>
<div class="height-3 border-black"></div>

The standard thickness of a border is 1px. You can vary the thickness of the border with the following classes:

• .border-lg : 2px
• .border-xl : 3px
• .border-xxl : 5px

<div class="height-3 border-black"></div>
<div class="height-3 border-black border-lg"></div>
<div class="height-3 border-black border-xl"></div>
<div class="height-3 border-black border-xxl"></div>