Tutorial and Components

Short Description and Usage

Material Kit Pro is a beautiful resource built for Bootstrap. It was made over the powerful Bootstrap Material Design. We used and have redesigned all components to make it look flat, minimalist and easy to use. We are proud of this new Bootstrap skin and the possibilities for customisation.

Using it is very simple and it will enable you to refresh you classic looking application. To get the desired effect you will also need to integrate JS plugins that take a little bit more effort. It the end the result will be worth it.

Getting Started

The Material Kit Pro is built on top of Bootstrap 3, so you can safely use it on your existing or new Bootstrap project. No line of code from Bootstrap 3 was changed, so you don't have to worry about undesired effects in your work.

The easiest way to start is to use our start-up template where all the files are already included and ready to use.

File Structure

Once you have downloaded the archive and opened it, you will find the following structure:

Let's take it one by one:

	material-kit
	├── HTML
	│   ├── Creative\ Tim\ License.pdf
	│   ├── assets
	│   │   ├── assets-for-demo
	│   │   ├── css
	│   │   │   ├── bootstrap.min.css
	│   │   │   ├── material-kit.min.css
	│   │   │   └── material-kit.min.css.map
	│   │   ├── img
	│   │   ├── js
	│   │   │   ├── bootstrap-datetimepicker.js
	│   │   │   ├── bootstrap-selectpicker.js
	│   │   │   ├── bootstrap-tagsinput.js
	│   │   │   ├── bootstrap.min.js
	│   │   │   ├── jasny-bootstrap.min.js
	│   │   │   ├── jquery.flexisel.js
	│   │   │   ├── jquery.min.js
	│   │   │   ├── material-kit.min.js
	│   │   │   ├── material.min.js
	│   │   │   ├── moment.min.js
	│   │   │   └── nouislider.min.js
	│   │   └── sass
	│   │       ├── material-kit
	│   │       └── material-kit.scss
	│   ├── examples
	│   │   ├── about-us.html
	│   │   ├── blog-post.html
	│   │   ├── blog-posts.html
	│   │   ├── contact-us.html
	│   │   ├── ecommerce.html
	│   │   ├── landing-page.html
	│   │   ├── login-page.html
	│   │   ├── pricing.html
	│   │   ├── product-page.html
	│   │   ├── profile-page.html
	│   │   └── signup-page.html
	│   ├── index.html
	│   ├── presentation.html
	│   ├── sections.html
	│   ├── template.html
	│   └── tutorial-components.html
	├── Photoshop
	└── changelog.txt
				

Restyled Components

Here is the list of Bootstrap 3 components that were restyled in Material Kit Pro:

• Buttons
• Inputs
• Select
• Textarea
• Menu
• Dropdown
• Progress Bars
• Navigation Menu
• Pagination
• Labels
• Notifications
• Typography
• Images
• Tables
• Tooltips
• Popovers
• Modal
• Carousel

New Components

Besides giving the existing Bootstrap elements a new look, we added new ones, so that the interface and consistent and homogenous.

Going through them, we added:

• Tags
• Checkboxes
• Radio Buttons
• Sliders
• Toggle Buttons
• Raised Areas
• Cards with tabs
• Datetimepicker
• Material Icons
• File Uploader
• New Modals

Buttons

Colors

We worked over the original Bootstrap classes, choosing a different, slightly intenser colour palette. We have also added a pink button, defined by the .btn-rose class.If you want to have a disabled button, you can add .disabled class.

Disabled Default Primary Info Success Warning Danger Rose

<button class="btn btn-default disabled">Disabled</button>
<button class="btn btn-default">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-rose">Rose</button>
    			

Sizes

Buttons come in all needed sizes:

Large Normal Small Extra Small

<button class="btn btn-primary btn-lg">Large</button>
<button class="btn btn-primary">Normal</button>
<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-primary btn-xs">Extra Small</button>
    			

Styles

We added extra classes that can help you better customise the look. You can use regular buttons, rounded corners buttons or simple buttons. If you are using buttons that only have an icon inside of them, you can add .btn-just-icon so the icon properly aligns. Let's see some examples:

Default Round favorite With Icon favorite Simple

<button class="btn btn-primary ">Default</button>
<button class="btn btn-primary btn-round">Round</button>
<button class="btn btn-primary btn-round">
	<i class="material-icons">favorite</i> With Icon
</button>
<button class="btn btn-primary btn-fab btn-fab-mini btn-round">
	<i class="material-icons">favorite</i>
</button>
<button class="btn btn-primary btn-simple">Default</button>
    			

Button groups, toolbars, and disabled state all work like they are supposed to. We used the Font Awesome icons that can be found here and Material Design Icons that can be found here.

Social

We have created special buttons for the main social networks. You can use the buttons with any styles, you just need to add the class .btn-[#social-network] for the button to have the brand colour of the network.

<button class="btn btn-fab btn-twitter">
    <i class="fa fa-twitter"></i>
</button>
<button class="btn btn-just-icon btn-twitter">
    <i class="fa fa-twitter"></i>
</button>
<button class="btn btn-twitter btn-just-icon">
    <i class="fa fa-twitter"></i>
</button>
<br />
<button class="btn btn-fab btn-facebook">
    <i class="fa fa-facebook"> </i>
</button>
<button class="btn btn-fab btn-google">
    <i class="fa fa-google"> </i>
</button>
<button class="btn btn-fab btn-linkedin">
    <i class="fa fa-linkedin"></i>
</button>
<button class="btn btn-fab btn-pinterest">
    <i class="fa fa-pinterest"></i>
</button>
<button class="btn btn-fab btn-youtube">
    <i class="fa fa-youtube"> </i>
</button>
<button class="btn btn-fab btn-tumblr">
    <i class="fa fa-tumblr"> </i>
</button>
<button class="btn btn-fab btn-github">
    <i class="fa fa-github"></i>
</button>
<button class="btn btn-fab btn-dribbble">
    <i class="fa fa-dribbble"></i>
</button>
<button class="btn btn-fab btn-reddit">
    <i class="fa fa-reddit"></i>
</button>
<button class="btn btn-fab btn-instagram">
    <i class="fa fa-instagram"> </i>
</button>
                

Checkboxes

To use the custom checkboxes, you don't need to import any separate Javascript file, everything is inside material.min.js

<div class="checkbox">
	<label>
		<input type="checkbox" name="optionsCheckboxes">
		Unchecked
	</label>
</div>
<div class="checkbox">
	<label>
		<input type="checkbox" name="optionsCheckboxes" checked>
		Checked
	</label>
</div>
<div class="checkbox">
	<label>
		<input type="checkbox" name="optionsCheckboxes" disabled>
		Disabled Unchecked
	</label>
</div>
<div class="checkbox">
	<label>
		<input type="checkbox" name="optionsCheckboxes" disabled checked>
		Disabled Checked
	</label>
</div>

				

Radio Buttons

To use the custom radio buttons, you don't need to import any separate Javascript file, everything is inside material.min.js.

<div class="radio">
	<label>
		<input type="radio" name="optionsRadios">
		Radio is off
	</label>
</div>
<div class="radio">
	<label>
		<input type="radio" name="optionsRadios" checked="true">
		Radio is on
	</label>
</div>
<div class="radio">
	<label>
		<input type="radio" name="optionsRadiosDisabled" disabled>
		Disabled Radio is off
	</label>
</div>
<div class="radio">
	<label>
		<input type="radio" name="optionsRadiosDisabled" checked="true" disabled>
		Disabled Radio is on
	</label>
</div>
    			

Toggle Buttons

If you want to use something more special than a checkbox, we recommend the toggle buttons.

<div class="togglebutton">
	<label>
    	<input type="checkbox" checked="">
		Toggle is on
	</label>
</div>

<div class="togglebutton">
	<label>
    	<input type="checkbox">
		Toggle is off
	</label>
</div>
    			

Dropdown

We are very proud to present the dropdown which has a subtle animation. We also thought of another use-case: dropdown with flags. IMPORTANT! The focus state is Purple by default and, on the dropdowns from the navbars, they will take the colour of the parent navbar.

<div class="dropdown">
	<a href="#" class="btn dropdown-toggle" data-toggle="dropdown">
    	Regular
    	<b class="caret"></b>
	</a>
	<ul class="dropdown-menu">
		<li><a href="#">Action</a></li>
		<li><a href="#">Another action</a></li>
		<li><a href="#">Something else here</a></li>
		<li class="divider"></li>
		<li><a href="#">Separated link</a></li>
		<li class="divider"></li>
		<li><a href="#">One more separated link</a></li>
	</ul>
</div>
    			

Dropup

We restyled the dropup and added a different animation for the opening. You can see the full implementation below.

Dropup

• Dropdown header
• Action
• Another action
• Something else here
• Separated link
• One more separated link

<span class="dropup">
  <button href="#" class="dropdown-toggle btn btn-primary btn-round" data-toggle="dropdown">Dropup <b class="caret"></b></button>
  <ul class="dropdown-menu dropdown-primary dropdown-menu-right">
    <li class="dropdown-header">Dropdown header</li>
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
    <li class="divider"></li>
    <li><a href="#">One more separated link</a></li>
  </ul>
</span>
                

Inputs

We restyled the Bootstrap inputs to give them a more flat, minimal look. You can use them with regular labels, floating labels and states or input groups.

<div class="col-sm-4">
	<div class="form-group">
    	<input type="text" value="" placeholder="Regular" class="form-control" />
	</div>
</div>

<div class="col-sm-4">
	<div class="form-group label-floating">
		<label class="control-label">With Floating Label</label>
		<input type="email" class="form-control">
	</div>
</div>

<div class="col-sm-4">
	<div class="form-group label-floating has-success">
		<label class="control-label">Success input</label>
		<input type="text" value="Success" class="form-control" />
		<span class="form-control-feedback">
			<i class="material-icons">done</i>
		</span>
	</div>
</div>

<div class="col-sm-4">
	<div class="form-group label-floating has-error">
		<label class="control-label">Error input</label>
		<input type="email" value="Error Input" class="form-control" />
		<span class="material-icons form-control-feedback">clear</span>
	</div>
</div>

<div class="col-sm-4">
	<div class="input-group">
		<span class="input-group-addon">
			<i class="material-icons">group</i>
		</span>
		<input type="text" class="form-control" placeholder="With Material Icons">
	</div>
</div>

<div class="col-sm-4">
	<div class="input-group">
		<span class="input-group-addon">
			<i class="fa fa-group"></i>
		</span>
		<input type="text" class="form-control" placeholder="With Font Awesome Icons">
	</div>
</div>
				

The input color can be changed by adding our classes .form-danger | .form-rose | .form-warning | .form-info | .form-success like this:

<div class="col-sm-5">
      <div class="form-group form-warning">
	   <input type="text" value="" placeholder="Warning Input" class="form-control" />
      </div>
</div>
<div class="col-sm-5">
     <div class="form-group form-rose">
	  <input type="text" value="" placeholder="Rose Input" class="form-control" />
     </div>
</div>
<div class="col-sm-5">
     <div class="form-group form-info">
	  <input type="text" value="" placeholder="Info Input" class="form-control" />
     </div>
</div>
<div class="col-sm-5">
     <div class="form-group form-danger">
	  <input type="text" value="" placeholder="Danger Input" class="form-control" />
     </div>
</div>
				

Textarea

The textarea has a new style, so it looks similar to all other inputs.

<textarea class="form-control" placeholder="Here can be your nice text" rows="5"></textarea>
				

Select Boostrap v1.12.4

We have styled the select picker to look similar to the dropdown and the other inputs. To see the original documentation, please check out Silvio Moreto repo on GitHub.

<select class="selectpicker" data-style="btn btn-primary btn-round" title="Single Select" data-size="7">
  <option disabled selected> Choose city</option>
  <option value="1">Foobar</option>
  <option value="2">Is great</option>
</select>
                

jQuery Tagsinput v0.8.0

The tags closely resemble the labels and follow the same line of colour. To use them, you need to use the default class .tagsinput, and add a variation of the data-color="{ primary | info | success | warning | danger | rose }".

For more information please check Full Github Documentation.

<input name="tagsinput" class="tagsinput tag-rose" value="Minimal, Light, New, Friends" />
                

FileUpload Jasny v3.1.3

We have styled the select picker to look similar to the dropdown and the other inputs.

For more information please check Full Github Documentation.

<div class="fileinput fileinput-new text-center" data-provides="fileinput">
   <div class="fileinput-new thumbnail img-raised">
	<img src="assets/img/image_placeholder.jpg" alt="...">
   </div>
   <div class="fileinput-preview fileinput-exists thumbnail img-raised"></div>
   <div>
	<span class="btn btn-raised btn-round btn-default btn-file">
	   <span class="fileinput-new">Select image</span>
	   <span class="fileinput-exists">Change</span>
	   <input type="file" name="..." />
	</span>
        <a href="#pablo" class="btn btn-danger btn-round fileinput-exists" data-dismiss="fileinput">
        <i class="fa fa-times"></i> Remove</a>
   </div>
</div>

<div class="fileinput fileinput-new text-center" data-provides="fileinput">
    <div class="fileinput-new thumbnail img-circle img-raised">
	<img src="assets/img/placeholder.jpg" alt="...">
    </div>
    <div class="fileinput-preview fileinput-exists thumbnail img-circle img-raised"></div>
    <div>
    <span class="btn btn-raised btn-round btn-default btn-file">
        <span class="fileinput-new">Add Photo</span>
	<span class="fileinput-exists">Change</span>
	<input type="file" name="..." /></span>
        <br />
        <a href="#pablo" class="btn btn-danger btn-round fileinput-exists" data-dismiss="fileinput"><i class="fa fa-times"></i> Remove</a>
    </div>
</div>
				

Navbar

The classic Bootstrap Navbar was restyled:

<nav class="navbar navbar-default" role="navigation">
	<div class="container-fluid">
    	<div class="navbar-header">
    		<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
    		</button>
    		<a class="navbar-brand" href="#">Brand</a>
    	</div>

    	<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    		<ul class="nav navbar-nav">
				<li class="active"><a href="#">Link</a></li>
        		<li><a href="#">Link</a></li>
        		<li class="dropdown">
        			<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        			<ul class="dropdown-menu">
					  <li><a href="#">Action</a></li>
					  <li><a href="#">Another action</a></li>
					  <li><a href="#">Something else here</a></li>
					  <li class="divider"></li>
					  <li><a href="#">Separated link</a></li>
					  <li class="divider"></li>
				      <li><a href="#">One more separated link</a></li>
        			</ul>
        		</li>
    		</ul>
    	</div>
	</div>
</nav>
	    		

Besides the default navbar, we added 5 new colors: blue, green, orange, red, pink. If you want to use one of them, you have to replace the .navbar-default or .navbar-primary with the class for the chosen colour .navbar-info, .navbar-success, .navbar-warning, .navbar-danger or .navbar-rose.

Besides all this customisation, we have an extra navbar. .navbar-transparent is a special class that you can use if you want the navbar to be transparent.

If you want to turn the color on and remove the transparent class, after scrolling an amount of pixels use the class .navbar-color-on-scroll. To set after how many pixels you want to activate the colors use the property color-on-scroll="200", where 200 is the number of pixels. An example can be found in Product Page.

Headers

To speed up the creation of a webpage, we created multiple options for the header area. You can choose to add an image and a filter over it; and you can customise the area with subscription forms, offers, videos, etc. You also have an option to add a carousel.

See more examples and implementation here.

Pre-Footer Area

Sharing is caring, so we created a special class for sharing areas .social-line. The default option is transparent, but you can opt for black or white with the .social-line-black and .social-line-white classes. We created a special option to increase the size of the social networks icons and you can use it by adding the class .social-line-big-icons.

Set up a space on your page to gather subscriptions by adding a .subscribe-line. The default options is transparent, but you can also turn in to black by adding .subscribe-line-black or to white by adding .subscribe-line-white. If you want to have a background image with a black layer over the background, you can use the .subscribe-line-image.

To see the examples and the implementation, you can go here.

Footers

The default class is .footer. There are 3 colours you can choose from .footer-white, .footer-black and .footer-gray . If you want to bundle more information than a line of links, you can use the .footer-big option.

See more examples and implementation here.

Comments Area

For the comments section, we used the Bootstrap classes for media, to which we added the .media-post class. You can use the former class for the area in which an user can post a comment. All comments should be placed in the class .media-area.

You can see more examples here.

Nav Pills

We changed the design for the Bootstrap nav pills into something a bit more fresh. We have also added more colour classes for customisation like .nav-pills-primary, .nav-pills-info, .nav-pills-success, .nav-pills-warning, .nav-pills-danger.

Simple

We added coloured shadows to the pills and created two options: horizontal and vertical.

With Icons

If you want to also add icons, you can use this version with the two options: horizontal and vertical. To use them, please add the .nav-pills-icons class.

<!-- simple and horizontal -->
<ul class="nav nav-pills nav-pills-rose">
  <li class="active"><a href="#pill1" data-toggle="tab">Profile</a></li>
  <li><a href="#pill2" data-toggle="tab">Settings</a></li>
  <li><a href="#pill3" data-toggle="tab">Options</a></li>
</ul>

<!-- simple and vertical -->
<ul class="nav nav-pills nav-pills-rose nav-stacked">
  <li class="active"><a href="#tab1" data-toggle="tab">Profile</a></li>
  <li><a href="#tab2" data-toggle="tab">Settings</a></li>
  <li><a href="#tab3" data-toggle="tab">Options</a></li>
</ul>

<!-- with icons and horizontal -->
<ul class="nav nav-pills nav-pills-icons nav-pills-primary" role="tablist">
	<li>
		<a href="#dashboard" role="tab" data-toggle="tab">
			<i class="material-icons">dashboard</i>
			Dashboard
		</a>
	</li>
	<li class="active">
		<a href="#schedule" role="tab" data-toggle="tab">
			<i class="material-icons">schedule</i>
			Schedule
		</a>
	</li>
	<li>
		<a href="#tasks" role="tab" data-toggle="tab">
			<i class="material-icons">list</i>
			Tasks
		</a>
	</li>
</ul>

<!-- with icons and vertical -->
<ul class="nav nav-pills nav-pills-icons nav-stacked" role="tablist">
	<li class="active">
		<a href="#dashboard-2" role="tab" data-toggle="tab">
			<i class="material-icons">dashboard</i>
			Dashboard
		</a>
	</li>
	<li >
        <a href="#schedule-2" role="tab" data-toggle="tab">
			<i class="material-icons">schedule</i>
			Schedule
        </a>
    </li>
</ul>
        		

Pagination

The Bootstrap pagination elements were customised to fit the overall theme. Besides the classic look, we also added the colour classes to offer more customisation like .pagination-info, .pagination-success, .pagination-warning, .pagination-danger.

• <
• 1
• 2
• 3
• 4
• 5
• >

• <
• 1
• 2
• 3
• 4
• 5
• >

• <
• 1
• 2
• 3
• 4
• 5
• >

• <
• 1
• 2
• 3
• 4
• 5
• >

• <
• 1
• 2
• 3
• 4
• 5
• >

<ul class="pagination pagination-primary">
	<li><a href="#"><</a></li>
	<li><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li class="active"><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#">5</a></li>
	<li><a href="#">></a></li>
</ul>
		    

Progress Bars

The progress bars from Bootstrap hold the same classes and functionality. Adding this kit over your existing project will only make it look more clean. The default line is gray, each bar has a specific colour but you can add some colours for the background lines using the next classes .progress-line-primary, .progress-line-info, .progress-line-success, .progress-line-warning, .progress-line-danger,

<div class="progress">
	<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
	<span class="sr-only">30% Complete</span>
	</div>
</div>
<div class="progress">
	<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
	<span class="sr-only">60% Complete</span>
	</div>
</div>

<div class="progress progress-line-primary">
	<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
	<span class="sr-only">30% Complete</span>
	</div>
</div>
<div class="progress progress-line-info">
	<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
	<span class="sr-only">60% Complete</span>
	</div>
</div>

<div class="progress">
	<div class="progress-bar progress-bar-success" style="width: 35%">
	<span class="sr-only">35% Complete (success)</span>
	</div>
	<div class="progress-bar progress-bar-warning" style="width: 20%">
	<span class="sr-only">20% Complete (warning)</span>
	</div>
	<div class="progress-bar progress-bar-danger" style="width: 10%">
	<span class="sr-only">10% Complete (danger)</span>
	</div>
</div>
			    

Sliders v11.1.0

We restyled noUIslider, while keeping the design consistent. You can use other classes for colors like .slider-info, .slider-success, .slider-warning, .slider-danger.

For more information please check Full Github Documentation.

<!-- Markup -->
<div id="sliderRegular" class="slider"></div>
<div id="sliderDouble" class="slider slider-info"></div>

<!-- Javascript -->
var slider = document.getElementById('sliderRegular');

noUiSlider.create(slider, {
	start: 40,
	connect: [true,false],
	range: {
		min: 0,
		max: 100
	}
});

var slider2 = document.getElementById('sliderDouble');

noUiSlider.create(slider2, {
	start: [ 20, 60 ],
	connect: true,
	range: {
		min:  0,
		max:  100
	}
});
	    	

Labels

We restyled the default options for labels and we added the filled class, that can be used in any combination.

Default Primary Success Info Warning Danger

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
		    	

Tables

All Boostrap classes for tables are supported and improved.

Simple Table with Actions

<table class="table">
    <thead>
        <tr>
            <th class="text-center">#</th>
            <th>Name</th>
            <th>Job Position</th>
            <th>Since</th>
            <th class="text-right">Salary</th>
            <th class="text-right">Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="text-center">1</td>
            <td>Andrew Mike</td>
            <td>Develop</td>
            <td>2013</td>
            <td class="text-right">&euro; 99,225</td>
            <td class="td-actions text-right">
                <button type="button" rel="tooltip" class="btn btn-info">
                    <i class="material-icons">person</i>
                </button>
                <button type="button" rel="tooltip" class="btn btn-success">
                    <i class="material-icons">edit</i>
                </button>
                <button type="button" rel="tooltip" class="btn btn-danger">
                    <i class="material-icons">close</i>
                </button>
            </td>
        </tr>
        <tr>
            <td class="text-center">2</td>
            <td>John Doe</td>
            <td>Design</td>
            <td>2012</td>
            <td class="text-right">&euro; 89,241</td>
            <td class="td-actions text-right">
                <button type="button" rel="tooltip" class="btn btn-info btn-round">
                    <i class="material-icons">person</i>
                </button>
                <button type="button" rel="tooltip" class="btn btn-success btn-round">
                    <i class="material-icons">edit</i>
                </button>
                <button type="button" rel="tooltip" class="btn btn-danger btn-round">
                    <i class="material-icons">close</i>
                </button>
            </td>
        </tr>
        <tr>
            <td class="text-center">3</td>
            <td>Alex Mike</td>
            <td>Design</td>
            <td>2010</td>
            <td class="text-right">&euro; 92,144</td>
            <td class="td-actions text-right">
                <button type="button" rel="tooltip" class="btn btn-info btn-simple">
                    <i class="material-icons">person</i>
                </button>
                <button type="button" rel="tooltip" class="btn btn-success btn-simple">
                    <i class="material-icons">edit</i>
                </button>
                <button type="button" rel="tooltip" class="btn btn-danger btn-simple">
                    <i class="material-icons">close</i>
                </button>
            </td>
        </tr>
    </tbody>
</table>
		    

Shopping Cart Table

We have also built a shopping cart example table, especially useful if you are building an e-commerce.

<div class="table-responsive">
<table class="table table-shopping">
    <thead>
        <tr>
            <th class="text-center"></th>
            <th >Product</th>
            <th class="th-description">Color</th>
            <th class="th-description">Size</th>
            <th class="text-right">Price</th>
            <th class="text-right">Qty</th>
            <th class="text-right">Amount</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div class="img-container">
                    <img src="assets/img/product1.jpg" alt="...">
                </div>
            </td>
            <td class="td-name">
                <a href="#jacket">Spring Jacket</a>
                <br /><small>by Dolce&Gabbana</small>
            </td>
            <td>
                Red
            </td>
            <td>
                M
            </td>
            <td class="td-number">
                <small>&euro;</small>549
            </td>
            <td class="td-number">
                1
                <div class="btn-group">
                    <button class="btn btn-round btn-info btn-xs"> <i class="material-icons">remove</i> </button>
                    <button class="btn btn-round btn-info btn-xs"> <i class="material-icons">add</i> </button>
                </div>
            </td>
            <td class="td-number">
                <small>&euro;</small>549
            </td>
            <td class="td-actions">
                <button type="button" rel="tooltip" data-placement="left" title="Remove item" class="btn">
                    <i class="material-icons">close</i>
                </button>
            </td>
        </tr>
        <tr>
            <td colspan="3">
            </td>
            <td class="td-total">
               Total
            </td>
            <td class="td-price">
                <small>&euro;</small>2,346
            </td>
            <td colspan="3" class="text-right"> <button type="button" class="btn btn-info btn-round btn-lg">Complete Purchase <i class="material-icons">keyboard_arrow_right</i></button></td>

        </tr>
    </tbody>
</table>
</div>