<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 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>
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).
.style-*
class has a slightly darker color when it's placed inside the .card-head
.
.card-body-darken
to get a darker style for the .card-body
as well.
<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>
Want your header underlined? Simply add .card-underline
.
<div class="card card-underline"> ... </div>
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>
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>
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>
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>
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>
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>
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>
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>
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>
In addition to the standard Bootstrap typography , Material Admin has several additional options.
materialadmin/assets/less/materialadmin/typography.less
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>
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>
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>
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>
Add .text-shadow
to create a text shadow.
<span class="text-xxxxl text-default-bright text-shadow">Shaded text</span>
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 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.
Fusce convallis, mauris imperdiet gravida bibendum, nisl turpis suscipit mauris, sed placerat ipsum urna sed risus. In convallis tellus a mauris. Curabitur non elit ut libero tristique sodales. Mauris a lacus.
Donec mattis semper leo. In hac habitasse platea dictumst. Vivamus facilisis diam at odio. Mauris dictum, nisi eget consequat elementum, lacus ligula molestie metus, non feugiat orci magna ac sem. Donec turpis. Donec vitae metus. Morbi tristique neque eu mauris. Quisque gravida ipsum non sapien. Proin turpis lacus
scelerisque vitae, elementum at, lobortis ac, quam. Aliquam dictum eleifend risus. In hac habitasse platea dictumst. Etiam sit amet diam. Suspendisse odio. Suspendisse nunc. In semper bibendum libero.
Fusce convallis, mauris imperdiet gravida bibendum, nisl turpis suscipit mauris, sed placerat ipsum urna sed risus. In convallis tellus a mauris. Curabitur non elit ut libero tristique sodales. Mauris a lacus.
Donec mattis semper leo. In hac habitasse platea dictumst. Vivamus facilisis diam at odio. Mauris dictum, nisi eget consequat elementum, lacus ligula molestie metus, non feugiat orci magna ac sem. Donec turpis. Donec vitae metus. Morbi tristique neque eu mauris. Quisque gravida ipsum non sapien. Proin turpis lacus
scelerisque vitae, elementum at, lobortis ac, quam. Aliquam dictum eleifend risus. In hac habitasse platea dictumst. Etiam sit amet diam. Suspendisse odio. Suspendisse nunc. In semper bibendum libero.
Fusce convallis, mauris imperdiet gravida bibendum, nisl turpis suscipit mauris, sed placerat ipsum urna sed risus. In convallis tellus a mauris. Curabitur non elit ut libero tristique sodales. Mauris a lacus.
Donec mattis semper leo. In hac habitasse platea dictumst. Vivamus facilisis diam at odio. Mauris dictum, nisi eget consequat elementum, lacus ligula molestie metus, non feugiat orci magna ac sem. Donec turpis. Donec vitae metus. Morbi tristique neque eu mauris. Quisque gravida ipsum non sapien. Proin turpis lacus
scelerisque vitae, elementum at, lobortis ac, quam. Aliquam dictum eleifend risus. In hac habitasse platea dictumst. Etiam sit amet diam. Suspendisse odio. Suspendisse nunc. In semper bibendum libero.
<div class="text-columns-2"> <p>...</p> </div> <div class="text-columns-3"> <p>...</p> </div> <div class="text-columns-4"> <p>...</p> </div>
In addition to the standard Bootstrap tables , Material Admin has several additional options.
materialadmin/assets/less/materialadmin/tables.less
Use .table-banded
to add banded-striping to any table column within the <tbody>
.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<table class="table table-banded"> ... </table>
Use the .btn-xs
in a .table
row to create a button within the boundaries of the row height.
# | First Name | Last Name | |
---|---|---|---|
1 | Mark | Otto | |
2 | Jacob | Thornton | |
3 | Larry | the Bird |
<td> <button type="button" class="btn btn-xs btn-default">Edit</button> </td>
In addition to the standard Bootstrap forms , Material Admin has several additional options.
materialadmin/assets/less/materialadmin/forms.less
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
to your <form>
element.
<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>
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.
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>
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>
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>
In addition to the standard Bootstrap buttons , Material Admin has several additional options.
materialadmin/assets/less/materialadmin/buttons.less
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>
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>
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>
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"> Button <span class="label label-warning">12</span> </a>
In addition to the standard Bootstrap images , Material Admin has several additional options.
materialadmin/assets/less/materialadmin/scaffolding.less
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.
.img-backdrop
only works in browsers that support css3.
<div class="img-backdrop" style="background-image: url('../assets/img/img1.jpg')"></div>
In addition to the standard Bootstrap helper classes , Material Admin has several additional options.
materialadmin/assets/less/materialadmin/utilities.less
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 -->
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 -->
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 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.
position
property of your containing element can be anything except static
.
The sticking classes will not recognize this property and will search for it's next containment class.
<div class="holder height-4"> <a class="btn btn-primary stick-top-left">Stick top left</a> <a class="btn btn-primary stick-top-right">Stick top right</a> <a class="btn btn-primary stick-bottom-left">Stick bottom left</a> <a class="btn btn-primary stick-bottom-right">Stick bottom right</a> </div>
To remove the margin of an element, use the class .no-margin
.
<div class="no-margin"> ... </div>
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>
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>
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
.
.holder
class to achieve this.
<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>
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>