Rich-React

React js UI example. Material design for Bootstrap 3 bootdey

React js UI example and template, Material design for Bootstrap 3 bootdey! . Take a look at this UI example and see how it can enhance your project. Your can copy or download the code and use it in your project. Don't forget to browse our library of other free React Native templates for even more design and functionality inspiration. Happy coding!
Tags: material,bootstrap,cards,tabs,alerts

Preview Code

1. First, we need fresh reactjs setup, and for that, we need to run below commands into out terminal, and also we should have latest node version installed on our system:

npx create-react-app my-awesome-project

cd my-awesome-project

npm start

2. Now we need to run below commands into our project terminal to get bootstrap and related modules into our reactjs application:

npm install [email protected] --save

npm start //For start project again

3. Finally for the main output, we need to add below code into our my-awesome-project/src/App.js file or if you have fresh setup then you can replace my-awesome-project/src/App.js file code with below code:

import React from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';


function App() {
  
	return (
		<div>
			<header class="header">
    <div class="main_container"> 
    	<h1 class="title">Material design for Bootstrap 3</h1>
		<a href="https://github.com/melnik909/material_bootstrap_theme" class="btn material_btn material_btn_lg material_btn_primary">Download on GitHub</a>
		<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top" style={{/*display: inline-block;*/}}>
			<input type="hidden" name="cmd" value="_s-xclick"/>
			<input type="hidden" name="hosted_button_id" value="ARVUMJLNSMCKA"/>
			<button class="btn material_btn material_btn_lg material_btn_success" >Donate</button>
		</form>
	</div>
</header>
<div class="main_container">

	<h2 class="page-header">Typography</h2>

	<div class="bs-example bs-example-type" data-example-id="simple-headings">
		<table class="table">
			<tbody>
				<tr>
					<td><h1 id="h1.-bootstrap-heading">h1. Bootstrap heading<a class="anchorjs-link" href="#h1.-bootstrap-heading"><span class="anchorjs-icon"></span></a></h1></td>
					<td class="type-info">36px</td>
				</tr>
				<tr>
				<td><h2 id="h2.-bootstrap-heading">h2. Bootstrap heading<a class="anchorjs-link" href="#h2.-bootstrap-heading"><span class="anchorjs-icon"></span></a></h2></td>
					<td class="type-info">30px</td>
				</tr>
				<tr>
					<td><h3 id="h3.-bootstrap-heading">h3. Bootstrap heading<a class="anchorjs-link" href="#h3.-bootstrap-heading"><span class="anchorjs-icon"></span></a></h3></td>
					<td class="type-info">24px</td>
				</tr>
				<tr>
					<td><h4 id="h4.-bootstrap-heading">h4. Bootstrap heading<a class="anchorjs-link" href="#h4.-bootstrap-heading"><span class="anchorjs-icon"></span></a></h4></td>
					<td class="type-info">18px</td>
				</tr>
				<tr>
					<td><h5 id="h5.-bootstrap-heading">h5. Bootstrap heading<a class="anchorjs-link" href="#h5.-bootstrap-heading"><span class="anchorjs-icon"></span></a></h5></td>
					<td class="type-info">14px</td>
				</tr>
				<tr>
				<td><h6>h6. Bootstrap heading</h6></td>
					<td class="type-info">12px</td>
				</tr>
			</tbody>
		</table>
	</div>
	<h2 class="page-header">Dropdowns</h2>
	<div class="dropdown material_dropdown">
		<button class="dropdown-toggle material_dropdown_btn" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
			Dropdown
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu material_dropdown_menu" role="menu" aria-labelledby="dropdownMenu1">
			<li role="presentation"><a role="menuitem" tabindex="-1" href="#/" class="material_dropdown_menu_link">Action</a></li>
			<li role="presentation"><a role="menuitem" tabindex="-1" href="#/" class="material_dropdown_menu_link">Another action</a></li>
			<li role="presentation"><a role="menuitem" tabindex="-1" href="#/" class="material_dropdown_menu_link">Something else here</a></li>
			<li role="presentation"><a role="menuitem" tabindex="-1" href="#/" class="material_dropdown_menu_link">Separated link</a></li>
		</ul>
	</div>
	
	<h3>Headers</h2>
	<div class="dropdown material_dropdown">
		<button class="dropdown-toggle material_dropdown_btn" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="true">
			Dropdown
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu material_dropdown_menu" role="menu" aria-labelledby="dropdownMenu1">
			<li role="presentation" class="material_dropdown_menu_link dropdown-header">Dropdown header</li>
			<li role="presentation"><a role="menuitem" tabindex="-1" href="#/" class="material_dropdown_menu_link">Action</a></li>
			<li role="presentation"><a role="menuitem" tabindex="-1" href="#/" class="material_dropdown_menu_link">Another action</a></li>
			<li role="presentation"><a role="menuitem" tabindex="-1" href="#/" class="material_dropdown_menu_link">Something else here</a></li>
			<li role="presentation"><a role="menuitem" tabindex="-1" href="#/" class="material_dropdown_menu_link">Separated link</a></li>
		</ul>
	</div>
	
	<h3>Divider</h3>
	<div class="dropdown material_dropdown">
		<button class="dropdown-toggle material_dropdown_btn" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="true">
			Dropdown
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu material_dropdown_menu" role="menu" aria-labelledby="dropdownMenu1">
			<li role="presentation" class="material_dropdown_menu_link dropdown-header">Dropdown header</li>
			<li role="presentation"><a role="menuitem" tabindex="-1" href="#/" class="material_dropdown_menu_link">Action</a></li>
			<li role="presentation"><a role="menuitem" tabindex="-1" href="#/" class="material_dropdown_menu_link ">Another action</a></li>
			<li role="presentation"><a role="menuitem" tabindex="-1" href="#/" class="material_dropdown_menu_link">Something else here</a></li>
			 <li role="presentation" class="divider"></li>
			<li role="presentation"><a role="menuitem" tabindex="-1" href="#/" class="material_dropdown_menu_link">Separated link</a></li>
		</ul>
	</div>
	
	<h3>Disabled menu items</h3>
	<div class="dropdown material_dropdown">
		<button class="dropdown-toggle material_dropdown_btn" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="true">
			Dropdown
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu material_dropdown_menu" role="menu" aria-labelledby="dropdownMenu1">
			<li role="presentation" class="material_dropdown_menu_link dropdown-header">Dropdown header</li>
			<li role="presentation"><a role="menuitem" tabindex="-1" href="#/" class="material_dropdown_menu_link">Action</a></li>
			<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#/" class="material_dropdown_menu_link ">Another action</a></li>
			<li role="presentation"><a role="menuitem" tabindex="-1" href="#/" class="material_dropdown_menu_link">Something else here</a></li>
			<li role="presentation" class="divider"></li>
			<li role="presentation"><a role="menuitem" tabindex="-1" href="#/" class="material_dropdown_menu_link">Separated link</a></li>
		</ul>
	</div>

	<h2 class="page-header">Buttons</h2>
	<button type="button" class="btn btn-default material_btn">Button</button>
	<button type="button" class="btn btn-default material_btn material_btn_primary">Button</button>
	<button type="button" class="btn btn-default material_btn material_btn_success">Button</button>
	<button type="button" class="btn btn-default material_btn material_btn_info">Button</button>
	<button type="button" class="btn btn-default material_btn material_btn_warning">Button</button>
	<button type="button" class="btn btn-default material_btn material_btn_danger">Button</button>

	<h2 class="page-header">Button groups</h2>
	<div class="btn-group" role="group" aria-label="Basic example">
		<button type="button" class="btn btn-default material_btn material_btn_primary">Left</button>
		<button type="button" class="btn btn-default material_btn material_btn_primary">Middle</button>
		<button type="button" class="btn btn-default material_btn material_btn_primary">Right</button>
	</div>
	
	<h3 class="page-header">Sizing</h3>
	<div class="bs-example" data-example-id="button-group-sizing">
		<div class="btn-group btn-group-lg material_btn_group material_btn_group_lg" role="group" aria-label="Large button group">
			<button type="button" class="btn btn-default material_btn">Left</button>
			<button type="button" class="btn btn-default material_btn">Middle</button>
			<button type="button" class="btn btn-default material_btn">Right</button>
		</div>
		<br/>
		<div class="btn-group material_btn_group" role="group" aria-label="Default button group">
			<button type="button" class="btn btn-default material_btn material_btn_primary">Left</button>
			<button type="button" class="btn btn-default material_btn material_btn_primary">Middle</button>
			<button type="button" class="btn btn-default material_btn material_btn_primary">Right</button>
		</div>
		<br/>
		<div class="btn-group btn-group-sm material_btn_group material_btn_group_sm" role="group" aria-label="Small button group">
			<button type="button" class="btn btn-default material_btn material_btn_warning">Left</button>
			<button type="button" class="btn btn-default material_btn material_btn_warning">Middle</button>
			<button type="button" class="btn btn-default material_btn material_btn_warning">Right</button>
		</div>
		<br/>
		<div class="btn-group btn-group-xs material_btn_group material_btn_group_xs" role="group" aria-label="Extra-small button group">
			<button type="button" class="btn btn-default material_btn">Left</button>
			<button type="button" class="btn btn-default material_btn">Middle</button>
			<button type="button" class="btn btn-default material_btn">Right</button>
		</div>
	</div>
	
	<h3 class="page-header">Button dropdowns</h3>
	<div class="bs-example">
		<div class="btn-group material_btn_group">
			<button class="dropdown-toggle material_btn material_dropdown_btn material_btn_default" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="true">
				Default
				<span class="caret"></span>
			</button>
			<ul class="dropdown-menu material_dropdown_menu" role="menu">
				<li><a href="#/" class="material_dropdown_menu_link">Action</a></li>
				<li><a href="#/" class="material_dropdown_menu_link">Another action</a></li>
				<li><a href="#/" class="material_dropdown_menu_link">Something else here</a></li>
				<li class="divider"></li>
				<li><a href="#/" class="material_dropdown_menu_link">Separated link</a></li>
			</ul>
		</div>
		<div class="btn-group material_btn_group">
			<button class="dropdown-toggle material_dropdown_btn material_btn material_btn_primary" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="true">
				Primary
				<span class="caret"></span>
			</button>
			<ul class="dropdown-menu material_dropdown_menu" role="menu">
				<li><a href="#/" class="material_dropdown_menu_link">Action</a></li>
				<li><a href="#/" class="material_dropdown_menu_link">Another action</a></li>
				<li><a href="#/" class="material_dropdown_menu_link">Something else here</a></li>
				<li class="divider"></li>
				<li><a href="#/" class="material_dropdown_menu_link">Separated link</a></li>
			</ul>
		</div>
		<div class="btn-group material_btn_group">
			<button class="dropdown-toggle material_dropdown_btn material_btn material_btn_success" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="true">
				Success
				<span class="caret"></span>
			</button>
			<ul class="dropdown-menu material_dropdown_menu" role="menu">
				<li><a href="#/" class="material_dropdown_menu_link">Action</a></li>
				<li><a href="#/" class="material_dropdown_menu_link">Another action</a></li>
				<li><a href="#/" class="material_dropdown_menu_link">Something else here</a></li>
				<li class="divider"></li>
				<li><a href="#/" class="material_dropdown_menu_link">Separated link</a></li>
			</ul>
		</div>
		<div class="btn-group material_btn_group">
			<button class="dropdown-toggle material_dropdown_btn material_btn material_btn_info" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="true">
				Info
				<span class="caret"></span>
			</button>
			<ul class="dropdown-menu material_dropdown_menu" role="menu">
				<li><a href="#/" class="material_dropdown_menu_link">Action</a></li>
				<li><a href="#/" class="material_dropdown_menu_link">Another action</a></li>
				<li><a href="#/" class="material_dropdown_menu_link">Something else here</a></li>
				<li class="divider"></li>
				<li><a href="#/" class="material_dropdown_menu_link">Separated link</a></li>
			</ul>
		</div>
		<div class="btn-group material_btn_group">
			<button class="dropdown-toggle material_dropdown_btn material_btn material_btn_warning" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="true">
				Warning
				<span class="caret"></span>
			</button>
			<ul class="dropdown-menu material_dropdown_menu" role="menu">
				<li><a href="#/" class="material_dropdown_menu_link">Action</a></li>
				<li><a href="#/" class="material_dropdown_menu_link">Another action</a></li>
				<li><a href="#/" class="material_dropdown_menu_link">Something else here</a></li>
				<li class="divider"></li>
				<li><a href="#/" class="material_dropdown_menu_link">Separated link</a></li>
			</ul>
		</div>
		<div class="btn-group material_btn_group">
			<button class="dropdown-toggle material_dropdown_btn material_btn material_btn_danger" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="true">
				Danger
				<span class="caret"></span>
			</button>
			<ul class="dropdown-menu material_dropdown_menu" role="menu">
				<li><a href="#/" class="material_dropdown_menu_link">Action</a></li>
				<li><a href="#/" class="material_dropdown_menu_link">Another action</a></li>
				<li><a href="#/" class="material_dropdown_menu_link">Something else here</a></li>
				<li class="divider"></li>
				<li><a href="#/" class="material_dropdown_menu_link">Separated link</a></li>
			</ul>
		</div>
	</div>
	
	<h3>Sizing</h3>
	<div class="bs-example" data-example-id="button-dropdown-sizing">
		<button class="btn btn-default btn-lg material_btn material_btn_lg" type="button" data-toggle="dropdown" aria-expanded="false">
		  Large button 
		</button>
		<button class="btn btn-default material_btn material_btn_primary" type="button" data-toggle="dropdown" aria-expanded="false">
		  Middle button 
		</button>
		<button class="btn btn-default btn-sm material_btn material_btn_sm material_btn_success" type="button" data-toggle="dropdown" aria-expanded="false">
		  Small button 
		</button>

		<button class="btn btn-default btn-xs material_btn material_btn_xs material_btn_info" type="button" data-toggle="dropdown" aria-expanded="false">
		  Extra small button 
		</button>
	  </div>
		
		<h3>Disabled state</h3>
		<button type="button" class="btn btn-lg btn-primary material_btn material_btn_primary" disabled="disabled">Disabled button</button>
			
		<h2 class="page-header">Inputs</h2>
		
		<div class="form-group materail_input_block">
			<input type="email" class="form-control materail_input" placeholder="Type text"/>
		</div>
		<div class="form-group  materail_input_block materail_input_success">
			<input type="email" class="form-control materail_input" placeholder="Success"/>
		</div>
		<div class="form-group materail_input_block materail_input_error">
			<input type="email" class="form-control materail_input" placeholder="Error"/>
		</div>
	
		<h2 class="page-header">Textarea</h2>
		<div class="form-group materail_input_block">
			<textarea class="form-control materail_input material_textarea" placeholder="Information"></textarea>
		</div>
				
		<h2 class="page-header">Radiobox</h2>
		<label class="material_radio_group" for="radio1">
			<input type="radio" name="radiobox" id="radio1" class="material_radiobox"/>
			<span class="material_check_radio"></span>
			LESS
		</label>
		<label class="material_radio_group" for="radio2">
			<input type="radio" name="radiobox" id="radio2" class="material_radiobox"/>
			<span class="material_check_radio"></span>
			SASS
		</label>
	
		<h2 class="page-header">Checkbox</h2>
		<div class="material_checkbox_group">
			<input type="checkbox" id="checkbox" name="checkbox" class="material_checkbox" />
			<label class="material_label_checkbox" for="checkbox">Do you like it?</label>
		</div>
		<div class="material_checkbox_group">
			<input type="checkbox" id="checkbox2" name="checkbox" class="material_checkbox material_checkbox_success" />
			<label class="material_label_checkbox" for="checkbox2">Success</label>
		</div>
		<div class="material_checkbox_group">
			<input type="checkbox" id="checkbox3" name="checkbox" class="material_checkbox material_checkbox_info" />
			<label class="material_label_checkbox" for="checkbox3">Info</label>
		</div>
		<div class="material_checkbox_group">
			<input type="checkbox" id="checkbox4" name="checkbox" class="material_checkbox material_checkbox_warning" />
			<label class="material_label_checkbox" for="checkbox4">Warning</label>
		</div>
		<div class="material_checkbox_group">
			<input type="checkbox" id="checkbox5" name="checkbox" class="material_checkbox material_checkbox_error" />
			<label class="material_label_checkbox" for="checkbox5">Error</label>
		</div>
		
		<h2 class="page-header">Switch</h2>
		<div class="materail_switch_group">
			<input class="materail_switch_input" type="checkbox" id="switch_input" />
			<label class="materail_switch_label" for="switch_input"></label>
		</div>
			
		<h2 class="page-header">Accordion</h2>
		<div class="panel-group material_accordion" id="accordion" role="tablist" aria-multiselectable="true">
			<div class="panel panel-default material_accordion_panel">
				<div class="panel-heading material_accordion_heading" role="tab" id="headingOne">
					<h4 class="panel-title">
						<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
							Collapsible Group Item #1
						</a>
					</h4>
				</div>
				<div id="collapseOne" class="panel-collapse collapse in material_accordion_collapse" role="tabpanel" aria-labelledby="headingOne">
					<div class="panel-body">
					Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
					</div>
				</div>
			</div>
			<div class="panel panel-default">
				<div class="panel-heading material_accordion_heading" role="tab" id="headingTwo">
					<h4 class="panel-title">
						<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
							Collapsible Group Item #2
						</a>
					</h4>
				</div>
				<div id="collapseTwo" class="panel-collapse collapse material_accordion_collapse" role="tabpanel" aria-labelledby="headingTwo">
					<div class="panel-body">
						Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
					</div>
				</div>
			</div>
		</div>
		
		
		<h2 class="page-header">Modal</h2>
		<button type="button" class="btn btn-primary material_btn material_btn_primary" data-toggle="modal" data-target="#myModal">
		  Launch demo modal
		</button>

		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		  <div class="modal-dialog material_modal_dialog">
			<div class="modal-content">
			  <div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
				<h4 class="modal-title" id="myModalLabel">Modal title</h4>
			  </div>
			  <div class="modal-body">
				WebGl generator is a component for creating original 3D models. You can use it to demonstrate various products and other things. In order to use generator first you need to create .OBJ file in any graphics editor such as 3D MAX or Blender. Then you can add this file in component's settings. show plugin →
			  </div>
			  <div class="modal-footer material_modal_footer">
				<button type="button" class="btn btn-default material_btn material_btn" data-dismiss="modal">Close</button>
				<button type="button" class="btn btn-primary material_btn material_btn_primary">Save changes</button>
			  </div>
			</div>
		  </div>
		</div>
	
    <h2 class="page-header">Pils</h2>
		<ul class="nav nav-pills material_pils">
			<li role="presentation" class="active"><a href="javascript:void(0)" class="material_pils_item">Home</a></li>
			<li role="presentation" class="disabled"><a href="javascript:void(0)" class="material_pils_item">disabled</a></li>
			<li role="presentation"><a href="javascript:void(0)" class="material_pils_item">Messages</a></li>
		</ul>
		
		<h2 class="page-header">Tabs</h2>
		<ul class="nav nav-tabs material_tabs">
			<li role="presentation" class="active"><a href="#home" class="material_tabs_item" data-toggle="tab">Home</a></li>
			<li role="presentation"><a href="#profile" class="material_tabs_item" data-toggle="tab">Profile</a></li>
			<li role="presentation" class="disabled"><a href="javascript:void(0)" class="material_tabs_item">disabled</a></li>
		</ul>
		<div id="myTabContent" class="tab-content materail_tab_content">
			  <div role="tabpanel" class="tab-pane fade active in" id="home" aria-labelledby="home-tab">
				<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
			  </div>
			  <div role="tabpanel" class="tab-pane fade" id="profile" aria-labelledby="profile-tab">
				<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
			  </div>
		</div>
			
		<h2 class="page-header">Navbar</h2>
		<nav class="navbar navbar-default material_navbar">
			<div class="container-fluid">
		
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" 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 material_navbar_brand" href="#/">Brand</a>
			</div>

			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
				<ul class="nav navbar-nav material_navbar_nav">
					<li class="active"><a href="#/" class="material_navbar_nav_item">Link <span class="sr-only">(current)</span></a></li>
					<li><a href="#/" class="material_navbar_nav_item">Link</a></li>
					<li class="dropdown">
						<a href="#/" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
						<ul class="dropdown-menu material_dropdown_menu" role="menu">
							<li><a href="#/" class="material_dropdown_menu_link">Action</a></li>
							<li><a href="#/" class="material_dropdown_menu_link">Another action</a></li>
							<li><a href="#/" class="material_dropdown_menu_link">Something else here</a></li>
							<li class="divider"></li>
							<li><a href="#/" class="material_dropdown_menu_link">Separated link</a></li>
							<li class="divider"></li>
							<li><a href="#/" class="material_dropdown_menu_link">One more separated link</a></li>
						</ul>
					</li>
				</ul>
				<form class="navbar-form navbar-left material_navbar_form" role="search">
					<div class="form-group materail_input_block">
						<input type="text"  class="form-control materail_input"  placeholder="Search"/>
					</div>
					<button type="submit" class="btn btn-default material_btn material_btn_sm">Submit</button>
					</form>
				<ul class="nav navbar-nav navbar-right">
					<li><a href="#/">Link</a></li>
					<li class="dropdown">
						<a href="#/" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
						<ul class="dropdown-menu material_dropdown_menu" role="menu">
							<li><a href="#/" class="material_dropdown_menu_link">Action</a></li>
							<li><a href="#/" class="material_dropdown_menu_link">Another action</a></li>
							<li><a href="#/" class="material_dropdown_menu_link">Something else here</a></li>
							<li class="divider"></li>
							<li><a href="#/" class="material_dropdown_menu_link">Separated link</a></li>
						</ul>
					</li>
				</ul>
			</div>
			</div>
		</nav>
		<nav class="navbar material_navbar material_navbar_primary">
			<div class="container-fluid">
		
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
					<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 material_navbar_brand" href="#/">Brand</a>
			</div>

			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
				<ul class="nav navbar-nav material_navbar_nav">
					<li class="active"><a href="#/" class="material_navbar_nav_item">Link <span class="sr-only">(current)</span></a></li>
					<li><a href="#/" class="material_navbar_nav_item">Link</a></li>
					<li class="dropdown">
						<a href="#/" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
						<ul class="dropdown-menu material_dropdown_menu" role="menu">
							<li><a href="#/" class="material_dropdown_menu_link">Action</a></li>
							<li><a href="#/" class="material_dropdown_menu_link">Another action</a></li>
							<li><a href="#/" class="material_dropdown_menu_link">Something else here</a></li>
							<li class="divider"></li>
							<li><a href="#/" class="material_dropdown_menu_link">Separated link</a></li>
							<li class="divider"></li>
							<li><a href="#/" class="material_dropdown_menu_link">One more separated link</a></li>
						</ul>
					</li>
				</ul>
				<form class="navbar-form navbar-left material_navbar_form" role="search">
					<div class="form-group materail_input_block">
						<input type="text"  class="form-control materail_input"  placeholder="Search"/>
					</div>
					<button type="submit" class="btn btn-default material_btn material_btn_sm">Submit</button>
					</form>
				<ul class="nav navbar-nav navbar-right material_navbar_nav">
					<li><a href="#/" class="material_navbar_nav_item">Link</a></li>
					<li class="dropdown">
						<a href="#/" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
						<ul class="dropdown-menu material_dropdown_menu" role="menu">
							<li><a href="#/" class="material_dropdown_menu_link">Action</a></li>
							<li><a href="#/" class="material_dropdown_menu_link">Another action</a></li>
							<li><a href="#/" class="material_dropdown_menu_link">Something else here</a></li>
							<li class="divider"></li>
							<li><a href="#/" class="material_dropdown_menu_link">Separated link</a></li>
						</ul>
					</li>
				</ul>
			</div>
			</div>
		</nav>
		
		<nav class="navbar material_navbar material_navbar_success">
			<div class="container-fluid">
		
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-3">
					<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 material_navbar_brand" href="#/">Brand</a>
			</div>

			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-3">
				<ul class="nav navbar-nav material_navbar_nav">
					<li class="active"><a href="#/" class="material_navbar_nav_item">Link <span class="sr-only">(current)</span></a></li>
					<li><a href="#/" class="material_navbar_nav_item">Link</a></li>
					<li class="dropdown">
						<a href="#/" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
						<ul class="dropdown-menu material_dropdown_menu" role="menu">
							<li><a href="#/" class="material_dropdown_menu_link">Action</a></li>
							<li><a href="#/" class="material_dropdown_menu_link">Another action</a></li>
							<li><a href="#/" class="material_dropdown_menu_link">Something else here</a></li>
							<li class="divider"></li>
							<li><a href="#/" class="material_dropdown_menu_link">Separated link</a></li>
							<li class="divider"></li>
							<li><a href="#/" class="material_dropdown_menu_link">One more separated link</a></li>
						</ul>
					</li>
				</ul>
				<form class="navbar-form navbar-left material_navbar_form" role="search">
					<div class="form-group materail_input_block">
						<input type="text"  class="form-control materail_input"  placeholder="Search"/>
					</div>
					<button type="submit" class="btn btn-default material_btn material_btn_sm">Submit</button>
					</form>
				<ul class="nav navbar-nav navbar-right material_navbar_nav">
					<li><a href="#/" class="material_navbar_nav_item">Link</a></li>
					<li class="dropdown">
						<a href="#/" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
						<ul class="dropdown-menu material_dropdown_menu" role="menu">
							<li><a href="#/" class="material_dropdown_menu_link">Action</a></li>
							<li><a href="#/" class="material_dropdown_menu_link">Another action</a></li>
							<li><a href="#/" class="material_dropdown_menu_link">Something else here</a></li>
							<li class="divider"></li>
							<li><a href="#/" class="material_dropdown_menu_link">Separated link</a></li>
						</ul>
					</li>
				</ul>
			</div>
			</div>
		</nav>
		
		<nav class="navbar material_navbar material_navbar_info">
			<div class="container-fluid">
		
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-4">
					<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 material_navbar_brand" href="#/">Brand</a>
			</div>

			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-4">
				<ul class="nav navbar-nav material_navbar_nav">
					<li class="active"><a href="#/" class="material_navbar_nav_item">Link <span class="sr-only">(current)</span></a></li>
					<li><a href="#/" class="material_navbar_nav_item">Link</a></li>
					<li class="dropdown">
						<a href="#/" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
						<ul class="dropdown-menu material_dropdown_menu" role="menu">
							<li><a href="#/" class="material_dropdown_menu_link">Action</a></li>
							<li><a href="#/" class="material_dropdown_menu_link">Another action</a></li>
							<li><a href="#/" class="material_dropdown_menu_link">Something else here</a></li>
							<li class="divider"></li>
							<li><a href="#/" class="material_dropdown_menu_link">Separated link</a></li>
							<li class="divider"></li>
							<li><a href="#/" class="material_dropdown_menu_link">One more separated link</a></li>
						</ul>
					</li>
				</ul>
				<form class="navbar-form navbar-left material_navbar_form" role="search">
					<div class="form-group materail_input_block">
						<input type="text"  class="form-control materail_input"  placeholder="Search"/>
					</div>
					<button type="submit" class="btn btn-default material_btn material_btn_sm">Submit</button>
					</form>
				<ul class="nav navbar-nav navbar-right material_navbar_nav">
					<li><a href="#/" class="material_navbar_nav_item">Link</a></li>
					<li class="dropdown">
						<a href="#/" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
						<ul class="dropdown-menu material_dropdown_menu" role="menu">
							<li><a href="#/" class="material_dropdown_menu_link">Action</a></li>
							<li><a href="#/" class="material_dropdown_menu_link">Another action</a></li>
							<li><a href="#/" class="material_dropdown_menu_link">Something else here</a></li>
							<li class="divider"></li>
							<li><a href="#/" class="material_dropdown_menu_link">Separated link</a></li>
						</ul>
					</li>
				</ul>
			</div>
			</div>
		</nav>
		
		<nav class="navbar material_navbar material_navbar_warning">
			<div class="container-fluid">
		
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-5">
					<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 material_navbar_brand" href="#/">Brand</a>
			</div>

			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-5">
				<ul class="nav navbar-nav material_navbar_nav">
					<li class="active"><a href="#/" class="material_navbar_nav_item">Link <span class="sr-only">(current)</span></a></li>
					<li><a href="#/" class="material_navbar_nav_item">Link</a></li>
					<li class="dropdown">
						<a href="#/" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
						<ul class="dropdown-menu material_dropdown_menu" role="menu">
							<li><a href="#/" class="material_dropdown_menu_link">Action</a></li>
							<li><a href="#/" class="material_dropdown_menu_link">Another action</a></li>
							<li><a href="#/" class="material_dropdown_menu_link">Something else here</a></li>
							<li class="divider"></li>
							<li><a href="#/" class="material_dropdown_menu_link">Separated link</a></li>
							<li class="divider"></li>
							<li><a href="#/" class="material_dropdown_menu_link">One more separated link</a></li>
						</ul>
					</li>
				</ul>
				<form class="navbar-form navbar-left material_navbar_form" role="search">
					<div class="form-group materail_input_block">
						<input type="text"  class="form-control materail_input"  placeholder="Search"/>
					</div>
					<button type="submit" class="btn btn-default material_btn material_btn_sm">Submit</button>
					</form>
				<ul class="nav navbar-nav navbar-right material_navbar_nav">
					<li><a href="#/" class="material_navbar_nav_item">Link</a></li>
					<li class="dropdown">
						<a href="#/" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
						<ul class="dropdown-menu material_dropdown_menu" role="menu">
							<li><a href="#/" class="material_dropdown_menu_link">Action</a></li>
							<li><a href="#/" class="material_dropdown_menu_link">Another action</a></li>
							<li><a href="#/" class="material_dropdown_menu_link">Something else here</a></li>
							<li class="divider"></li>
							<li><a href="#/" class="material_dropdown_menu_link">Separated link</a></li>
						</ul>
					</li>
				</ul>
			</div>
			</div>
		</nav>
		
		<nav class="navbar material_navbar material_navbar_danger">
			<div class="container-fluid">
		
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-6">
					<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 material_navbar_brand" href="#/">Brand</a>
			</div>

			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-6">
				<ul class="nav navbar-nav material_navbar_nav">
					<li class="active"><a href="#/" class="material_navbar_nav_item">Link <span class="sr-only">(current)</span></a></li>
					<li><a href="#/" class="material_navbar_nav_item">Link</a></li>
					<li class="dropdown">
						<a href="#/" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
						<ul class="dropdown-menu material_dropdown_menu" role="menu">
							<li><a href="#/" class="material_dropdown_menu_link">Action</a></li>
							<li><a href="#/" class="material_dropdown_menu_link">Another action</a></li>
							<li><a href="#/" class="material_dropdown_menu_link">Something else here</a></li>
							<li class="divider"></li>
							<li><a href="#/" class="material_dropdown_menu_link">Separated link</a></li>
							<li class="divider"></li>
							<li><a href="#/" class="material_dropdown_menu_link">One more separated link</a></li>
						</ul>
					</li>
				</ul>
				<form class="navbar-form navbar-left material_navbar_form" role="search">
					<div class="form-group materail_input_block">
						<input type="text"  class="form-control materail_input"  placeholder="Search"/>
					</div>
					<button type="submit" class="btn btn-default material_btn material_btn_sm">Submit</button>
					</form>
				<ul class="nav navbar-nav navbar-right material_navbar_nav">
					<li><a href="#/" class="material_navbar_nav_item">Link</a></li>
					<li class="dropdown">
						<a href="#/" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
						<ul class="dropdown-menu material_dropdown_menu" role="menu">
							<li><a href="#/" class="material_dropdown_menu_link">Action</a></li>
							<li><a href="#/" class="material_dropdown_menu_link">Another action</a></li>
							<li><a href="#/" class="material_dropdown_menu_link">Something else here</a></li>
							<li class="divider"></li>
							<li><a href="#/" class="material_dropdown_menu_link">Separated link</a></li>
						</ul>
					</li>
				</ul>
			</div>
			</div>
		</nav>
	
		<h2 class="page-header">Breadcrumbs</h2>
		<ol class="breadcrumb material_breadcrumb">
			<li><a href="#/" class="material_breadcrumb_item">Home</a></li>
			<li><a href="#/" class="material_breadcrumb_item">Library</a></li>
			<li class="active">Data</li>
		</ol>
		<ol class="breadcrumb material_breadcrumb">
			<li><a href="#/" class="material_breadcrumb_item">Home</a></li>
			<li class="active">Library</li>
		</ol>
	
		<h2 class="page-header">Pagination</h2>
		<ul class="pagination material_pagination">
			<li>
				<a href="#/" aria-label="Previous" class="material_pagination_item">
					<span aria-hidden="true">«</span>
				</a>
			</li>
			<li><a href="#/" class="material_pagination_item">1</a></li>
			<li class="active"><a href="#/" class="material_pagination_item">2</a></li>
			<li><a href="#/" class="material_pagination_item">3</a></li>
			<li class="disabled"><a href="#/" class="material_pagination_item">4</a></li>
			<li><a href="#/" class="material_pagination_item">5</a></li>
			<li>
				<a href="#/" aria-label="Next" class="material_pagination_item">
					<span aria-hidden="true">»</span>
				</a>
			</li>
		</ul>
	
		<h2 class="page-header">Labels</h2>
		<span class="label label-default materail_label materail_label_default">Default</span>
		<span class="label label-primary materail_label materail_label_primary">Primary</span>
		<span class="label label-success materail_label materail_label_success">Success</span>
		<span class="label label-info materail_label materail_label_info">Info</span>
		<span class="label label-warning materail_label materail_label_warning">Warning</span>
		<span class="label label-danger materail_label materail_label_danger">Danger</span>
		
		<h2 class="page-header">Badges</h2>
		<a href="#/">Inbox <span class="badge material_badge">10</span></a>
		<button class="btn btn-primary material_btn material_btn_info" type="button">
			Messages <span class="badge material_badge">4</span>
		</button>
		<button class="btn btn-primary material_btn material_btn_warning" type="button">
			Warning <span class="badge material_badge">20</span>
		</button>
		
		<h2 class="page-header">Custom content</h2>
		<div class="row">
			<div class="col-sm-6 col-md-4">
				<div class="thumbnail material_thumbnail">
					<img src="http://stas-melnikov.ru/responsive_elements/images/image640.jpg" alt="Thumbnail label" />
					<div class="caption material_caption">
						<h3>Thumbnail label</h3>
						<p>Nulla consequat massa quis enim. Donec pede justo</p>
						<p><a href="#/" class="btn btn-default material_btn" role="button">Link</a></p>
					</div>
				</div>
			</div>
			<div class="col-sm-6 col-md-4">
				<div class="thumbnail material_thumbnail">
					<img src="http://stas-melnikov.ru/responsive_elements/images/image640.jpg" alt="Thumbnail label" />
					<div class="caption material_caption">
						<h3>Thumbnail label</h3>
						<p>Nulla consequat massa quis enim. Donec pede justo</p>
						<p><a href="#/" class="btn btn-default material_btn" role="button">Link</a></p>
					</div>
				</div>
			</div>
			<div class="col-sm-6 col-md-4">
				<div class="thumbnail material_thumbnail">
					<img src="http://stas-melnikov.ru/responsive_elements/images/image640.jpg" alt="Thumbnail label" />
					<div class="caption material_caption">
						<h3>Thumbnail label</h3>
						<p>Nulla consequat massa quis enim. Donec pede justo</p>
						<p><a href="#/" class="btn btn-default material_btn" role="button">Link</a></p>
					</div>
				</div>
			</div>
		</div>
		
		<h2 class="page-header">Alerts</h2>
		<div class="alert alert-success material_alert material_alert_primary" role="alert">Primary.</div>
		<div class="alert alert-success material_alert material_alert_success" role="alert">Well done! You successfully read this important alert message.</div>
		<div class="alert alert-info material_alert material_alert_info" role="alert">Heads up! This alert needs your attention, but it's not super important.</div>
		<div class="alert alert-warning material_alert material_alert_warning" role="alert">Warning! Better check yourself, you're not looking too good.</div>
		<div class="alert alert-danger material_alert material_alert_danger" role="alert">
			Oh snap! Change a few things up and try submitting again.
			<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
		</div>
			
		<h2 class="page-header">Progress bars</h2>
		<div class="progress material_progress">
			<div class="progress-bar progress-bar-primary material_progress_primary" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style={{/*width: 10%*/}}>
				<span class="sr-only">10% Complete (primary)</span>
			</div>
		</div>
		<div class="progress material_progress">
			<div class="progress-bar progress-bar-striped active progress-bar-success material_progress_success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style={{/*width: 40%*/}}>
				<span class="sr-only">40% Complete (success)</span>
			</div>
		</div>
		<div class="progress material_progress">
			<div class="progress-bar progress-bar-info material_progress_info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style={{/*width: 20%*/}}>
				<span class="sr-only">20% Complete</span>
			</div>
		</div>
		<div class="progress material_progress">
			<div class="progress-bar progress-bar-warning material_progress_warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style={{/*width: 60%*/}}>
				<span class="sr-only">60% Complete (warning)</span>
			</div>
		</div>
		<div class="progress material_progress">
			<div class="progress-bar progress-bar-danger progress-bar-striped active material_progress_danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style={{/*width: 80%*/}}>
				<span class="sr-only">80% Complete (danger)</span>
			</div>
		</div>
	
		<h2 class="page-header">Media alignment</h2>
		<div class="media material_media">
			<div class="media-left">
				<a href="#/">
					<img class="media-object material_media_object" data-src="holder.js/64x64" alt="64x64" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGRlZnMvPjxyZWN0IHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjE0LjUiIHk9IjMyIiBzdHlsZT0iZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQ7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+NjR4NjQ8L3RleHQ+PC9nPjwvc3ZnPg==" data-holder-rendered="true" style={{/*width: 64px; height: 64px;*/}}/>
				</a>
			</div>
			<div class="media-body material_media_body">
				<h4 class="media-heading material_media_heading">Title media</h4>
				<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
				<p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
			</div>
		</div>
		<div class="media material_media">
			<div class="media-left">
				<a href="#/">
					<img class="media-object material_media_object" data-src="holder.js/64x64" alt="64x64" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGRlZnMvPjxyZWN0IHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjE0LjUiIHk9IjMyIiBzdHlsZT0iZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQ7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+NjR4NjQ8L3RleHQ+PC9nPjwvc3ZnPg==" data-holder-rendered="true" style={{/*width: 64px; height: 64px;*/}}/>
				</a>
			</div>
			<div class="media-body">
				<h4 class="media-heading material_media_heading">Title media</h4>
				<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
				<p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
			</div>
		</div>
		
		<h1 class="page-header">List group</h1>
		<h3 class="page-header">Basic example</h3>
		<ul class="list-group material_list_group">
			<li class="list-group-item material_list_group_item">Cras justo odio</li>
			<li class="list-group-item material_list_group_item">Dapibus ac facilisis in</li>
			<li class="list-group-item material_list_group_item disabled">Morbi leo risus</li>
			<li class="list-group-item material_list_group_item">Porta ac consectetur ac</li>
			<li class="list-group-item material_list_group_item">Vestibulum at eros</li>
		</ul>
		
		<h3 class="page-header">Badges example</h3>
		<ul class="list-group material_list_group">
			<li class="list-group-item material_list_group_item">
				<span class="badge material_badge">14</span>
				Cras justo odio
			</li>
			<li class="list-group-item material_list_group_item">
				<span class="badge material_badge">5</span>
				Cras justo odio
			</li>
		</ul>
				
		<h1 class="page-header">Panels</h1>
		<div class="panel panel-default material_panel">
			<div class="panel-heading material_panel_heading">Panel heading without title</div>
			<div class="panel-body material_panel_body">Panel content</div>
		</div>
		<div class="panel panel-default material_panel material_panel_primary">
			<div class="panel-heading material_panel_heading">Panel heading without title</div>
			<div class="panel-body material_panel_body">Panel content</div>
		</div>
		<div class="panel panel-default material_panel material_panel_success">
			<div class="panel-heading material_panel_heading">Panel heading without title</div>
			<div class="panel-body material_panel_body">Panel content</div>
		</div>
		<div class="panel panel-default material_panel material_panel_warning">
			<div class="panel-heading material_panel_heading">Panel heading without title</div>
			<div class="panel-body material_panel_body">Panel content</div>
		</div>
		<div class="panel panel-default material_panel material_panel_info">
			<div class="panel-heading material_panel_heading">Panel heading without title</div>
			<div class="panel-body material_panel_body">Panel content</div>
		</div>
		<div class="panel panel-default material_panel material_panel_danger">
			<div class="panel-heading material_panel_heading">Panel heading without title</div>
			<div class="panel-body material_panel_body">Panel content</div>
		</div>
		
	
</div>
<footer class="footer">
	<div class="main_container">
		<div class="copyright">
			<a target="blank" href="https://www.linkedin.com/in/melnik909">Developed by Stas Melnikov</a>
		</div>
	</div>
</footer>

		</div>
	);
}
export default App;

4. Now we need to add below code into our my-awesome-project/src/App.css file :

/*
Material bootstrap theme
author: Developed by Stas Melnikov. http://stas-melnikov.ru
e-mail: [email protected]
linkedIn: https://www.linkedin.com/in/melnik909
github: https://github.com/melnik909
facebook: https://www.facebook.com/melnik909
*/
body {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 16px;
}
/**************************Typography*************************/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}
/**************************Dropdowns*************************/
.material_dropdown {
  border-bottom: 1px solid #eee;
  width: 200px;
}
.material_dropdown_menu {
  position: absolute;
  top: 0;
  margin: 0;
  padding: 0;
  border-radius: 0;
  width: 100%;
}
.material_dropdown_menu .material_dropdown_menu_link {
  text-decoration: none;
  font-size: 12px;
  padding: 8px 20px;
  display: block;
  -webkit-transition: background-color 0.8s ease-out 0s;
  transition: background-color 0.8s ease-out 0s;
}
.material_dropdown_menu .material_dropdown_menu_link:hover {
  background-color: #eee;
}
.material_dropdown_menu .divider {
  margin: 0;
}
.material_dropdown_btn {
  border-radius: 0;
  border: none;
  width: 100%;
  text-align: left;
  background: none;
}
.material_dropdown_btn .caret {
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -2px;
}
/**************************Buttons*************************/
.material_btn {
  position: relative;
  font-weight: 300;
  color: #222;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 0;
  border: 1px solid #eeeeee;
  -webkit-transition-property: box-shadow, background-color;
  transition-property: box-shadow, background-color;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.material_btn:hover {
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.42);
  background: #eee;
}
.material_btn:active {
  box-shadow: none;
}
.material_btn:focus {
  background: #c9c9c9;
  outline: 0 !important;
}
.material_btn_lg,
.material_btn_group_lg .material_btn {
  padding: 12px 25px;
}
.material_btn_sm,
.material_btn_group_sm .material_btn {
  padding: 8px 15px;
}
.material_btn_xs,
.material_btn_group_xs .material_btn {
  padding: 5px 10px;
}
.material_btn_primary {
  background-color: #4092d9;
  border: 1px solid #4092d9;
  color: #fff;
}
.material_btn_primary:hover {
  color: #fff;
  box-shadow: 0 6px 10px #64b2f5;
  background-color: #64b2f5;
}
.material_btn_primary:active {
  background-color: #3488d1;
  box-shadow: none;
}
.material_btn_primary:focus {
  background-color: #3488d1;
  color: #fff;
}
.material_btn_success {
  background-color: #68c368;
  border: 1px solid #68c368;
  color: #fff;
}
.material_btn_success:hover {
  color: #fff;
  box-shadow: 0 6px 10px #66d566;
  background-color: #66d566;
}
.material_btn_success:active {
  background-color: #22ac22;
  box-shadow: none;
}
.material_btn_success:focus {
  background-color: #22ac22;
  color: #fff;
}
.material_btn_info {
  background-color: #6acce9;
  border: 1px solid #6acce9;
  color: #fff;
}
.material_btn_info:hover {
  color: #fff;
  box-shadow: 0 6px 10px #8bdaf2;
  background-color: #8bdaf2;
}
.material_btn_info:active {
  background-color: #3ab4d8;
  box-shadow: none;
}
.material_btn_info:focus {
  background-color: #3ab4d8;
  color: #fff;
}
.material_btn_warning {
  background-color: #f2a12e;
  border: 1px solid #f2a12e;
  color: #fff;
}
.material_btn_warning:hover {
  color: #fff;
  box-shadow: 0 6px 10px #fab655;
  background-color: #fab655;
}
.material_btn_warning:active {
  background-color: #d3953c;
  box-shadow: none;
}
.material_btn_warning:focus {
  background-color: #d3953c;
  color: #fff;
}
.material_btn_danger {
  background-color: #f3413c;
  border: 1px solid #f3413c;
  color: #fff;
}
.material_btn_danger:hover {
  color: #fff;
  box-shadow: 0 6px 10px #f36c68;
  background-color: #f36c68;
}
.material_btn_danger:active {
  background-color: #c72a25;
  box-shadow: none;
}
.material_btn_danger:focus {
  background-color: #c72a25;
  color: #fff;
}
.material_btn_group .material_btn {
  border-radius: 0;
}
.material_btn_group .material_dropdown_btn {
  padding: 10px 30px 10px 20px;
}
.material_btn_group .caret {
  right: 10px;
}
.material_btn_toggle {
  height: 100%;
}
/*********************************Inputs************************/
.materail_input_block {
  position: relative;
  overflow: hidden;
}
.materail_input_block:after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  position: absolute;
  bottom: 0;
  background-color: #36bae2;
  -webkit-transition: transform 0.2s ease-out 0s;
  transition: transform 0.2s ease-out 0s;
  -ms-transform: translateZ(0px) translate(-110%, 0);
  -webkit-transform: translateZ(0px) translate(-110%, 0);
  transform: translateZ(0px) translate(-110%, 0);
}
.materail_input_block:hover:after {
  -ms-transform: translateZ(0px) translate(0%, 0);
  -webkit-transform: translateZ(0px) translate(0%, 0);
  transform: translateZ(0px) translate(0%, 0);
}
.materail_input_block .materail_input {
  height: 35px;
  width: 100%;
  padding: 5px 1%;
  border: none;
  border-bottom: 2px solid #eee;
  border-radius: 0;
  color: #76719a;
  box-shadow: none;
}
.materail_input_block .materail_input:focus {
  outline: 0;
  border-bottom-color: #36bae2;
}
.materail_input_success .input_text:focus {
  border-bottom-color: #44c65d;
}
.materail_input_success:after {
  background-color: #44c65d;
}
.materail_input_success .materail_input:focus {
  outline: 0;
  border-bottom-color: #44c65d;
}
.materail_input_error .input_text:focus {
  border-bottom-color: #ed3748;
}
.materail_input_error:after {
  background-color: #ed3748;
}
.materail_input_error .materail_input:focus {
  outline: 0;
  border-bottom-color: #ed3748;
}
.material_textarea {
  min-width: 100%;
  max-width: 100%;
  min-height: 50px;
  max-height: 100px;
}
/*****************Radiobox********************/
.material_radio_group {
  cursor: pointer;
}
.material_radiobox {
  display: none;
}
.material_check_radio {
  width: 20px;
  height: 20px;
  background-color: #fff;
  border: 2px solid #4092d9;
  border-radius: 50%;
  cursor: pointer;
  margin: 0 5px 0 0;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  -webkit-transition: border-color 0.2s linear 0s;
  transition: border-color 0.2s linear 0s;
}
.material_check_radio:after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #4092d9;
  position: absolute;
  left: 3px;
  top: 3px;
  -ms-transform: translateZ(0) translate(0, 0) scale(0);
  -webkit-transform: translateZ(0) translate(0, 0) scale(0);
  transform: translateZ(0) translate(0, 0) scale(0);
  -webkit-transition: transform 0.2s linear 0s;
  transition: transform 0.2s linear 0s;
}
.material_radiobox:checked ~ .material_check_radio:after {
  -ms-transform: translateZ(0) translate(0, 0) scale(2);
  -webkit-transform: translateZ(0) translate(0, 0) scale(2);
  transform: translateZ(0) translate(0, 0) scale(2);
}
.material_radio_group .material_check_radio:active {
  border-color: #4092d9;
}
/*****************Checkbox********************/
.material_label_checkbox {
  position: relative;
  display: block;
  padding-left: 40px;
  cursor: pointer;
  height: 25px;
}
.material_label_checkbox:after {
  content: '';
  display: block;
  -ms-transform: scaleX(-1) rotate(135deg);
  -webkit-transform: scaleX(-1) rotate(135deg);
  transform: scaleX(-1) rotate(135deg);
  -ms-transform-origin: left top;
  -webkit-transform-origin: left top;
  transform-origin: left top;
  border-right: 2px solid #cee;
  border-top: 2px solid #cee;
  position: absolute;
  left: 5px;
  top: 15px;
  width: 5px;
  height: 15px;
}
.material_label_checkbox:hover:after {
  border-color: #bdd;
}
.material_label_checkbox:before {
  content: "";
  display: block;
  width: 25px;
  height: 25px;
  border: 1px solid #eee;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  position: absolute;
  left: 0;
}
.material_checkbox {
  display: none;
}
.material_checkbox:checked + label:after {
  -webkit-animation: check 0.8s;
  animation: check 0.8s;
  border-color: #4092d9;
}
.material_checkbox_success:checked + label:after {
  border-color: #68c368;
}
.material_checkbox_info:checked + label:after {
  border-color: #6acce9;
}
.material_checkbox_warning:checked + label:after {
  border-color: #f2a12e;
}
.material_checkbox_error:checked + label:after {
  border-color: #c14f4c;
}
@-webkit-keyframes check {
  0% {
    height: 0;
    width: 0;
  }
  25% {
    height: 0;
    width: 5px;
  }
  50% {
    height: 15px;
    width: 5px;
  }
}
@keyframes check {
  0% {
    height: 0;
    width: 0;
  }
  25% {
    height: 0;
    width: 5px;
  }
  50% {
    height: 15px;
    width: 5рx;
  }
}
/*************Switch*************/
.materail_switch_input {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
}
.materail_switch_label {
  display: block;
  position: relative;
  cursor: pointer;
  width: 50px;
  height: 10px;
  padding: 2px;
  background-color: #dddddd;
  border-radius: 60px;
}
.materail_switch_label:before,
.materail_switch_label:after {
  display: block;
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
}
.materail_switch_label:before {
  right: 1px;
  background-color: #f1f1f1;
  border-radius: 60px;
  -webkit-transition: background 0.9s ease-out 0s;
  transition: background 0.9s ease-out 0s;
}
.materail_switch_label:after {
  height: 30px;
  width: 29px;
  background-color: #fff;
  border-radius: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  top: -10px;
  -ms-transform: translateZ(0px) translate(0, 0);
  -webkit-transform: translateZ(0px) translate(0, 0);
  transform: translateZ(0px) translate(0, 0);
  -webkit-transition-property: transform, background-color;
  transition-property: transform, background-color;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.materail_switch_input:checked + .materail_switch_label:before {
  background-color: #4092d9;
}
.materail_switch_input:checked + .materail_switch_label:after {
  -ms-transform: translateZ(0px) translate(30px, 0);
  -webkit-transform: translateZ(0px) translate(30px, 0);
  transform: translateZ(0px) translate(30px, 0);
  background-color: #4092d9;
}
/*************Accordion*************/
.material_accordion .material_accordion_panel,
.material_accordion .material_accordion_heading {
  border: none;
  border-radius: 0;
}
.material_accordion .material_accordion_heading {
  background-color: rgba(54, 186, 226, 0.5);
}
.material_accordion .material_accordion_heading a {
  color: #fff;
  -webkit-transition: color 0.3s ease-out 0s;
  transition: color 0.3s ease-out 0s;
}
.material_accordion .material_accordion_collapse {
  box-shadow: 0 6px 13px rgba(0, 0, 0, 0.12);
}
/*************Modal*************/
.material_modal_dialog .modal-content {
  border-radius: 0;
}
.material_modal_dialog .material_modal_footer {
  border-top: none;
}
/*************Pils*************/
.material_pils .material_pils_item {
  border-radius: 0 !important;
  -webkit-transition-property: background-color, color;
  transition-property: background-color, color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.material_pils .material_pils_item:hover,
.material_pils .active .material_pils_item {
  background-color: #4092d9;
  color: #fff;
}
/*********************Tabs***************/
.material_tabs .material_tabs_item {
  text-align: center;
  vertical-align: top;
  padding: 15px 20px;
  border: none !important;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  font-size: 14px;
  color: #000;
  -webkit-transition: color 0.5s ease-out 0.1s;
  transition: color 0.5s ease-out 0.1s;
}
.material_tabs .material_tabs_item:hover,
.material_tabs .material_tabs_item:active,
.material_tabs .material_tabs_item:focus {
  background: none;
  outline: none;
}
.material_tabs .material_tabs_item:before,
.material_tabs .material_tabs_item:after {
  content: "";
  display: block;
  background-color: #4092d9;
  width: 25%;
  height: 2px;
  position: absolute;
  bottom: 0;
  left: 50%;
  -ms-transform: translateZ(0px) translate(-50%, 0);
  -webkit-transform: translateZ(0px) translate(-50%, 0);
  transform: translateZ(0px) translate(-50%, 0);
  -webkit-transition: width 0.5s ease-out 0.1s;
  transition: width 0.5s ease-out 0.1s;
}
.material_tabs .material_tabs_item:hover:before,
.material_tabs .material_tabs_item:hover:after {
  width: 100%;
}
.material_tabs .active .material_tabs_item:before,
.material_tabs .active .material_tabs_item:after {
  width: 100%;
}
.material_tabs .material_tabs_item:hover,
.material_tabs .active .material_tabs_item {
  color: #4092d9;
}
.material_tabs .disabled .material_tabs_item:before,
.material_tabs .disabled .material_tabs_item:after {
  width: 25%;
}
.materail_tab_content {
  padding: 15px 20px;
  box-shadow: 0 6px 13px rgba(0, 0, 0, 0.12);
}
/*****************************Navbar***********************/
.material_navbar {
  border-radius: 0;
}
.material_navbar .material_navbar_brand {
  -webkit-transition-property: background-color, color;
  transition-property: background-color, color;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.material_navbar .material_navbar_nav_item {
  -webkit-transition-property: background-color, color;
  transition-property: background-color, color;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.material_navbar .material_navbar_nav .material_navbar_nav_item:hover,
.material_navbar .material_navbar_nav .active .material_navbar_nav_item {
  background-color: #e7e7e7 ;
}
.material_navbar .material_dropdown_menu {
  width: auto;
}
.material_navbar .material_navbar_form {
  margin-bottom: 0;
}
.material_navbar .materail_input {
  background-color: transparent;
}
.material_navbar .materail_input:focus {
  outline: 0;
  border-bottom-color: #fefefe;
}
.material_navbar_primary {
  background-color: #4092d9;
}
.material_navbar_primary .material_navbar_brand,
.material_navbar_primary .material_navbar_nav .material_navbar_nav_item,
.material_navbar_primary .dropdown-toggle,
.material_navbar_primary .material_navbar_form .materail_input {
  color: #fff;
}
.material_navbar_primary .material_navbar_form .materail_input::-moz-placeholder {
  color: #fff;
}
.material_navbar_primary .material_navbar_form .materail_input::-webkit-input-placeholder {
  color: #fff;
}
.material_navbar_primary .material_navbar_nav .dropdown a {
  -webkit-transition: color 0.5s ease-out 0s;
  transition: color 0.5s ease-out 0s;
}
.material_navbar_primary .material_navbar_brand:hover,
.material_navbar_primary .material_navbar_nav .dropdown a:hover,
.material_navbar_primary .material_navbar_nav .material_navbar_nav_item:hover,
.material_navbar_primary .material_navbar_nav .active .material_navbar_nav_item,
.material_navbar_primary .material_navbar_nav .active .material_navbar_nav_item:hover,
.material_navbar_primary .material_navbar_nav .open .dropdown-toggle,
.material_navbar_primary .material_navbar_nav .open .dropdown-toggle:hover,
.material_navbar_primary .navbar-toggle .icon-bar {
  background-color: #fefefe;
  color: #000000;
}
.material_navbar_primary .material_navbar_nav .open .dropdown-toggle,
.material_navbar_primary .material_navbar_nav .open .dropdown-toggle:hover {
  color: #000000;
}
.material_navbar_primary .material_navbar_nav .dropdown .material_dropdown_menu_link:hover {
  color: #fff;
  background-color: #4092d9;
}
.material_navbar_primary .navbar-toggle:focus,
.material_navbar_primary .navbar-toggle:hover {
  background: none;
}
.material_navbar_primary .materail_input_block:after,
.material_navbar_primary .materail_input_block:focus,
.material_navbar_primary .materail_input_block:active {
  background-color: #7aaad3;
}
.material_navbar_primary .materail_input:focus {
  outline: 0;
  border-bottom-color: #7aaad3;
}
.material_navbar_success {
  background-color: #68c368;
}
.material_navbar_success .material_navbar_brand,
.material_navbar_success .material_navbar_nav .material_navbar_nav_item,
.material_navbar_success .dropdown-toggle,
.material_navbar_success .material_navbar_form .materail_input {
  color: #fff;
}
.material_navbar_success .material_navbar_form .materail_input::-moz-placeholder {
  color: #fff;
}
.material_navbar_success .material_navbar_form .materail_input::-webkit-input-placeholder {
  color: #fff;
}
.material_navbar_success .material_navbar_nav .dropdown a {
  -webkit-transition: color 0.5s ease-out 0s;
  transition: color 0.5s ease-out 0s;
}
.material_navbar_success .material_navbar_brand:hover,
.material_navbar_success .material_navbar_nav .dropdown a:hover,
.material_navbar_success .material_navbar_nav .material_navbar_nav_item:hover,
.material_navbar_success .material_navbar_nav .active .material_navbar_nav_item,
.material_navbar_success .material_navbar_nav .active .material_navbar_nav_item:hover,
.material_navbar_success .material_navbar_nav .open .dropdown-toggle,
.material_navbar_success .material_navbar_nav .open .dropdown-toggle:hover,
.material_navbar_success .navbar-toggle .icon-bar {
  background-color: #fefefe;
  color: #000000;
}
.material_navbar_success .material_navbar_nav .open .dropdown-toggle,
.material_navbar_success .material_navbar_nav .open .dropdown-toggle:hover {
  color: #000000;
}
.material_navbar_success .material_navbar_nav .dropdown .material_dropdown_menu_link:hover {
  color: #fff;
  background-color: #68c368;
}
.material_navbar_success .navbar-toggle:focus,
.material_navbar_success .navbar-toggle:hover {
  background: none;
}
.material_navbar_success .materail_input_block:after,
.material_navbar_success .materail_input_block:focus,
.material_navbar_success .materail_input_block:active {
  background-color: #61da61;
}
.material_navbar_success .materail_input:focus {
  outline: 0;
  border-bottom-color: #61da61;
}
.material_navbar_info {
  background-color: #6acce9;
}
.material_navbar_info .material_navbar_brand,
.material_navbar_info .material_navbar_nav .material_navbar_nav_item,
.material_navbar_info .dropdown-toggle,
.material_navbar_info .material_navbar_form .materail_input {
  color: #fff;
}
.material_navbar_info .material_navbar_form .materail_input::-moz-placeholder {
  color: #fff;
}
.material_navbar_info .material_navbar_form .materail_input::-webkit-input-placeholder {
  color: #fff;
}
.material_navbar_info .material_navbar_nav .dropdown a {
  -webkit-transition: color 0.5s ease-out 0s;
  transition: color 0.5s ease-out 0s;
}
.material_navbar_info .material_navbar_brand:hover,
.material_navbar_info .material_navbar_nav .dropdown a:hover,
.material_navbar_info .material_navbar_nav .material_navbar_nav_item:hover,
.material_navbar_info .material_navbar_nav .active .material_navbar_nav_item,
.material_navbar_info .material_navbar_nav .active .material_navbar_nav_item:hover,
.material_navbar_info .material_navbar_nav .open .dropdown-toggle,
.material_navbar_info .material_navbar_nav .open .dropdown-toggle:hover,
.material_navbar_info .navbar-toggle .icon-bar {
  background-color: #fefefe;
  color: #000000;
}
.material_navbar_info .material_navbar_nav .open .dropdown-toggle,
.material_navbar_info .material_navbar_nav .open .dropdown-toggle:hover {
  color: #000000;
}
.material_navbar_info .material_navbar_nav .dropdown .material_dropdown_menu_link:hover {
  color: #fff;
  background-color: #6acce9;
}
.material_navbar_info .navbar-toggle:focus,
.material_navbar_info .navbar-toggle:hover {
  background: none;
}
.material_navbar_info .materail_input_block:after,
.material_navbar_info .materail_input_block:focus,
.material_navbar_info .materail_input_block:active {
  background-color: #4aa0ba;
}
.material_navbar_info .materail_input:focus {
  outline: 0;
  border-bottom-color: #4aa0ba;
}
.material_navbar_warning {
  background-color: #f2a12e;
}
.material_navbar_warning .material_navbar_brand,
.material_navbar_warning .material_navbar_nav .material_navbar_nav_item,
.material_navbar_warning .dropdown-toggle,
.material_navbar_warning .material_navbar_form .materail_input {
  color: #fff;
}
.material_navbar_warning .material_navbar_form .materail_input::-moz-placeholder {
  color: #fff;
}
.material_navbar_warning .material_navbar_form .materail_input::-webkit-input-placeholder {
  color: #fff;
}
.material_navbar_warning .material_navbar_nav .dropdown a {
  -webkit-transition: color 0.5s ease-out 0s;
  transition: color 0.5s ease-out 0s;
}
.material_navbar_warning .material_navbar_brand:hover,
.material_navbar_warning .material_navbar_nav .dropdown a:hover,
.material_navbar_warning .material_navbar_nav .material_navbar_nav_item:hover,
.material_navbar_warning .material_navbar_nav .active .material_navbar_nav_item,
.material_navbar_warning .material_navbar_nav .active .material_navbar_nav_item:hover,
.material_navbar_warning .material_navbar_nav .open .dropdown-toggle,
.material_navbar_warning .material_navbar_nav .open .dropdown-toggle:hover,
.material_navbar_warning .navbar-toggle .icon-bar {
  background-color: #fefefe;
  color: #000000;
}
.material_navbar_warning .material_navbar_nav .open .dropdown-toggle,
.material_navbar_warning .material_navbar_nav .open .dropdown-toggle:hover {
  color: #000000;
}
.material_navbar_warning .navbar-toggle:focus,
.material_navbar_warning .navbar-toggle:hover {
  background: none;
}
.material_navbar_warning .materail_input_block:after,
.material_navbar_warning .materail_input_block:focus,
.material_navbar_warning .materail_input_block:active {
  background-color: #b6781f;
}
.material_navbar_warning .material_navbar_nav .dropdown .material_dropdown_menu_link:hover {
  color: #fff;
  background-color: #f2a12e;
}
.material_navbar_warning .materail_input:focus {
  outline: 0;
  border-bottom-color: #f2a12e;
}
.material_navbar_danger {
  background-color: #f3413c;
}
.material_navbar_danger .material_navbar_brand,
.material_navbar_danger .material_navbar_nav .material_navbar_nav_item,
.material_navbar_danger .dropdown-toggle,
.material_navbar_danger .material_navbar_form .materail_input {
  color: #fff;
}
.material_navbar_danger .material_navbar_form .materail_input::-moz-placeholder {
  color: #fff;
}
.material_navbar_danger .material_navbar_form .materail_input::-webkit-input-placeholder {
  color: #fff;
}
.material_navbar_danger .material_navbar_nav .dropdown a {
  -webkit-transition: color 0.5s ease-out 0s;
  transition: color 0.5s ease-out 0s;
}
.material_navbar_danger .material_navbar_brand:hover,
.material_navbar_danger .material_navbar_nav .dropdown a:hover,
.material_navbar_danger .material_navbar_nav .material_navbar_nav_item:hover,
.material_navbar_danger .material_navbar_nav .active .material_navbar_nav_item,
.material_navbar_danger .material_navbar_nav .active .material_navbar_nav_item:hover,
.material_navbar_danger .material_navbar_nav .open .dropdown-toggle,
.material_navbar_danger .material_navbar_nav .open .dropdown-toggle:hover,
.material_navbar_danger .navbar-toggle .icon-bar {
  background-color: #fefefe;
  color: #000000;
}
.material_navbar_danger .material_navbar_nav .open .dropdown-toggle,
.material_navbar_danger .material_navbar_nav .open .dropdown-toggle:hover {
  color: #000000;
}
.material_navbar_danger .material_navbar_nav .dropdown .material_dropdown_menu_link:hover {
  color: #fff;
  background-color: #cc5451;
}
.material_navbar_danger .navbar-toggle:focus,
.material_navbar_danger .navbar-toggle:hover {
  background: none;
}
.material_navbar_danger .materail_input_block:after,
.material_navbar_danger .materail_input_block:focus,
.material_navbar_danger .materail_input_block:active {
  background-color: #cc5451;
}
.material_navbar_danger .materail_input:focus {
  outline: 0;
  border-bottom-color: #cc5451;
}
/***********************Breadcrumbs***********************/
.material_breadcrumb {
  border-radius: 0;
}
.material_breadcrumb .material_breadcrumb_item {
  -webkit-transition: color 0.5s ease-out 0s;
  transition: color 0.5s ease-out 0s;
  color: #000000;
}
.material_breadcrumb .material_breadcrumb_item:hover,
.material_breadcrumb .active {
  text-decoration: none;
  color: #4092d9;
}
/***********************Pagination***********************/
.material_pagination .material_pagination_item,
.material_pagination .disabled .material_pagination_item {
  border-radius: 0;
  background-color: #fff;
  color: #4092d9;
  -webkit-transition-property: background-color, color;
  transition-property: background-color, color;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.material_pagination .material_pagination_item:hover,
.material_pagination .active .material_pagination_item,
.material_pagination .active .material_pagination_item:hover {
  background-color: #4092d9;
  color: #fff;
}
.material_pagination .disabled .material_pagination_item:hover {
  color: #4092d9;
}
/***********************Labels***********************/
.materail_label {
  border-radius: 0;
  font-weight: 300;
  cursor: pointer;
  -webkit-transition-property: box-shadow, background-color;
  transition-property: box-shadow, background-color;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.materail_label:hover {
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.42);
}
.materail_label_default {
  background: none;
  border: 1px solid #eee;
  color: #000;
}
.materail_label_default:hover {
  background-color: #eee;
}
.materail_label_primary:hover {
  background-color: #4092d9;
}
.materail_label_success:hover {
  background-color: #68c368;
}
.materail_label_info:hover {
  background-color: #6acce9;
}
.materail_label_warning:hover {
  background-color: #f2a12e;
}
.materail_label_danger:hover {
  background-color: #f3413c;
}
/***********************Badges***********************/
.material_badge {
  font-weight: 400;
  color: #000;
  margin-left: 5px;
  padding: 5px;
  background: none;
  border: 1px solid #36bae2;
}
.material_btn .material_badge {
  top: 0;
  padding: 3px 6px;
  border: 1px solid transparent;
}
/***********************Custom content***********************/
.material_thumbnail {
  border-radius: 0;
  padding: 0;
  box-shadow: 0 6px 13px rgba(0, 0, 0, 0.12);
  -webkit-transition: box-shadow 0.3s ease-in 0s;
  transition: box-shadow 0.3s ease-in 0s;
}
.material_thumbnail .material_caption {
  padding: 10px 20px;
}
.material_thumbnail .material_btn {
  font-size: 16px;
  color: #ffab40;
  text-decoration: none;
  padding: 10px 0;
  border: none;
  -webkit-transition: color 0.4s ease-out 0s;
  transition: color 0.4s ease-out 0s;
}
.material_thumbnail .material_btn:hover,
.material_thumbnail .material_btn:active,
.material_thumbnail .material_btn:focus {
  background: none;
  box-shadow: none;
}
.material_thumbnail:hover {
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.42);
}
/***********************Alerts***********************/
.material_alert {
  border-radius: 0;
  font-weight: 400;
  color: #fff;
}
.material_alert .close {
  color: #fff;
  opacity: 1;
  text-shadow: none;
  -webkit-transition: color 0.4s ease-out 0s;
  transition: color 0.4s ease-out 0s;
}
.material_alert .close:hover {
  color: #222;
}
.material_alert_primary {
  background-color: #4092d9;
}
.material_alert_success {
  background-color: #68c368;
}
.material_alert_info {
  background-color: #6acce9;
}
.material_alert_warning {
  background-color: #f2a12e;
}
.material_alert_danger {
  background-color: #f3413c;
}
/***********************Progress bars***********************/
.material_progress {
  height: 5px;
  border-radius: 0;
}
.material_progress_primary {
  background-color: #4092d9;
}
.material_progress_success {
  background-color: #68c368;
}
.material_progress_info {
  background-color: #6acce9;
}
.material_progress_warning {
  background-color: #f2a12e;
}
.material_progress_danger {
  background-color: #f3413c;
}
/***********************Media alignment***********************/
.material_media .material_media_object {
  border-radius: 50%;
  box-shadow: 0 0 1px 0px #ccc;
  margin: 0 10px;
  -webkit-transition: box-shadow 0.3s ease-in 0s;
  transition: box-shadow 0.3s ease-in 0s;
}
.material_media .material_media_object:hover {
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.42);
}
.material_media .material_media_heading {
  font-weight: 400;
}
.material_media .material_media_body {
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
}
/***********************List group***********************/
.material_list_group .material_list_group_item {
  color: #fff;
  font-weight: 400;
  border-radius: 0;
  background-color: #4092d9;
  -webkit-transition: background-color 0.2s ease-out 0s;
  transition: background-color 0.2s ease-out 0s;
}
.material_list_group .material_list_group_item:hover {
  background-color: #336ea1;
}
.material_list_group .disabled:hover {
  background-color: #4092d9;
  color: #ffffff;
}
.material_list_group .material_badge {
  background-color: #fff;
  border-color: #ffffff;
}
/***********************Panels***********************/
.material_panel {
  border-radius: 0;
}
.material_panel .material_panel_heading {
  font-weight: 400;
}
.material_panel .material_panel_body {
  background-color: #fff;
  box-shadow: 0 6px 13px rgba(0, 0, 0, 0.12);
  -webkit-transition: box-shadow 0.3s ease-in 0s;
  transition: box-shadow 0.3s ease-in 0s;
}
.material_panel .material_panel_body:hover {
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.42);
}
.material_panel_primary .material_panel_heading {
  background-color: #4092d9;
  color: #ffffff;
}
.material_panel_success .material_panel_heading {
  background-color: #68c368;
  color: #ffffff;
}
.material_panel_info .material_panel_heading {
  background-color: #6acce9;
  color: #ffffff;
}
.material_panel_warning .material_panel_heading {
  background-color: #f2a12e;
  color: #ffffff;
}
.material_panel_danger .material_panel_heading {
  background-color: #f3413c;
  color: #ffffff;
}


.header,footer{min-width:100px;padding:30px 0;background-color:#6f5499;background-image:linear-gradient(to bottom, #563d7c 0, #6f5499 100%);background-repeat:repeat-x;text-align:center;color:#fff}.header .title,footer .title{margin-top:0}.main_container{max-width:1200px;margin:0 auto;padding:0 20px}.example_code{margin:35px 0;text-align:left}h3{margin-bottom:20px}.material_btn{margin-bottom:10px}.material_btn_group{margin-bottom:15px}.material_radio_group{margin-right:10px}.material_checkbox_block{margin-bottom:10px}.plugin{margin-bottom:25px}.footer .main_container:after{clear:both;content:"";display:table}.left_column{float:left;margin-right:15px}.copyright{float:right;text-align:right}.copyright a{color:#fff}.copyright a:hover{color:#fdfdfd;text-decoration:none}@media screen and (max-width:641px){.example_code{display:none}}

Similar snippets

Find more similar snippets using the following tags:material,bootstrap,cards,tabs,alerts

React js template and ui example bs4 widget image cards

bs4 widget image cards

View
React js template and ui example summary social networks

summary social networks

View
React js template and ui example simple user card

simple user card

View
React js template and ui example Team portrait

Team portrait

View
React js template and ui example bs5 dark footer

bs5 dark footer

View
React js template and ui example profile with data and skills

profile with data and skills

View
React js template and ui example chat app

chat app

View
React js template and ui example bs4 my experience timeline

bs4 my experience timeline

View