the colours
for fast background styling
black
black lighten-10
black lighten-20
black lighten-30
black lighten-40
white darken-40
white darken-30
white darken-20
white darken-10
white
grey darken-40
grey darken-30
grey darken-20
grey darken-10
grey
grey lighten-10
grey lighten-20
grey lighten-30
grey lighten-40
maroon darken-30
maroon darken-20
maroon darken-10
maroon
maroon lighten-10
maroon lighten-20
maroon lighten-30
maroon lighten-40
red darken-40
red darken-30
red darken-20
red darken-10
red
red lighten-10
red lighten-20
red lighten-30
red lighten-40
pink darken-40
pink darken-30
pink darken-20
pink darken-10
pink
pink lighten-10
pink lighten-20
orange darken-40
orange darken-30
orange darken-20
orange darken-10
orange
orange lighten-10
orange lighten-20
orange lighten-30
orange lighten-40
yellow darken-40
yellow darken-30
yellow darken-20
yellow darken-10
yellow
yellow lighten-10
yellow lighten-20
yellow lighten-30
yellow lighten-40
olive darken-30
olive darken-20
olive darken-10
olive
olive lighten-10
olive lighten-20
olive lighten-30
olive lighten-40
lime darken-40
lime darken-30
lime darken-20
lime darken-10
lime
lime lighten-10
lime lighten-20
lime lighten-30
lime lighten-40
green darken-30
green darken-20
green darken-10
green
green lighten-10
green lighten-20
green lighten-30
green lighten-40
aqua darken-40
aqua darken-30
aqua darken-20
aqua darken-10
aqua
aqua lighten-10
aqua lighten-20
aqua lighten-30
aqua lighten-40
teal darken-30
teal darken-20
teal darken-10
teal
teal lighten-10
teal lighten-20
teal lighten-30
teal lighten-40
blue darken-40
blue darken-30
blue darken-20
blue darken-10
blue
blue lighten-10
blue lighten-20
blue lighten-30
blue lighten-40
navy darken-30
navy darken-20
navy darken-10
navy
navy lighten-10
navy lighten-20
navy lighten-30
navy lighten-40
fuchsia darken-40
fuchsia darken-30
fuchsia darken-20
fuchsia darken-10
fuchsia
fuchsia lighten-10
fuchsia lighten-20
fuchsia lighten-30
fuchsia lighten-40
purple darken-30
purple darken-20
purple darken-10
purple
purple lighten-10
purple lighten-20
purple lighten-30
purple lighten-40
<div class="blue lighten-40"> blue lighten-40 </div>
In addition to the colours classes, you can also use other already defined background colours classes like: .theme-1, .theme-2, .primary, .success, .warning, .danger, .default
For color property, you can use already defined classes like: .text-white, .text-grey, .text-black, .text-red
the fonts
easy as a class attribute
Roboto
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus at, atque consectetur distinctio error ipsum itaque magnam mollitia natus numquam quasi quo, ullam veritatis, voluptatem. Architecto aspernatur maxime quasi.
Roboto Condensed
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid consectetur cum, dolore eius error est et fuga illum modi molestiae natus, neque nisi placeat possimus praesentium repellat sequi vero voluptatum.
Lato
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium adipisci alias at distinctio, fuga, fugit maiores maxime nemo quae quisquam quod rem soluta totam. Aliquam eos fugiat maxime quam quo!
Open Sans
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, beatae commodi consequatur dignissimos dolor dolore ducimus excepturi ipsa iure iusto laborum maiores modi nulla officia quasi qui suscipit voluptas voluptatum.
Open Sans Condensed
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aspernatur assumenda at autem consectetur, distinctio hic id ipsa necessitatibus possimus quas quia reiciendis temporibus unde ut velit veritatis voluptatem. Quis?
Raleway
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus nisi omnis quaerat quasi quibusdam quod repellendus rerum tenetur? Blanditiis culpa dignissimos est ipsum laudantium magni repellat reprehenderit temporibus unde. Sit!
Libre Barcode
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aspernatur, atque aut autem dolorem, fugiat impedit, in ipsam iste modi nesciunt nisi obcaecati provident quas quo repellendus totam voluptate voluptatem.
Merriweater
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut deleniti laboriosam minus soluta. Cupiditate eaque eligendi excepturi exercitationem ipsa minus natus possimus quidem quo voluptatibus. Animi itaque omnis repellat reprehenderit!
Indie Flower
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aut culpa doloremque, ea exercitationem facere incidunt perspiciatis porro quo reiciendis repudiandae, velit? Dolorem eos, exercitationem nostrum quod rerum saepe velit.
<p class="font-roboto"> ... </p>
<p class="font-roboto-condensed"> ... </p>
<p class="font-lato"> ... </p>
<p class="font-open-sans"> ... </p>
<p class="font-open-sans-condensed">... </p>
<p class="font-raleway"> ... </p>
<p class="font-libre-barcode"> ... </p>
<p class="font-merriweather"> ... </p>
<p class="font-indie-flower"> ... </p>
the icons
all the Font Awesome1 icons
1 Font Awesome by Dave Gandy - http://fontawesome.io
classic icons
all icons
<p>
<i class="fa fa-user-secret"></i>
<i class="fa fa-calendar"></i>
<i class="fa fa-edit"></i>
<i class="fa fa-arrow-circle-left"></i>
<i class="fa fa-check-square"></i>
<i class="fa fa-map-marker"></i>
</p>
differents sizes
<p>
<i class="fa fa-bar-chart-o fa-1x"></i>
<i class="fa fa-bar-chart-o fa-lg"></i>
<i class="fa fa-bar-chart-o fa-2x"></i>
<i class="fa fa-bar-chart-o fa-3x"></i>
<i class="fa fa-bar-chart-o fa-4x"></i>
<i class="fa fa-bar-chart-o fa-5x"></i>
</p>
animated icons
<p>
<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
<i class="fa fa-spinner fa-pulse"></i>
</p>
labels and badges
the labels
Exemple of a H1 title with a default label
Exemple of a H2 title with a primary label
Exemple of a H3 title with a success label
Exemple of a H4 title with a warning label
Exemple of a H5 title with a danger label
<h1>Exemple of a H1 title with a <span class="label-default">default label</span></h1>
<h2>Exemple of a H2 title with a <span class="label-primary">primary label</span></h2>
<h3>Exemple of a H3 title with a <span class="label-success">success label</span></h3>
<h4>Exemple of a H4 title with a <span class="label-warning">warning label</span></h4>
<h5>Exemple of a H5 title with a <span class="label-danger">danger label</span></h5>
the badges
<h1>new posts <span class="badge">52</span></h1>
<h1>new comments <span class="badge">138</span></h1>
<a href="#!" class="btn-primary">new buttons <span class="badge">9</span></a>
the buttons
that you can disable
classic buttons
<a href="" class="btn-default"> ... </a>
<a href="" class="btn-primary"> ... </a>
<a href="" class="btn-success"> ... </a>
<a href="" class="btn-warning"> ... </a>
<a href="" class="btn-danger"> ... </a>
differents sizes
<a href="" class="btn-success btn-sm"> ... </a>
<a href="" class="btn-primary"> ... </a>
<a href="" class="btn-danger btn-lg"> ... </a>
readonly buttons
<a href="" class="btn-primary disabled"> ... </a>
<a href="" class="btn-default" readonly> ... </a>
the forms
that you can display inline
classic inputs
<form action="#!" method="post" class="row-g">
<label for="name" class="col m6 text-right">name</label>
<input id="name" type="text" class="col m6 warning"/>
<label for="firstname" class="col m6 text-right">firstname</label>
<input id="firstname" type="text" class="col m6 error"/>
<label for="password" class="col m6 required text-right">password</label>
<div class="col m6 input-group input-password">
<input id="password" type="password" required disabled value="osefjoseph"/>
<span class="addon primary"><i class="fa fa-eye"></i></span>
</div>
<label for="email" class="col m6 text-right">email</label>
<div class="col m6 input-group-left">
<input id="email" type="email"/>
<span class="addon"><i class="fa fa-envelope-open-o"></i></span>
</div>
<label for="email2" class="col m6 text-right">email verification</label>
<div class="col m6 input-group-double">
<span class="addon"><i class="fa fa-at"></i></span>
<input id="email2" type="email"/>
<span class="addon primary"><i class="fa fa-envelope-open-o"></i></span>
</div>
<div class="col m6 text-right">
<label for="male">gender</label>
</div>
<div class="col s3 text-center">
<input type="radio" name="gender" id="male" checked/>
<label for="male">male</label>
</div>
<div class="col s3 text-center">
<input type="radio" name="gender" id="female"/>
<label for="female">female</label>
</div>
<label for="address" class="col m6 text-right">address</label>
<textarea id="address" class="col m6"></textarea>
<label for="country" class="col m6 text-right">country</label>
<div class="col m6 input-group-double">
<span class="addon"><i class="fa fa-map"></i></span>
<select id="country" class="col m6">
<option value="">France</option>
<option value="">Mexico</option>
<option value="">U.S.A.</option>
<option value="">Belgium</option>
<option value="" selected>Luxembourg</option>
<option value="">England</option>
</select>
<span class="addon danger"><i class="fa fa-arrow-circle-down"></i></span>
</div>
<div class="col m6 offset-m6">
<input type="checkbox" id="copy" checked/><label for="copy">send me a copy</label>
</div>
</form>
inline forms
<form method="post" action="#!" class="form-inline">
<div class="col m6 input-group-left">
<input type="text" placeholder="username"/>
<span class="addon primary"><i class="fa fa-user"></i></span>
</div>
<div class="col m6 input-group-left input-password">
<input type="password" placeholder="password"/>
<span class="addon primary"><i class="fa fa-eye"></i></span>
</div>
<button type="submit" class="btn-primary"><i class="fa fa-unlock-alt"></i> login</button>
</form>
<form method="post" action="#!" class="form-glue">
<input type="text" placeholder="username"/>
<input type="password" placeholder="password"/>
<input type="submit" class="btn-primary" value="login"/>
</form>
click on the input password icon to see the password in plaintext
the tables
with modern style
classic table
i am the title of the table
| col1 |
col2 |
col3 |
col4 |
| value col1 item1 and 2 |
value col2 item1 |
value col3 item1 |
value col4 item1 |
| value col2 item2 |
value col3 and col4 item2 |
| value col1 item3 |
value col2 item3 |
value col3 item3 |
value col4 item3 |
<div class="table-responsive">
<table>
<caption>i am the title of the table</caption>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
</tr>
<tr class="contour">
<td rowspan="2"><span>value col1 item1 and 2</span></td>
<td>value col2 item1</td>
<td>value col3 item1</td>
<td>value col4 item1</td>
</tr>
<tr class="contour">
<td><span>value col2 item2</span></td>
<td colspan="2">value col3 and col4 item2</td>
</tr>
<tr>
<td>value col1 item3</td>
<td>value col2 item3</td>
<td>value col3 item3</td>
<td>value col4 item3</td>
</tr>
</table>
</div>
full structure
i am the title of the table
| col1 |
col2 |
col3 |
col4 |
| value col1 item1 and 2 |
value col2 item1 |
value col3 item1 |
value col4 item1 |
| value col2 item2 |
value col3 and col4 item2 |
| value col1 item3 |
value col2 item3 |
value col3 item3 |
value col4 item3 |
| i am the footer of the table |
<div class="table-responsive">
<table>
<caption>i am the title of the table</caption>
<thead>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
</tr>
</thead>
<tbody>
<tr class="contour">
<td rowspan="2"><span>value col1 item1 and 2</span></td>
<td>value col2 item1</td>
<td>value col3 item1</td>
<td>value col4 item1</td>
</tr>
<tr class="contour">
<td><span>value col2 item2</span></td>
<td colspan="2">value col3 and col4 item2</td>
</tr>
<tr>
<td>value col1 item3</td>
<td>value col2 item3</td>
<td>value col3 item3</td>
<td>value col4 item3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">i am the footer of the table</td>
</tr>
</tfoot>
</table>
</div>
double heading
i am the title of the table
| name |
col1 |
col2 |
col3 |
col4 |
| name item1 |
value col1 item1 and 2 |
value col2 item1 |
value col3 item1 |
value col4 item1 |
| name item2 |
value col2 item2 |
value col3 and col4 item2 |
| name item3 |
value col1 item3 |
value col2 item3 |
value col3 item3 |
value col4 item3 |
| i am the footer of the table |
<div class="table-responsive">
<table class="double">
<caption>i am the title of the table</caption>
<thead>
<tr>
<th>name</th>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
</tr>
</thead>
<tbody>
<tr class="contour">
<th>name item1</th>
<td rowspan="2"><span>value col1 item1 and 2</span></td>
<td>value col2 item1</td>
<td>value col3 item1</td>
<td>value col4 item1</td>
</tr>
<tr class="contour">
<th>name item2</th>
<td><span>value col2 item2</span></td>
<td colspan="2">value col3 and col4 item2</td>
</tr>
<tr>
<th>name item3</th>
<td>value col1 item3</td>
<td>value col2 item3</td>
<td>value col3 item3</td>
<td>value col4 item3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">i am the footer of the table</td>
</tr>
</tfoot>
</table>
</div>
the sections
util classes
well
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A alias assumenda aut consequatur,
ducimus ea fugiat hic, ipsam iste labore mollitia pariatur porro quidem quod quos sed sit.
Labore, quam.
Consectetur dolore molestiae molestias porro sed. Architecto, consequatur doloremque eius eum
exercitationem explicabo impedit ipsam iusto modi molestiae molestias natus placeat quidem,
tempore tenetur ullam ut voluptates voluptatum? Dolores, vel.
additional content
<div class="well">
<p>Lorem ... </p>
<p>Consectetur ... </p>
<hr/>
<p class="text-center">additional content ... </p>
</div>
panels
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aperiam cupiditate dolor
dolorem esse fugiat illo incidunt itaque labore laboriosam mollitia obcaecati odit
praesentium qui quisquam repudiandae, sequi veritatis voluptatibus.
A autem commodi ducimus eius error eveniet exercitationem in ipsa iusto, laboriosam magni
necessitatibus neque non praesentium quae quas quasi qui, recusandae repellendus rerum?
Dolorem fuga pariatur repudiandae? Doloremque, ex.
Animi blanditiis doloribus dolorum est exercitationem facere harum inventore labore
laborum magnam maxime molestias nobis non perferendis possimus quaerat quos reiciendis
repudiandae saepe tenetur, vel vitae voluptatibus voluptatum. Fugit, ullam?
Asperiores id laborum magnam maiores minus molestiae quisquam ut! Ad blanditiis facere
facilis, ipsum, molestiae necessitatibus nobis quibusdam quidem ratione reprehenderit
temporibus veritatis. Atque ducimus, error id minus modi vero.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aperiam cupiditate dolor
dolorem esse fugiat illo incidunt itaque labore laboriosam mollitia obcaecati odit
praesentium qui quisquam repudiandae, sequi veritatis voluptatibus.
A autem commodi ducimus eius error eveniet exercitationem in ipsa iusto, laboriosam magni
necessitatibus neque non praesentium quae quas quasi qui, recusandae repellendus rerum?
Dolorem fuga pariatur repudiandae? Doloremque, ex.
Animi blanditiis doloribus dolorum est exercitationem facere harum inventore labore
laborum magnam maxime molestias nobis non perferendis possimus quaerat quos reiciendis
repudiandae saepe tenetur, vel vitae voluptatibus voluptatum. Fugit, ullam?
Asperiores id laborum magnam maiores minus molestiae quisquam ut! Ad blanditiis facere
facilis, ipsum, molestiae necessitatibus nobis quibusdam quidem ratione reprehenderit
temporibus veritatis. Atque ducimus, error id minus modi vero.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aperiam cupiditate dolor
dolorem esse fugiat illo incidunt itaque labore laboriosam mollitia obcaecati odit
praesentium qui quisquam repudiandae, sequi veritatis voluptatibus.
A autem commodi ducimus eius error eveniet exercitationem in ipsa iusto, laboriosam magni
necessitatibus neque non praesentium quae quas quasi qui, recusandae repellendus rerum?
Dolorem fuga pariatur repudiandae? Doloremque, ex.
Animi blanditiis doloribus dolorum est exercitationem facere harum inventore labore
laborum magnam maxime molestias nobis non perferendis possimus quaerat quos reiciendis
repudiandae saepe tenetur, vel vitae voluptatibus voluptatum. Fugit, ullam?
Asperiores id laborum magnam maiores minus molestiae quisquam ut! Ad blanditiis facere
facilis, ipsum, molestiae necessitatibus nobis quibusdam quidem ratione reprehenderit
temporibus veritatis. Atque ducimus, error id minus modi vero.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aperiam cupiditate dolor
dolorem esse fugiat illo incidunt itaque labore laboriosam mollitia obcaecati odit
praesentium qui quisquam repudiandae, sequi veritatis voluptatibus.
A autem commodi ducimus eius error eveniet exercitationem in ipsa iusto, laboriosam magni
necessitatibus neque non praesentium quae quas quasi qui, recusandae repellendus rerum?
Dolorem fuga pariatur repudiandae? Doloremque, ex.
Animi blanditiis doloribus dolorum est exercitationem facere harum inventore labore
laborum magnam maxime molestias nobis non perferendis possimus quaerat quos reiciendis
repudiandae saepe tenetur, vel vitae voluptatibus voluptatum. Fugit, ullam?
Asperiores id laborum magnam maiores minus molestiae quisquam ut! Ad blanditiis facere
facilis, ipsum, molestiae necessitatibus nobis quibusdam quidem ratione reprehenderit
temporibus veritatis. Atque ducimus, error id minus modi vero.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aperiam cupiditate dolor
dolorem esse fugiat illo incidunt itaque labore laboriosam mollitia obcaecati odit
praesentium qui quisquam repudiandae, sequi veritatis voluptatibus.
A autem commodi ducimus eius error eveniet exercitationem in ipsa iusto, laboriosam magni
necessitatibus neque non praesentium quae quas quasi qui, recusandae repellendus rerum?
Dolorem fuga pariatur repudiandae? Doloremque, ex.
Animi blanditiis doloribus dolorum est exercitationem facere harum inventore labore
laborum magnam maxime molestias nobis non perferendis possimus quaerat quos reiciendis
repudiandae saepe tenetur, vel vitae voluptatibus voluptatum. Fugit, ullam?
<div class="row panel-group">
<div class="panel-default">
<header class="panel-heading">
<h1><i class="fa fa-info-circle"></i> panel title <a href="#!">voir</a></h1>
</header>
<section class="panel-body">
... content ...
</section>
<footer class="panel-footer">
<p class="italic text-center">published in section: footer</p>
</footer>
</div>
<div class="col m6">
<div class="panel-primary">
<header class="panel-heading">
<h1>panel title</h1>
</header>
<section class="panel-body">
... content ...
</section>
</div>
</div>
<div class="col m6">
<div class="panel-success">
<header class="panel-heading">
<h1>panel title</h1>
</header>
<section class="panel-body">
... content ...
</section>
</div>
</div>
<div class="col m6">
<div class="panel-warning">
<header class="panel-heading">
<h1>panel title <a href="#!" class="btn-danger">voir</a></h1>
</header>
<section class="panel-body">
... content ...
</section>
</div>
</div>
<div class="col m6">
<div class="panel-danger">
<header class="panel-heading">
<h1>panel title</h1>
</header>
<section class="panel-body">
... content ...
</section>
</div>
</div>
</div>
the cards
to card content
basic usage
the alerts
success, warning or danger
simple
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aperiam consectetur culpa distinctio dolorem enim eos facilis, iusto maxime minima placeat quo ratione recusandae reiciendis, reprehenderit sunt tenetur, voluptatem.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aperiam consectetur culpa distinctio dolorem enim eos facilis, iusto maxime minima placeat quo ratione recusandae reiciendis, reprehenderit sunt tenetur, voluptatem.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aperiam consectetur culpa distinctio dolorem enim eos facilis, iusto maxime minima placeat quo ratione recusandae reiciendis, reprehenderit sunt tenetur, voluptatem.
additional content
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aperiam consectetur culpa distinctio dolorem enim eos facilis, iusto maxime minima placeat quo ratione recusandae reiciendis, reprehenderit sunt tenetur, voluptatem.
<div class="alert default">
<p><i class="fa fa-info-circle"></i> ... </p>
</div>
<div class="alert success">
<p><i class="fa fa-check"></i> ... </p>
</div>
<div class="alert warning">
<p><i class="fa fa-warning"></i> ... </p>
<hr/>
<p> additional content </p>
</div>
<div class="alert danger">
<p><i class="fa fa-close"></i> ... </p>
</div>
closable
you can close this alert message
<div class="alert warning dismissable">
<p><i class="fa fa-warning"></i> ... </p>
</div>