Components

Over a dozen reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more.

Menubar

Additional styles and behavior for this component are located in the following files
Component styles
materialadmin/assets/less/materialadmin/menubar.less
 
 
Component variables
materialadmin/assets/less/shared/variables.less
@menubar-bg:
@menubar-color:
@menubar-folder-color:
@menubar-font-size:
@menubar-gap:
@menubar-link-hover:
@menubar-link-hover-color:
@menubar-link-active:
@menubar-link-active-color:
@menubar-icon-width:
@menubar-icon-bg:
@menubar-icon-bg-active:
@menubar-icon-bg-hover:
@menubar-icon-color:
@menubar-icon-color-active:
@menubar-icon-border:
@menubar-width:
@menubar-width-collapsed:
@menubar-collapse-speed:
@menubar-collapse-ease:

// Menubar tree variables
@menubar-tree-border-color:
@menubar-tree-width:
@menubar-tree-indent:
@menubar-tree-indent-level1:
@menubar-tree-indent-level2:
@menubar-tree-indent-level3:
@menubar-tree-indent-level4:
@menubar-tree-indent-level5:

Add .menubar-pin to #base to expand the menubar. 

<div id="base" class="menubar-pin">
	...
</div>

If you add .menubar-hoverable to #base, the menubar opens on hover. Without this class, you have to click on a menubar item to open it. 

<div id="base" class="menubar-hoverable">
	...
</div>

Off-canvas

Additional styles and behavior for this component are located in the following files
Component styles
materialadmin/assets/less/materialadmin/offcanvas.less
 
 
Component variables
materialadmin/assets/less/shared/variables.less
@offcanvas-width:
@offcanvas-bg:
@offcanvas-color:
@offcanvas-animation-speed:
@offcanvas-animation-ease:
@offcanvaspane-animation-speed:
@offcanvaspane-animation-ease:

Basics

To add a new off-canvas, you have to add an .offcanvas-pane tag to the .offcanvas.
You have to give an .offcanvas-pane class a fixed width. You can do this by using one of the .width-* classes or by setting the width in a style attribute. 

<div class="offcanvas">
	<div class="offcanvas-pane width-6" id="offcanvas1">
		~ Offcanvas content ~

	</div>
	<div class="offcanvas-pane width-6" id="offcanvas2">
		~ Offcanvas content ~
	</div>
</div>

Elements

You can add any content you want in the .offcanvas-pane. If you want to use the basic padding, you can use the .offcanvas-head and offcanvas-body. To close an off-canvas, add a button in the off-canvas with a data-dismiss="offcanvas" attribute. 

<div class="offcanvas-pane" id="offcanvas-chat">
	<div class="offcanvas-head">
		<header>Off-canvas title</header>
		<div class="offcanvas-tools">
			<a class="btn btn-icon-toggle pull-right" data-dismiss="offcanvas">
				<i class="md md-close"></i>
			</a>
		</div>
	</div>
	<div class="offcanvas-body">
		~ Offcanvas body content ~
	</div>
</div>

Controls

To open an off-canvas, you need to give an off-canvas an id. You can then add this id in the href of an anchor. Then you need to add a data-toggle="offcanvas" attribute. 

<a href="#offcanvas-id" data-toggle="offcanvas">Open off-canvas</a>

Backdrop

When you open an off-canvas, a backdrop will be added on top of the content. The backdrop is partially transparent. When you click on the backdrop, the opened off-canvas will be closed.
You can disable the backdrop by setting the data attribute data-backdrop="false" on the link. 

<a href="#offcanvas-id" data-toggle="offcanvas" data-backdrop="false">Open off-canvas without backdrop</a>

Colors

Every color that is available for a card, is also available for an off-canvas.

Icons

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

Additional styles and behavior for this component are located in the following files
Component styles
materialadmin/assets/less/materialadmin/icons.less

Icons rotation

To rotate an icon you can use one of the following classes.

Example
            
<i class="fa fa-bell icon-tilt-alt"></i> <!-- 10 degrees -->
<i class="fa fa-bell"></i>
<i class="fa fa-bell icon-tilt"></i> <!-- 350 degrees -->

Dropdowns

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

Additional styles and behavior for this component are located in the following files
Component styles
materialadmin/assets/less/materialadmin/dropdowns.less

You can add animation to your dropdowns by adding .animation-expand, .animation-zoom, .animation-slide or .animation-dock. If you put these classes on a menu that 'drops up', it will adjust the animation.

Example
<ul class="dropdown-menu animation-expand">
	...
</ul>
<ul class="dropdown-menu animation-slide">
	...
</ul>
<ul class="dropdown-menu animation-zoom">
	...
</ul>
<ul class="dropdown-menu animation-dock">
	...
</ul>

To create a progressbar in your menu, add .dropdown-progress to the <li> element. Add text in the .dropdown-label and put your .progress bar beneath.

Example














<li class="dropdown-progress">
	<a href="#">
		<div class="dropdown-label">Label</div>
		<div class="progress"><div class="progress-bar progress-bar-success" style="width: 30%"></div></div>
	</a>
</li>

Buttons

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

Additional styles and behavior for this component are located in the following files
Component styles
materialadmin/assets/less/materialadmin/buttons.less

Styling Checkboxes

To style a checkbox, you can use the default code from bootstrap by adding a .checkbox around your label. Then add the class .checkbox-styled to the .checkbox class and you have a styled checkbox. You can give it several styles.

Example
<div class="checkbox checkbox-styled">
	<label>
		<input type="checkbox" checked>
		<span>Checkbox 1</span>
	</label>
</div>
<div class="checkbox checkbox-styled checkbox-danger">
	<label>
		<input type="checkbox">
		<span>Checkbox 2</span>
	</label>
</div>

Checkbox colors

There are several colors for you to choose from.

Example









<label class="checkbox-inline checkbox-styled checkbox-primary-dark">...</label>
<label class="checkbox-inline checkbox-styled">...</label>
<label class="checkbox-inline checkbox-styled checkbox-primary-light">...</label>
<label class="checkbox-inline checkbox-styled checkbox-primary-bright">...</label>

<label class="checkbox-inline checkbox-styled checkbox-default-dark">...</label>
<label class="checkbox-inline checkbox-styled checkbox-default">...</label>
<label class="checkbox-inline checkbox-styled checkbox-default-light">...</label>
<label class="checkbox-inline checkbox-styled checkbox-default-bright">...</label>

<label class="checkbox-inline checkbox-styled checkbox-success">...</label>
<label class="checkbox-inline checkbox-styled checkbox-warning">...</label>
<label class="checkbox-inline checkbox-styled checkbox-danger">...</label>
<label class="checkbox-inline checkbox-styled checkbox-info">...</label>

Styling Radio buttons

To style a radio button, you can use the default code from bootstrap by adding a .radio around your label. Then add the class .radio-styled to the .radio class and you have a styled radio button.

Example
<div class="radio radio-styled">
	<label>
		<input type="radio" checked="checked">
		<span>Radio button 1</span>
	</label>
</div>
<div class="radio radio-styled radio-danger">
	<label>
		<input type="radio">
		<span>Radio button 2</span>
	</label>
</div>

Radio button colors

There are several colors for you to choose from.

Example









<label class="radio-inline radio-styled radio-primary-dark">...</label>
<label class="radio-inline radio-styled">...</label>
<label class="radio-inline radio-styled radio-primary-light">...</label>
<label class="radio-inline radio-styled radio-primary-bright">...</label>

<label class="radio-inline radio-styled radio-default-dark">...</label>
<label class="radio-inline radio-styled radio-default">...</label>
<label class="radio-inline radio-styled radio-default-light">...</label>
<label class="radio-inline radio-styled radio-default-bright">...</label>

<label class="radio-inline radio-styled radio-success">...</label>
<label class="radio-inline radio-styled radio-warning">...</label>
<label class="radio-inline radio-styled radio-danger">...</label>
<label class="radio-inline radio-styled radio-info">...</label>

Badges

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

Additional styles and behavior for this component are located in the following files
Component styles
materialadmin/assets/less/materialadmin/badges.less

Badge colors

Use any of the available badge classes to color a .badge.

Example

Badge Primary dark

Badge Primary

Badge Primary light

Badge Primary bright

Badge Default dark

Badge Default

Badge Default light

Badge Default bright

Badge Success

Badge Warning

Badge Danger

Badge Info

<a href="#">Badge <span class="badge">Default</span></a>
<a href="#">Badge <span class="badge badge-black">black</span></a>
<a href="#">Badge <span class="badge badge-white">white</span></a>
<a href="#">Badge <span class="badge badge-gray">gray</span></a>
<a href="#">Badge <span class="badge badge-inverse">inverse</span></a>

<a href="#">Badge <span class="badge badge-primary">primary</span></a>
<a href="#">Badge <span class="badge badge-success">success</span></a>
<a href="#">Badge <span class="badge badge-warning">warning</span></a>
<a href="#">Badge <span class="badge badge-danger">danger</span></a>
<a href="#">Badge <span class="badge badge-info">info</span></a>

<a href="#">Badge <span class="badge badge-support1">support1</span></a>
<a href="#">Badge <span class="badge badge-support2">support2</span></a>
<a href="#">Badge <span class="badge badge-support3">support3</span></a>
<a href="#">Badge <span class="badge badge-support4">support4</span></a>
<a href="#">Badge <span class="badge badge-support5">support5</span></a>

Badge positioning

Use <sup> instead of <span> to position the badge above the baseline. Use <sub> instead of <span> to position the badge below the baseline.

Example

sup Badge     Badge sup

 

sub Badge     Badge sub 

<a href="#" class=""><sup class="badge badge-support2">sup</sup> Badge</a>
<a href="#" class="">Badge <sup class="badge badge-support2">sup</sup></a>
<a href="#" class=""><sub class="badge badge-support2">sub</sub> Badge</a>
<a href="#" class="">Badge <sub class="badge badge-support2">sub</sub></a>

Lists

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

Additional styles and behavior for this component are located in the following files
Component styles
materialadmin/assets/less/materialadmin/list-group.less

Comments list

Basics

The comments list is basically a .card element wrapped in an <ul> list with the class .list-comments.

Because the comments are wrapped inside a .card, you can use any .style-* class to color your comments.

Comments have additional classes to create different elements for the comment.
First, there's the .comment-avatar class to contain the avatar. The avatar will be placed in front of the text. The avatar can be any icon or image you like.
Second, there's the .comment-title class which has some modifications to the margins.

Example

  • Comment title 20/06/2013 at 4:02 pm

    Reply

    Etiam dui libero, tempor quis congue in, interdum eget tortor. Vivamus aliquam dictum lacus quis tincidunt. Phasellus rhoncus ante sollicitudin nisl consectetur ultricies. Sed rhoncus ullamcorper mauris, ac condimentum metus egestas ut. Nam et urna ante, vitae pretium lacus.

  • Comment title 20/06/2013 at 4:38 pm

    Reply

    Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer ac magna lacinia velit bibendum ornare. Morbi eget dui lectus, eget eleifend mi.

<ul class="list-comments">
	<li>
		<div class="card style-default-light">
			<div class="comment-avatar"><i class="glyphicon glyphicon-user opacity-50"></i></div>
			<div class="card-body">
				<h4 class="comment-title">Comment title <small>20/06/2013 at 4:02 pm</small></h4>
				<a class="btn btn-primary-light stick-top-right" href="#">Reply</a>
				<p>...</p>
			</div>
		</div>
	</li>
	<li>
		<div class="card style-default-dark">
			<div class="comment-avatar"><img class="img-circle" src="..." alt="" /></div>
			<div class="card-body">
				<h4 class="comment-title">Comment title <small>20/06/2013 at 4:38 pm</small></h4>
				<a class="btn btn-primary-light stick-top-right" href="#">Reply</a>
				<p>...</p>
			</div>
		</div>
	</li>
</ul>

Replies

You can add a reply style by putting another <ul> list inside a <li> tag. This will add a vertical stripe which indicates it's a reply. You can nest as many as you want.

Example

  • Carol Sharp 20/06/2013 at 4:14 pm

    Reply

    Integer ac magna lacinia velit bibendum ornare. Morbi eget dui lectus, eget eleifend mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

    • Amber Page 20/06/2013 at 4:41 pm

      Reply

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in tempus lorem. Vivamus ullamcorper leo risus, non vehicula odio.

<ul class="list-comments">
	<li>
		<div class="card style-default-light">...</div>
		<ul>
			<li>
				<div class="card style-default-light">...</div>
			</li>
		</ul>
	</li>
</ul>

Tags list

The .list-tags class is a very simple class. It creates an even gap horizontal and vertical between the buttons. This way it looks good when there are a lot of buttons.

Example
Wordpress Technology HTML5 Illustrator
Music CSS3 Video Photoshop jQuery 
<div class="list-tags">
	<a class="btn btn-xs btn-primary">Wordpress</a> 
	<a class="btn btn-xs btn-primary">Technology</a> 
	<a class="btn btn-xs btn-primary">HTML5</a> 
	<a class="btn btn-xs btn-primary">Illustrator</a>
	<br/>
	<a class="btn btn-xs btn-primary">Music</a> 
	<a class="btn btn-xs btn-primary">CSS3</a> 
	<a class="btn btn-xs btn-primary">Video</a> 
	<a class="btn btn-xs btn-primary">Photoshop</a> 
	<a class="btn btn-xs btn-primary">jQuery</a> 
</div>

Chat list

To create a chat list, add an <ul> list with the class .list-chats. In every <li> you can create a message by adding a <div> with the class .chat.
Add the class .chat-left to a <li> element to left align the chat. A .chat message consists of two parts:

  1. .chat-avatar: this will contain the <img> tag
  2. .chat-body: the message
Example
  • Yes, it is indeed very beautiful. 10:03 pm
  • Did you see the changes? 10:02 pm 
<ul class="list-chats">
	<li>
		<div class="chat">
			<div class="chat-avatar"><img class="img-circle" src="../assets/latest/img/avatar1.jpg?1403934956" alt="" /></div>
			<div class="chat-body">
				Yes, it is indeed very beautiful.
				<small>10:03 pm</small>
			</div>
		</div>
	</li>
	<li class="chat-left">
		<div class="chat">
			<div class="chat-avatar"><img class="img-circle" src="../assets/latest/img/avatar9.jpg?1404026744" alt="" /></div>
			<div class="chat-body">
				Did you see the changes?
				<small>10:02 pm</small>
			</div>
		</div>
	</li>
	..
</ul>

Tabs

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

Additional styles and behavior for this component are located in the following files
Component styles
materialadmin/assets/less/materialadmin/tabbar.less

General structure

Place the .nav-tabs in the .card-head. Add .tab-content to the .card-body, then place the .tab-pane inside the .card-body.

Example
1 ...
2 ...
3 ...
<div class="card">
	<div class="card-head">
		<ul class="nav nav-tabs" data-toggle="tabs">
			<li class="active"><a href="#home">Home</a></li>
			<li><a href="#about">About</a></li>
			<li><a href="#contact">Contact</a></li>
		</ul>
	</div>
	<div class="card-body tab-content">
		<div class="tab-pane active" id="home">1 ...</div>
		<div class="tab-pane" id="about">2 ...</div>
		<div class="tab-pane" id="contact">3 ...</div>
	</div>
</div>

Tab pull right

If you add .pull-right to your .nav-tabs, you have room to add a <header>.

Example

Header

1 ...
2 ...
3 ...
<div class="card card-underline">
	<div class="card-head">
		<header>
			<h4 class="text-light">Header</h4>
		</header>
		<ul class="nav nav-tabs pull-right" data-toggle="tabs">
			...
		</ul>
	</div>
	...
</div>

Tab pull left

If you add .pull-left to your .nav-tabs, you have room to add .tools to the header.

Example
1 ...
2 ...
3 ...
<div class="card card-underline">
	<div class="card-head">
		<ul class="nav nav-tabs pull-left" data-toggle="tabs">
			...
		</ul>
		<div class="tools">
			...
		</div>
	</div>
	...
</div>

Tab center

If you add .tabs-center to your .nav-tabs, your tabs will be centered in the header.

Example
1 ...
2 ...
3 ...
<div class="card card-underline">
	<div class="card-head">
		<ul class="nav nav-tabs tabs-center" data-toggle="tabs">
			...
		</ul>
		<div class="tools">
			...
		</div>
	</div>
	...
</div>

Tab positioning

If you want to position the tabs left, right or below your content, you have to add the <ul> tag directly to your .card. Then add .tabs-left, .tabs-right or .tabs-below to the .card class to position the tabs relative to their content.

If you use .tabs-below, place your <ul> below the main content.
Example

Daniel Johnson

Ad ius duis dissentiunt, an sit harum primis persecuti, adipisci tacimates mediocrem sit et. Id illud voluptaria omittantur qui, te affert nostro mel. Cu conceptam vituperata temporibus has.

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Daniel Johnson

Per at postea mediocritatem, vim numquam aliquid eu, in nam sale gubergren. Fuisset delicatissimi duo, qui ut animal noluisse erroribus. Ea eum veniam audire. Dicant vituperata consequuntur.

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Duo semper accumsan ea, quidam convenire cum cu, oportere maiestatis incorrupte est eu. Soluta audiam timeam ius te, idque gubergren forensibus ad mel, persius urbanitas usu id. Civibus nostrum fabellas mea te, ne pri lucilius iudicabit. Ut cibo semper vituperatoribus vix, cum in error elitr. Vix molestiae intellegat omittantur an, nam cu modo ullum scriptorem.

Quod option numquam vel in, et fuisset delicatissimi duo, qui ut animal noluisse erroribus. Ea eum veniam audire. Per at postea mediocritatem, vim numquam aliquid eu, in nam sale gubergren. Dicant vituperata consequuntur at sea, mazim commodo

<div class="card tabs-left">
	<ul class="card-head nav nav-tabs" data-toggle="tabs">
		...
	</ul>
	<div class="card-body tab-content">
		<div class="tab-pane active" id="home">...</div>
		<div class="tab-pane" id="about">...</div>
		<div class="tab-pane" id="contact">...</div>
	</div>
</div><!--end .card -->

Tab colors

Use any of the available tab classes to create a colored tabbar.

Example









<ul class="nav nav-tabs tabs-primary-dark" data-toggle="tabs">...</ul>
<ul class="nav nav-tabs tabs-primary" data-toggle="tabs">...</ul>
<ul class="nav nav-tabs tabs-primary-light" data-toggle="tabs">...</ul>
<ul class="nav nav-tabs tabs-primary-bright" data-toggle="tabs">...</ul>

<ul class="nav nav-tabs tabs-default-dark" data-toggle="tabs">...</ul>
<ul class="nav nav-tabs tabs-default" data-toggle="tabs">...</ul>
<ul class="nav nav-tabs tabs-default-light" data-toggle="tabs">...</ul>
<ul class="nav nav-tabs tabs-default-bright" data-toggle="tabs">...</ul>

<ul class="nav nav-tabs tabs-success" data-toggle="tabs">...</ul>
<ul class="nav nav-tabs tabs-warning" data-toggle="tabs">...</ul>
<ul class="nav nav-tabs tabs-danger" data-toggle="tabs">...</ul>
<ul class="nav nav-tabs tabs-info" data-toggle="tabs">...</ul>

Text contrast

If you use a dark background for your tabs, you can use .tabs-text-contrast. This will contrast the text to your background.
So if you have a black background, your tab text will be white. If the background is white, the text will be black.

Example
1 ...
2 ...
3 ...
<div class="card card-underline">
	<div class="card-head">
		<ul class="nav nav-tabs tabs-text-contrast" data-toggle="tabs">
			...
		</ul>
		<div class="tools">
			...
		</div>
	</div>
	...
</div>

Timeline

Additional styles and behavior for this component are located in the following files
Component styles
materialadmin/assets/less/materialadmin/timeline.less

Basic example

To create a basic timeline, follow the following steps.

  1. Create a standard <ul> list and give it a .timeline class.
  2. Every odd or even <li> tag should get the class .timeline-inverted.
  3. Add a sphere inside a <li> by adding a .timeline-circ to a <div> tag.
  4. Then add the class .timeline-entry to a <div> tag which will contain your text.
  5. Inside the .timeline-entry you can add a standard .card layout.
Example
  • Head text
    Subline
  • Head text
    Subline 
<ul class="timeline">
	<li class="timeline-inverted">
		<div class="timeline-circ"></div>
		<div class="timeline-entry">
			<div class="card style-primary">
				<div class="card-body small-padding">
					..
				</div>
			</div>
		</div>
	</li>
	<li>
		<div class="timeline-circ"></div>
		<div class="timeline-entry">
			<div class="card style-primary">
				<div class="card-body small-padding">
					..
				</div>
			</div>
		</div>
	</li>
	...
</ul>

Colors

The .timeline-circ can be styled with several colors.

Example
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
<div class="timeline-circ style-primary-dark"></div>
<div class="timeline-circ style-primary"></div>
<div class="timeline-circ style-primary-light"></div>
<div class="timeline-circ style-primary-bright"></div>

<div class="timeline-circ style-default-dark"></div>
<div class="timeline-circ style-default"></div>
<div class="timeline-circ style-default-light"></div>
<div class="timeline-circ style-default-bright"></div>

<div class="timeline-circ style-success"></div>
<div class="timeline-circ style-warning"></div>
<div class="timeline-circ style-danger"></div>
<div class="timeline-circ style-info"></div>
You can use all the available .card styling colors in the timeline.

Size

The .timeline-circ has several sizes to choose from.

Example
  • Head text
    Subline
  • Head text
    Subline
  • Head text
    Subline 
<div class="timeline-circ"></div>
<div class="timeline-circ circ-lg"></div>
<div class="timeline-circ circ-xl"></div>

Icons

You can easily add an icon in a .timeline-circ.

Example
  • Head text
    Subline
  • Head text
    Subline 
<div class="timeline-circ circ-lg"><span class="glyphicon glyphicon-leaf"></span></div>
<div class="timeline-circ circ-xl"><span class="glyphicon glyphicon-leaf"></span></div>

Hairline

If you want the timeline to be thinner, you can add the class .timeline-hairline to <ul> tag.

Example
  • Head text
    Subline
  • Head text
    Subline 
<ul class="timeline timeline-hairline">
	..
</ul>

Shadows

Shadows can be turned off by adding .no-shadow or .no-card-shadow to the <ul> tag.

Example
  • Head text
    Subline
  • Head text
    Subline

By default all shadows are visible.

  • Head text
    Subline
  • Head text
    Subline

.no-card-shadow Hide the card shadows.

  • Head text
    Subline
  • Head text
    Subline

.no-shadow Hide the card and circ shadows. 

<ul class="timeline">..</ul>
<ul class="timeline no-card-shadow">..</ul>
<ul class="timeline no-shadow">..</ul>

Responsive

Material Admin has a responsive timeline. To add responsiveness to your timeline, you can add one of the folowing classes: .collapse-xs, .collapse-sm, .collapse-md or .collapse-lg.

Example
  • Head text
    Subline
  • Head text
    Subline

.collapse-xs Only collapse on the extra small devices.

  • Head text
    Subline
  • Head text
    Subline

.collapse-sm Collapse on the small and extra small devices.

  • Head text
    Subline
  • Head text
    Subline

.collapse-md Collapse on the medium devices and smaller.

  • Head text
    Subline
  • Head text
    Subline

.collapse-lg Collapse on all devices. 

<ul class="timeline collapse-xs">..</ul>
<ul class="timeline collapse-sm">..</ul>
<ul class="timeline collapse-md">..</ul>
<ul class="timeline collapse-lg">..</ul>