Components Documentation

Buttons

Colors

We worked over the original Bootstrap classes, choosing a different, slightly intenser color pallete:

Default Primary Info Success
Warning Danger White

<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-white">White</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 plain simple buttons. Let's see some examples:

Default Round favorite With Icon favorite 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-just-icon">
	<i class="material-icons">favorite</i>
</button>
<button class="btn btn-primary btn-simple">Simple</button>
    			

Button groups 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.

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 recomment 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, on the dropdowns from the navbars will take the color of the navbar parent.

Regular

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

Flags

• Deutsch
• English(UK)
• Français
• Română
• Italiano
• Español soon
• Português soon
• 日本語 soon

<div class="col-md-3 dropdown">
	<a href="#" class="btn btn-simple 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>
    			

Inputs

We restyled the Bootstrap input to give it 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>
				

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>
				

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 4 new colors: blue, green, orange, red. If you want to use one of them, you have to replace the .navbar-default or navbar-primary with the class for the chosen color .navbar-info, .navbar-success, .navbar-warning, .navbar-danger.

Besides all this customisation, we have an extra navbar. .navbar-transparent is a special class that you can to use if you want the navbar to be transparent and then turn to color after scrolling 260px using the class .navbar-color-on-scroll. We recommend that the part of your page that has the transparent navbar contains something non-cluttered, like an image. If you want to see a nice example in details, check the Profile Page.

Nav Pills

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

• dashboard Dashboard
• schedule Schedule
• list Tasks

• dashboard Dashboard
• schedule Schedule
• list Tasks

• dashboard Dashboard
• schedule Schedule
• list Tasks

• dashboard Dashboard
• schedule Schedule
• list Tasks

• dashboard Dashboard
• schedule Schedule
• list Tasks

<ul class="nav nav-pills 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>
    		

Pagination

The Bootstrap pagination elements were customised to fit the overall theme. Besides the classic look, we also added the color 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 color but you can add some colors 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

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

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

<!-- Javascript -->
$('#sliderRegular').noUiSlider({
	start: 40,
	connect: "lower",
	range: {
	    min: 0,
	    max: 100
	}
});

$('#sliderDouble').noUiSlider({
	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.

<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" title="View Profile" class="btn btn-info btn-simple btn-xs">
                    <i class="fa fa-user"></i>
                </button>
                <button type="button" rel="tooltip" title="Edit Profile" class="btn btn-success btn-simple btn-xs">
                    <i class="fa fa-edit"></i>
                </button>
                <button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-xs">
                    <i class="fa fa-times"></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" title="View Profile" class="btn btn-info btn-simple btn-xs">
                    <i class="fa fa-user"></i>
                </button>
                <button type="button" rel="tooltip" title="Edit Profile" class="btn btn-success btn-simple btn-xs">
                    <i class="fa fa-edit"></i>
                </button>
                <button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-xs">
                    <i class="fa fa-times"></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" title="View Profile" class="btn btn-info btn-simple btn-xs">
                    <i class="fa fa-user"></i>
                </button>
                <button type="button" rel="tooltip" title="Edit Profile" class="btn btn-success btn-simple btn-xs">
                    <i class="fa fa-edit"></i>
                </button>
                <button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-xs">
                    <i class="fa fa-times"></i>
                </button>
            </td>
        </tr>
    </tbody>
</table>