"Bootstrap Material Design"
Bootstrap 4.0.0 Snippet by MDBootstrap

<style> .md-form .prefix { float: left; position: relative; width: 0; } .view:not(.hm-zoom) { overflow:visible; } /* Animations */ .wow { visibility: hidden; } .btn-group { display:inline-flex; } </style> <!--Main layout--> <main class="mt-2"> <div class="container text-center"> <h3 class="mb-2 wow fadeIn" data-wow-delay="0.2s">Material Design for Bootstrap 4 or 3</h3> <p class="lead mb-2 wow fadeIn" data-wow-delay="0.2s">This presentation shows a small part of components and features available in Material Design for Bootstrap. <strong>To see all of them have a look at our full demo.</strong></p> <h4 class="mb-2 wow fadeIn" data-wow-delay="0.3s">Full demo & download</h4> <!--First row--> <div class="row wow fadeIn" data-wow-delay="0.4s"> <!--First column--> <div class="col-md-8 offset-md-2"> <!--Featured image--> <div class="view overlay hm-white-slight"> <img src="https://mdbootstrap.com/img/Mockups/Horizontal/6-col/mdb2.jpg" class="img-fluid"> <a target="_blank" href="http://mdbootstrap.com/material-design-for-bootstrap/"> <div class="mask waves-effect waves-light"></div> </a> </div> <!--Excerpt--> <a target="_blank" href="http://mdbootstrap.com/material-design-for-bootstrap/" class="btn btn-primary btn-lg mt-3 mb-2"><i class="fa fa-download left"></i> Free download</a> </div> <!--/First column--> </div> <!--/First row--> <hr class="wow fadeIn" data-wow-delay="0.4s"> <!--Section: Buttons--> <section class="section mb-3 mt-3 wow fadeIn" data-wow-delay="0.4s"> <!--Section heading--> <h1 class="section-heading">Buttons</h1> <!--Component title--> <h5 class="mb-3">Basic buttons</h5> <!-- Provides extra visual weight and identifies the primary action in a set of buttons --> <button type="button" class="btn btn-primary">Primary</button> <!-- Indicates a dangerous or potentially negative action --> <button type="button" class="btn btn-default">Default</button> <!-- Secondary, outline button --> <button type="button" class="btn btn-secondary">Secondary</button> <!-- Indicates a successful or positive action --> <button type="button" class="btn btn-success">Success</button> <!-- Contextual button for informational alert messages --> <button type="button" class="btn btn-info">Info</button> <!-- Indicates caution should be taken with this action --> <button type="button" class="btn btn-warning">Warning</button> <!-- Indicates a dangerous or potentially negative action --> <button type="button" class="btn btn-danger">Danger</button> <!--Component title--> <h5 class="mt-3 mb-3">Additional buttons</h5> <!--Elegant--> <button type="button" class="btn btn-elegant">Elegant</button> <!--Unique--> <button type="button" class="btn btn-unique">Unique</button> <!--Pink--> <button type="button" class="btn btn-pink">Pink</button> <!--Purple--> <button type="button" class="btn btn-purple">Purple</button> <!--Deep-purple--> <button type="button" class="btn btn-deep-purple">Deep-purple</button> <!--Indigo--> <button type="button" class="btn btn-indigo">Indigo</button> <!--Cyan--> <button type="button" class="btn btn-cyan">Cyan</button> <!--Light-green--> <button type="button" class="btn btn-light-green">Light-green</button> <!--Lime--> <button type="button" class="btn btn-lime">Lime</button> <!--Yellow--> <button type="button" class="btn btn-yellow">Yellow</button> <!--Amber--> <button type="button" class="btn btn-amber">Amber</button> <!--Orange--> <button type="button" class="btn btn-orange">Orange</button> <!--Deep-orange--> <button type="button" class="btn btn-deep-orange">Deep-orange</button> <!--Brown--> <button type="button" class="btn btn-brown">Brown</button> <!--Blue-grey--> <button type="button" class="btn btn-blue-grey">Blue-grey</button> <!--MDB--> <button type="button" class="btn btn-mdb">MDB</button> <!--Dark-green--> <button type="button" class="btn btn-dark-green">Dark-green</button> <!--Component title--> <h5 class="mt-3 mb-3">Outline buttons</h5> <button type="button" class="btn btn-outline-primary waves-effect">Primary</button> <button type="button" class="btn btn-outline-default waves-effect">Default</button> <button type="button" class="btn btn-outline-secondary waves-effect">Secondary</button> <button type="button" class="btn btn-outline-success waves-effect">Success</button> <button type="button" class="btn btn-outline-info waves-effect">Info</button> <button type="button" class="btn btn-outline-warning waves-effect">Warning</button> <button type="button" class="btn btn-outline-danger waves-effect">Danger</button> <!--Component title--> <h5 class="mt-3 mb-3">Large and small buttons</h5> <button type="button" class="btn btn-light-green btn-lg">Light-green</button> <button type="button" class="btn btn-cyan btn-lg">Cyan</button> <button type="button" class="btn btn-amber btn-lg">Amber</button> <button type="button" class="btn btn-indigo btn-sm">Indigo</button> <button type="button" class="btn btn-pink btn-sm">Pink</button> <button type="button" class="btn btn-secondary btn-sm">Secondary</button> <!--Component title--> <h5 class="mt-3 mb-3">Checkbox and radio buttons</h5> <!--Checkbox buttons--> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked) </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off"> Checkbox 2 </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off"> Checkbox 3 </label> </div> <!--/Checkbox buttons--> <!--Radio buttons--> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected) </label> <label class="btn btn-primary"> <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2 </label> <label class="btn btn-primary"> <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3 </label> </div> <!--/Radio buttons--> </section> <!--/Section: Buttons--> <hr class="wow fadeIn" data-wow-delay="0.4s"> <!--Section: Cards--> <section class="mt-3 mb-3 wow fadeIn" data-wow-delay="0.4s"> <!--Section heading--> <h1 class="section-heading mb-4">Cards</h1> <!--Component title--> <h5 class="mb-3">Classic cards</h5> <!--First row--> <div class="row text-left"> <!--First column--> <div class="col-lg-4 col-md-12"> <!--Card--> <div class="card"> <!--Card image--> <div class="view overlay hm-white-slight"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%2859%29.jpg" class="img-fluid" alt=""> <a href="#"> <div class="mask waves-effect waves-light"></div> </a> </div> <!--/.Card image--> <!--Card content--> <div class="card-block"> <!--Title--> <h4 class="card-title">Card title</h4> <!--Text--> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#!" class="btn btn-info">Button</a> </div> <!--/.Card content--> </div> <!--/.Card--> </div> <!--/First column--> <!--Second column--> <div class="col-lg-4 col-md-6"> <!--Card--> <div class="card"> <!--Card image--> <div class="view overlay hm-white-slight"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%287%29.jpg" class="img-fluid" alt=""> <a href="#!"> <div class="mask waves-effect waves-light"></div> </a> </div> <!--/.Card image--> <!--Card content--> <div class="card-block"> <!--Title--> <h4 class="card-title">Card title</h4> <!--Text--> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#!" class="btn btn-blue-grey">Button</a> </div> <!--/.Card content--> </div> <!--/.Card--> </div> <!--/Second column--> <!--Third column--> <div class="col-lg-4 col-md-6"> <!--Card--> <div class="card"> <!--Card image--> <div class="view overlay hm-white-slight"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(2).jpg" class="img-fluid" alt=""> <a href="#"> <div class="mask waves-effect waves-light"></div> </a> </div> <!--/.Card image--> <!--Card content--> <div class="card-block"> <!--Title--> <h4 class="card-title">Card title</h4> <!--Text--> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Button</a> </div> <!--/.Card content--> </div> <!--/.Card--> </div> <!--/Third column--> </div> <!--/First row--> <!--Component title--> <h5 class="text-center mt-3 mb-3">Cards group</h5> <!--Second row--> <div class="row"> <div class="col-md-12"> <div class="card-group"> <div class="card"> <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%2813%29.jpg" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Card title</h4> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> <div class="card"> <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%2840%29.jpg" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Card title</h4> <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> <div class="card"> <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%2842%29.jpg" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Card title</h4> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> </div> </div> <!--/Second row--> </section> <!--/Section: Cards--> <hr class="wow fadeIn" data-wow-delay="0.4s"> <!--Section: Dropdowns--> <section class="section wow fadeIn mt-3 mb-3" data-wow-delay="0.4s"> <!--Section heading--> <h1 class="section-heading">Dropdown</h1> <div class="btn-group"> <div class="dropdown"> <button class="btn btn-cyan dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Basic dropdown</button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> </div> <!-- Split button --> <div class="btn-group"> <button type="button" class="btn btn-pink">Action</button> <button type="button" class="btn btn-pink dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> <div class="btn-group dropup"> <button type="button" class="btn btn-purple">Dropup</button> <button type="button" class="btn btn-purple dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> <div class="btn-group"> <div class="dropdown"> <button class="btn btn-blue-grey dropdown-toggle" type="button" id="dropdownMenu5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Disabled </button> <div class="dropdown-menu" aria-labelledby="dropdownMenu5"> <a class="dropdown-item" href="#">Regular link</a> <a class="dropdown-item disabled" href="#">Disabled link</a> <a class="dropdown-item" href="#">Another link</a> </div> </div> </div> </section> <!--/Section: Dropdowns--> <hr class="wow fadeIn" data-wow-delay="0.4s"> <!--Section: Inputs--> <section class="section mt-3 wow fadeIn" data-wow-delay="0.4s"> <!--Section heading--> <h1 class="section-heading">Inputs</h1> <!--Component title--> <h5 class="text-center mb-3">Input fields</h5> <!--First row--> <div class="row"> <!--First column--> <div class="col-md-6 mb-3"> <div class="md-form"> <input type="text" id="form1" class="form-control"> <label for="form1" class="">Example label</label> </div> </div> <!--First column--> <!--Second column--> <div class="col-md-6 mb-3"> <div class="md-form"> <input placeholder="Placeholder" type="text" id="form5" class="form-control"> <label class="active" for="form5">Example label</label> </div> </div> <!--/Second column--> </div> <!--/First row--> <!--Second row--> <div class="row"> <!--First column--> <div class="col-md-6 mb-3"> <div class="md-form"> <input value="John Doe" type="text" id="form6" class="form-control"> <label class="active" for="form6">Example label</label> </div> </div> <!--First column--> <!--Second column--> <div class="col-md-6 mb-3"> <div class="md-form"> <input type="text" id="form11" class="form-control" disabled> <label for="form11" class="disabled">Disabled</label> </div> </div> <!--/Second column--> </div> <!--/Second row--> <!--Third row--> <div class="row"> <!--First column--> <div class="col-md-6 mb-3"> <div class="md-form"> <i class="fa fa-tag prefix"></i> <input type="text" id="form2" class="form-control"> <label for="form2">Example label</label> </div> </div> <!--First column--> <!--Second column--> <div class="col-md-6 mb-3"> <div class="md-form"> <i class="fa fa-user prefix"></i> <input type="text" id="form3" class="form-control"> <label for="form3">Example label</label> </div> </div> <!--/Third column--> </div> <!--/Second row--> <!--Component title--> <h5 class="text-center mb-3">Error or Success Messages</h5> <!--First row--> <div class="row"> <!--First column--> <div class="col-md-6 mb-3"> <div class="md-form"> <i class="fa fa-envelope prefix"></i> <input type="email" id="form9" class="form-control validate"> <label for="form9" data-error="wrong" data-success="right">Type your email</label> </div> </div> <!--First column--> <!--Second column--> <div class="col-md-6 mb-3"> <div class="md-form"> <i class="fa fa-lock prefix"></i> <input type="password" id="form10" class="form-control validate"> <label for="form10" data-error="wrong" data-success="right">Type your password</label> </div> </div> <!--/Second column--> </div> <!--/First row--> <!--Component title--> <h5 class="text-center mb-3">Textarea</h5> <!--First row--> <div class="row"> <!--First column--> <div class="col-md-6 mb-1"> <div class="md-form"> <textarea type="text" id="form7" class="md-textarea"></textarea> <label for="form7">Basic textarea</label> </div> </div> <!--First column--> <!--Second column--> <div class="col-md-6 mb-1"> <div class="md-form"> <i class="fa fa-pencil prefix"></i> <textarea type="text" id="form8" class="md-textarea"></textarea> <label for="form8">Icon Prefix</label> </div> </div> <!--/Second column--> </div> <!--/First row--> </section> <!--/Section: Inputs--> <hr class="wow fadeIn" data-wow-delay="0.4s"> <!--Section: Carousels--> <section class="section wow fadeIn mt-3 mb-3" data-wow-delay="0.4s"> <!--Section heading--> <h1 class="section-heading">Carousels</h1> <h5 class="mb-3">Classic carousel</h5> <!--Carousel Wrapper--> <div id="carousel-example-1z" class="carousel slide carousel-fade wow fadeIn z-depth-1-half" data-wow-delay="0.4s" data-ride="carousel"> <!--Indicators--> <ol class="carousel-indicators"> <li data-target="#carousel-example-1z" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-1z" data-slide-to="1"></li> <li data-target="#carousel-example-1z" data-slide-to="2"></li> </ol> <!--/.Indicators--> <!--Slides--> <div class="carousel-inner" role="listbox"> <!--First slide--> <div class="carousel-item active"> <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(1).jpg" class="img-fluid" alt="First slide"> </div> <!--/First slide--> <!--Second slide--> <div class="carousel-item"> <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(10).jpg" class="img-fluid" alt="Second slide"> </div> <!--/Second slide--> <!--Third slide--> <div class="carousel-item"> <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(3).jpg" class="img-fluid" alt="Third slide"> </div> <!--/Third slide--> </div> <!--/.Slides--> <!--Controls--> <a class="carousel-control-prev" href="#carousel-example-1z" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carousel-example-1z" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> <!--/.Controls--> </div> <!--/.Carousel Wrapper--> <h5 class="mt-3 mb-3">Classic carousel with captions</h5> <!--Carousel Wrapper--> <div id="carousel-example-2" class="carousel slide carousel-fade wow fadeIn z-depth-1-half" data-wow-delay="0.4s" data-ride="carousel"> <!--Indicators--> <ol class="carousel-indicators"> <li data-target="#carousel-example-2" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-2" data-slide-to="1"></li> <li data-target="#carousel-example-2" data-slide-to="2"></li> </ol> <!--/.Indicators--> <!--Slides--> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg" alt="First slide"> <div class="carousel-caption"> <h3>Heading</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> <div class="carousel-item"> <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(67).jpg" alt="Second slide"> <div class="carousel-caption"> <h3>Heading</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> <div class="carousel-item"> <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(69).jpg" alt="Third slide"> <div class="carousel-caption"> <h3>Heading</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> </div> <!--/.Slides--> <!--Controls--> <a class="carousel-control-prev" href="#carousel-example-2" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carousel-example-2" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> <!--/.Controls--> </div> <!--/.Carousel Wrapper--> <h5 class="mt-3 mb-3">Video Carousel </h5> <!--Carousel Wrapper--> <div id="video-carousel-example" class="carousel slide carousel-fade z-depth-1-half" data-ride="carousel"> <!--Indicators--> <ol class="carousel-indicators"> <li data-target="#video-carousel-example" data-slide-to="0" class="active"></li> <li data-target="#video-carousel-example" data-slide-to="1"></li> <li data-target="#video-carousel-example" data-slide-to="2"></li> </ol> <!--/.Indicators--> <!--Slides--> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <video class="video-fluid black" autoplay loop> <source src="https://mdbootstrap.com/img/video/Strum-Away.mp4" type="video/mp4" /> </video> </div> <div class="carousel-item"> <video class="video-fluid black" autoplay loop> <source src="https://mdbootstrap.com/img/video/Beach-Ball.mp4" type="video/mp4" /> </video> </div> <div class="carousel-item"> <video class="video-fluid brown" autoplay loop> <source src="https://mdbootstrap.com/img/video/Nature-Sunset.mp4" type="video/mp4" /> </video> </div> </div> <!--/.Slides--> <!--Controls--> <a class="carousel-control-prev" href="#video-carousel-example" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#video-carousel-example" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> <!--/.Controls--> </div> <!--/.Carousel Wrapper--> </section> <!--/Section: Carousels--> <hr class="wow fadeIn" data-wow-delay="0.4s"> <!--Section: SideNav--> <section class="section wow fadeIn mt-3 mb-2" data-wow-delay="0.4s"> <!--Section heading--> <h1 class="section-heading">Skins</h1> <p class="mb-3">Click on the images below to see live preview</p> <!--First row--> <div class="row"> <!--First column--> <div class="col-md-6 mb-3"> <div class="view overlay hm-white-slight"> <img src="https://mdbootstrap.com/img/screens/skins/skin1.jpg" alt="" class="img-fluid"> <a href="https://mdbootstrap.com/live/_MDB/index/docs/skins/white-skin.html"> <div class="mask waves-effect waves-light"></div> </a> </div> <h3 class="mt-3 mb-2">White Skin</h3> <a href="https://mdbootstrap.com/live/_MDB/index/docs/skins/white-skin.html" class="btn btn-info mt-1">Live preview</a> </div> <!--/First column--> <!--Second column--> <div class="col-md-6 mb-3"> <div class="view overlay hm-white-slight"> <img src="https://mdbootstrap.com/img/screens/skins/skin6.jpg" alt="" class="img-fluid"> <a href="https://mdbootstrap.com/live/_MDB/index/docs/skins/navy-blue-skin.html"> <div class="mask waves-effect waves-light"></div> </a> </div> <h3 class="mt-3 mb-2">Navy Blue Skin</h3> <a href="https://mdbootstrap.com/live/_MDB/index/docs/skins/navy-blue-skin.html" class="btn btn-info mt-1">Live preview</a> </div> <!--/Second column--> </div> <!--/First row--> <!--Second row--> <div class="row"> <!--First column--> <div class="col-md-6 mb-3"> <div class="view overlay hm-white-slight"> <img src="https://mdbootstrap.com/img/screens/skins/skin5.jpg" alt="" class="img-fluid"> <a href="https://mdbootstrap.com/live/_MDB/index/docs/skins/deep-purple-skin.html"> <div class="mask waves-effect waves-light"></div> </a> </div> <h3 class="mt-3 mb-2">Deep Purple Skin</h3> <a href="https://mdbootstrap.com/live/_MDB/index/docs/skins/deep-purple-skin.html" class="btn btn-info mt-1">Live preview</a> </div> <!--/First column--> <!--Second column--> <div class="col-md-6 mb-3"> <div class="view overlay hm-white-slight"> <img src="https://mdbootstrap.com/img/screens/skins/skin9.jpg" alt="" class="img-fluid"> <a href="https://mdbootstrap.com/live/_MDB/index/docs/skins/light-blue-skin.html"> <div class="mask waves-effect waves-light"></div> </a> </div> <h3 class="mt-3 mb-2">Light Blue Skin</h3> <a href="https://mdbootstrap.com/live/_MDB/index/docs/skins/light-blue-skin.html" class="btn btn-info mt-1">Live preview</a> </div> <!--/Second column--> </div> <!--/Second row--> <!--Third row--> <div class="row"> <!--First column--> <div class="col-md-6 mb-3"> <div class="view overlay hm-white-slight"> <img src="https://mdbootstrap.com/img/screens/skins/skin3.jpg" alt="" class="img-fluid"> <a href="https://mdbootstrap.com/live/_MDB/index/docs/skins/cyan-skin.html"> <div class="mask waves-effect waves-light"></div> </a> </div> <h3 class="mt-3 mb-2">Cyan Skin</h3> <a href="https://mdbootstrap.com/live/_MDB/index/docs/skins/cyan-skin.html" class="btn btn-info mt-1">Live preview</a> </div> <!--/First column--> <!--Second column--> <div class="col-md-6 mb-3"> <div class="view overlay hm-white-slight"> <img src="https://mdbootstrap.com/img/screens/skins/skin10.jpg" alt="" class="img-fluid"> <a href="https://mdbootstrap.com/live/_MDB/index/docs/skins/grey-skin.html"> <div class="mask waves-effect waves-light"></div> </a> </div> <h3 class="mt-3 mb-2">Grey Skin</h3> <a href="https://mdbootstrap.com/live/_MDB/index/docs/skins/grey-skin.html" class="btn btn-info mt-1">Live preview</a> </div> <!--/Second column--> </div> <!--Third row--> <!--Fourth row--> <div class="row"> <!--First column--> <div class="col-md-6 mb-3"> <div class="view overlay hm-white-slight"> <img src="https://mdbootstrap.com/img/screens/skins/skin7.jpg" alt="" class="img-fluid"> <a href="https://mdbootstrap.com/live/_MDB/index/docs/skins/pink-skin.html"> <div class="mask waves-effect waves-light"></div> </a> </div> <h3 class="mt-3 mb-2">Pink Skin</h3> <a href="https://mdbootstrap.com/live/_MDB/index/docs/skins/pink-skin.html" class="btn btn-info mt-1">Live preview</a> </div> <!--/First column--> <!--Second column--> <div class="col-md-6 mb-3"> <div class="view overlay hm-white-slight"> <img src="https://mdbootstrap.com/img/screens/skins/skin4.jpg" alt="" class="img-fluid"> <a href="https://mdbootstrap.com/live/_MDB/index/docs/skins/mdb-skin.html"> <div class="mask waves-effect waves-light"></div> </a> </div> <h3 class="mt-3 mb-2">MDB Skin</h3> <a href="https://mdbootstrap.com/live/_MDB/index/docs/skins/mdb-skin.html" class="btn btn-info mt-1">Live preview</a> </div> <!--/Second column--> </div> <!--/Fourth row--> <!--Fifth row--> <div class="row"> <!--First column--> <div class="col-md-6 mb-1"> <div class="view overlay hm-white-slight"> <img src="https://mdbootstrap.com/img/screens/skins/skin2.jpg" alt="" class="img-fluid"> <a href="https://mdbootstrap.com/live/_MDB/index/docs/skins/black-skin.html"> <div class="mask waves-effect waves-light"></div> </a> </div> <h3 class="mt-3 mb-2">Black Skin</h3> <a href="https://mdbootstrap.com/live/_MDB/index/docs/skins/black-skin.html" class="btn btn-info mt-1">Live preview</a> </div> <!--/First column--> <!--Second column--> <div class="col-md-6 mb-1"> <div class="view overlay hm-white-slight"> <img src="https://mdbootstrap.com/img/screens/skins/skin8.jpg" alt="" class="img-fluid"> <a href="https://mdbootstrap.com/live/_MDB/index/docs/skins/indigo-skin.html"> <div class="mask waves-effect waves-light"></div> </a> </div> <h3 class="mt-3 mb-2">Indigo Skin</h3> <a href="https://mdbootstrap.com/live/_MDB/index/docs/skins/indigo-skin.html" class="btn btn-info mt-1">Live preview</a> </div> <!--/Second column--> </div> <!--/Fifth row--> </section> <!--/Section: SideNav--> <hr class="wow fadeIn" data-wow-delay="0.4s"> <!--Section: Navbars--> <section class="section mt-3 mb-3 wow fadeIn" data-wow-delay="0.4s"> <!--Section heading--> <h1 class="section-heading">Navbars</h1> <!--Navbar blue--> <nav class="navbar navbar-toggleable-md navbar-dark bg-primary mb-3"> <div class="container"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav1" aria-controls="navbarNav1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#"> <strong>Navbar</strong> </a> <div class="collapse navbar-collapse" id="navbarNav1"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link waves-effect waves-light">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link waves-effect waves-light">Features</a> </li> <li class="nav-item"> <a class="nav-link waves-effect waves-light">Pricing</a> </li> <li class="nav-item dropdown btn-group"> <a class="nav-link dropdown-toggle waves-effect waves-light" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> <div class="dropdown-menu dropdown" aria-labelledby="dropdownMenu1"> <a class="dropdown-item waves-effect waves-light">Action</a> <a class="dropdown-item waves-effect waves-light">Another action</a> <a class="dropdown-item waves-effect waves-light">Something else here</a> </div> </li> </ul> <form class="form-inline waves-effect waves-light"> <input class="form-control" type="text" placeholder="Search"> </form> </div> </div> </nav> <!--/.Navbar blue--> <!--Navbar purple--> <nav class="navbar navbar-toggleable-md navbar-dark secondary-color-dark mb-3"> <div class="container"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav2" aria-controls="navbarNav2" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#"> <strong>Navbar</strong> </a> <div class="collapse navbar-collapse" id="navbarNav2"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link waves-effect waves-light">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link waves-effect waves-light">Features</a> </li> <li class="nav-item"> <a class="nav-link waves-effect waves-light">Pricing</a> </li> <li class="nav-item dropdown btn-group"> <a class="nav-link dropdown-toggle waves-effect waves-light" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> <div class="dropdown-menu dropdown-secondary" aria-labelledby="dropdownMenu2"> <a class="dropdown-item waves-effect waves-light">Action</a> <a class="dropdown-item waves-effect waves-light">Another action</a> <a class="dropdown-item waves-effect waves-light">Something else here</a> </div> </li> </ul> <ul class="navbar-nav ml-auto nav-flex-icons"> <li class="nav-item"> <a class="nav-link waves-effect waves-light"><i class="fa fa-twitter"></i></a> </li> <li class="nav-item"> <a class="nav-link waves-effect waves-light"><i class="fa fa-google-plus"></i></a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle waves-effect waves-light" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-user"></i></a> <div class="dropdown-menu dropdown-secondary dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item waves-effect waves-light" href="#">Action</a> <a class="dropdown-item waves-effect waves-light" href="#">Another action</a> <a class="dropdown-item waves-effect waves-light" href="#">Something else here</a> </div> </li> </ul> </div> </div> </nav> <!--/.Navbar purple--> <!--Navbar green--> <nav class="navbar navbar-toggleable-md navbar-dark default-color mb-3"> <div class="container"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav3" aria-controls="navbarNav3" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#"> <strong>Navbar</strong> </a> <div class="collapse navbar-collapse" id="navbarNav3"> <ul class="navbar-nav ml-auto"> <li class="nav-item active"> <a class="nav-link waves-effect waves-light"><i class="fa fa-envelope"></i> Contact</a> </li> <li class="nav-item"> <a class="nav-link waves-effect waves-light"><i class="fa fa-gear"></i> Settings</a> </li> <li class="nav-item dropdown btn-group"> <a class="nav-link dropdown-toggle waves-effect waves-light" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-user"></i> Profile</a> <div class="dropdown-menu dropdown-default dropdown-menu-left" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item waves-effect waves-light" href="#">Action</a> <a class="dropdown-item waves-effect waves-light" href="#">Another action</a> <a class="dropdown-item waves-effect waves-light" href="#">Something else here</a> </div> </li> </ul> </div> </div> </nav> <!--/.Navbar green--> <!--Navbar orange--> <nav class="navbar navbar-toggleable-md navbar-dark warning-color-dark"> <div class="container"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav4" aria-controls="navbarNav4" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#"> <strong>Navbar</strong> </a> <div class="collapse navbar-collapse" id="navbarNav4"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link waves-effect waves-light">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link waves-effect waves-light">Features</a> </li> <li class="nav-item"> <a class="nav-link waves-effect waves-light">Pricing</a> </li> <li class="nav-item dropdown btn-group"> <a class="nav-link dropdown-toggle waves-effect waves-light" id="dropdownMenu4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> <div class="dropdown-menu dropdown-warning" aria-labelledby="dropdownMenu4"> <a class="dropdown-item waves-effect waves-light">Action</a> <a class="dropdown-item waves-effect waves-light">Another action</a> <a class="dropdown-item waves-effect waves-light">Something else here</a> </div> </li> </ul> <ul class="navbar-nav ml-auto nav-flex-icons"> <li class="nav-item"> <a class="nav-link waves-effect waves-light">1 <i class="fa fa-envelope"></i></a> </li> </ul> </div> </div> </nav> <!--/.Navbar orange--> <!--Component title--> <h5 class="text-center mt-3 mb-3">Breadcrumbs</h5> <ol class="breadcrumb"> <li class="breadcrumb-item active">Home</li> </ol> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item active">Library</li> </ol> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Library</a></li> <li class="breadcrumb-item active">Data</li> </ol> <!-- /.Live preview--> <!-- Live preview--> <nav class="navbar navbar-dark stylish-color mb-1"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Library</a></li> <li class="breadcrumb-item active white-text">Data</li> </ol> </nav> <!-- /.Live preview--> <!-- Live preview--> <nav class="navbar navbar-light teal lighten-5"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Library</a></li> <li class="breadcrumb-item active">Data</li> </ol> </nav> </section> <!--/Section: Navbars--> <hr class="wow fadeIn" data-wow-delay="0.4s"> <!--Section: Forms--> <section class="mt-3 mb-1"> <!--Section heading--> <h1 class="section-heading mb-4">Forms</h1> <!--Component title--> <h5 class="mb-5">Forms with header</h5> <!--First row--> <div class="row"> <!--First column--> <div class="col-md-6 mb-2"> <!--Form with header--> <div class="card"> <div class="card-block"> <!--Header--> <div class="form-header purple darken-4"> <h3><i class="fa fa-lock"></i> Login:</h3> </div> <!--Body--> <div class="md-form"> <i class="fa fa-envelope prefix"></i> <input type="text" id="form2" class="form-control"> <label for="form2">Your email</label> </div> <div class="md-form"> <i class="fa fa-lock prefix"></i> <input type="password" id="form4" class="form-control"> <label for="form4">Your password</label> </div> <div class="text-center"> <button class="btn btn-deep-purple">Login</button> </div> </div> <!--Footer--> <div class="modal-footer"> <div class="options"> <p>Not a member? <a href="#">Sign Up</a></p> <p>Forgot <a href="#">Password?</a></p> </div> </div> </div> <!--/Form with header--> </div> <!--/First column--> <!--Second column--> <div class="col-md-6"> <!--Form with header--> <div class="card"> <div class="card-block"> <!--Header--> <div class="form-header blue-gradient"> <h3><i class="fa fa-user"></i> Register:</h3> </div> <!--Body--> <div class="md-form"> <i class="fa fa-user prefix"></i> <input type="text" id="form3" class="form-control"> <label for="form3">Your name</label> </div> <div class="md-form"> <i class="fa fa-envelope prefix"></i> <input type="text" id="form2" class="form-control"> <label for="form2">Your email</label> </div> <div class="md-form"> <i class="fa fa-lock prefix"></i> <input type="password" id="form4" class="form-control"> <label for="form4">Your password</label> </div> <div class="text-center"> <button class="btn btn-indigo">Sign up</button> </div> </div> </div> <!--/Form with header--> </div> <!--Second column--> </div> <!--/First row--> <!--Component title--> <h5 class="text-center mt-2 mb-3">Forms without header</h5> <!--Second row--> <div class="row"> <!--First column--> <div class="col-md-6"> <!--Form without header--> <div class="card"> <div class="card-block"> <!--Header--> <div class="text-center"> <h3><i class="fa fa-lock"></i> Login:</h3> <hr class="mt-2 mb-2"> </div> <!--Body--> <div class="md-form"> <i class="fa fa-envelope prefix"></i> <input type="text" id="form2" class="form-control"> <label for="form2">Your email</label> </div> <div class="md-form"> <i class="fa fa-lock prefix"></i> <input type="password" id="form4" class="form-control"> <label for="form4">Your password</label> </div> <div class="text-center"> <button class="btn btn-deep-purple">Login</button> </div> </div> <!--Footer--> <div class="modal-footer"> <div class="options"> <p>Not a member? <a href="#">Sign Up</a></p> <p>Forgot <a href="#">Password?</a></p> </div> </div> </div> <!--/Form without header--> </div> <!--/First column--> <!--Second column--> <div class="col-md-6"> <!--Form without header--> <div class="card"> <div class="card-block"> <!--Header--> <div class="text-center"> <h3><i class="fa fa-pencil"></i> Subscribe:</h3> <hr class="mt-2 mb-2"> </div> <!--Body--> <p>We'll write rarely, but only the best content.</p> <br> <!--Body--> <div class="md-form"> <i class="fa fa-user prefix"></i> <input type="text" id="form3" class="form-control"> <label for="form3">Your name</label> </div> <div class="md-form"> <i class="fa fa-envelope prefix"></i> <input type="text" id="form2" class="form-control"> <label for="form2">Your email</label> </div> <div class="text-center"> <button class="btn btn-deep-orange">Send</button> </div> </div> </div> <!--/Form without header--> </div> <!--Second column--> </div> <!--/Second row--> <!--Component title--> <h5 class="text-center mt-3 mb-3">Naked forms</h5> <!--Third row--> <div class="row"> <!--Second column--> <div class="col-md-6"> <!--Naked Form--> <div class="card-block"> <!--Header--> <div class="text-center"> <h3><i class="fa fa-envelope"></i> Write to us:</h3> <hr class="mt-2 mb-2"> </div> <!--Body--> <p>We'll write rarely, but only the best content.</p> <br> <!--Body--> <div class="md-form"> <i class="fa fa-user prefix"></i> <input type="text" id="form3" class="form-control"> <label for="form3">Your name</label> </div> <div class="md-form"> <i class="fa fa-envelope prefix"></i> <input type="text" id="form2" class="form-control"> <label for="form2">Your email</label> </div> <div class="md-form"> <i class="fa fa-tag prefix"></i> <input type="text" id="form32" class="form-control"> <label for="form34">Subject</label> </div> <div class="md-form"> <i class="fa fa-pencil prefix"></i> <textarea type="text" id="form8" class="md-textarea"></textarea> <label for="form8">Icon Prefix</label> </div> <div class="text-center"> <button class="btn btn-default">Submit</button> <div class="call"> <br> <p>Or would you prefer to call? <br> <span><i class="fa fa-phone"> </i></span> + 01 234 565 280</p> </div> </div> </div> <!--Naked Form--> </div> <!--Second column--> <!--First column--> <div class="col-md-6"> <!--Naked Form--> <div class="card-block"> <!--Header--> <div class="text-center"> <h3><i class="fa fa-lock"></i> Login:</h3> <hr class="mt-2 mb-2"> </div> <!--Body--> <div class="md-form"> <i class="fa fa-envelope prefix"></i> <input type="text" id="form2" class="form-control"> <label for="form2">Your email</label> </div> <div class="md-form"> <i class="fa fa-lock prefix"></i> <input type="password" id="form4" class="form-control"> <label for="form4">Your password</label> </div> <div class="text-center"> <button class="btn btn-deep-purple">Login</button> </div> </div> <!--Footer--> <div class="modal-footer"> <div class="options"> <p>Not a member? <a href="#">Sign Up</a></p> <p>Forgot <a href="#">Password?</a></p> </div> </div> <!--Naked Form--> </div> <!--/First column--> </div> <!--/Third row--> </section> <!--/Section: Navbars--> <hr class="wow fadeIn" data-wow-delay="0.4s"> <!--Section: Masks--> <section class="section text-center mt-3 mb-3 wow fadeIn" data-wow-delay="0.4s"> <!--Section heading--> <h1 class="section-heading">Masks</h1> <!--Component title--> <h5 class="mb-3">Patterns</h5> <!--First row--> <div class="row"> <div class="col-md-6 mb-2"> <div class="view"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(28).jpg" class="img-fluid" alt=""> <div class="mask flex-center"> <p class="white-text">no mask</p> </div> </div> </div> <div class="col-md-6 mb-2"> <div class="view"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(28).jpg" class="img-fluid" alt=""> <div class="mask pattern-1 flex-center"> <p class="white-text">.pattern-1</p> </div> </div> </div> </div> <!--/First row--> <!--Second row--> <div class="row"> <div class="col-md-6 mb-2"> <div class="view"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(28).jpg" class="img-fluid" alt=""> <div class="mask pattern-2 flex-center"> <p class="white-text">.pattern-2</p> </div> </div> </div> <div class="col-md-6 mb-2"> <div class="view"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(28).jpg" class="img-fluid" alt=""> <div class="mask pattern-3 flex-center"> <p class="white-text">.pattern-3</p> </div> </div> </div> </div> <!--/Second row--> <!--Third row--> <div class="row"> <div class="col-md-6 mb-2"> <div class="view"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(28).jpg" class="img-fluid" alt=""> <div class="mask pattern-4 flex-center"> <p class="white-text">.pattern-4</p> </div> </div> </div> <div class="col-md-6 mb-2"> <div class="view"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(28).jpg" class="img-fluid" alt=""> <div class="mask pattern-5 flex-center"> <p class="white-text">.pattern-5</p> </div> </div> </div> </div> <!--/Third row--> <!--Fourth row--> <div class="row"> <div class="col-md-6 mb-2"> <div class="view"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(28).jpg" class="img-fluid" alt=""> <div class="mask pattern-8 flex-center"> <p class="white-text">.pattern-8</p> </div> </div> </div> <div class="col-md-6 mb-2"> <div class="view"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(28).jpg" class="img-fluid" alt=""> <div class="mask pattern-6 flex-center"> <p class="white-text">.pattern-6</p> </div> </div> </div> </div> <!--/Fourth row--> <!--Fifth row--> <div class="row"> <div class="col-md-6 mb-2"> <div class="view"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(28).jpg" class="img-fluid" alt=""> <div class="mask pattern-7 flex-center"> <p class="white-text">.pattern-7</p> </div> </div> </div> <div class="col-md-6 mb-2"> <div class="view"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(28).jpg" class="img-fluid" alt=""> <div class="mask pattern-9 flex-center"> <p class="white-text">.pattern-9</p> </div> </div> </div> </div> <!--/Fifth row--> <!--Component title--> <h5 class="mt-1 mb-3">Overlays</h5> <!-- Live preview--> <div class="row mb-2"> <div class="col-md-12"> <div class="view"> <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(85).jpg" class="img-fluid" alt=""> <div class="mask flex-center"> <h2 class="white-text">no overlay</h2> </div> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="view hm-black-light"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(28).jpg" class="img-fluid" alt=""> <div class="mask flex-center"> <p class="white-text">light overlay</p> </div> </div> </div> <div class="col-md-6"> <div class="view hm-black-strong"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(28).jpg" class="img-fluid" alt=""> <div class="mask flex-center"> <p class="white-text">strong overlay</p> </div> </div> </div> </div> <!--Life preview--> </section> <!--/Section: Masks--> <hr class="wow fadeIn" data-wow-delay="0.4s"> <!--Section: Typography--> <section class="section mt-3 mb-3 wow fadeIn" data-wow-delay="0.4s"> <!--Section heading--> <h1 class="section-heading ">Typography</h1> <!--Component title--> <h5 class="mb-3 text-center">Notifications</h5> <!--First row--> <div class="row text-left"> <!--First column--> <div class="col-md-12"> <!--Notifications--> <blockquote class="blockquote bq-primary"> <p class="bq-title">Info notification</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores quibusdam dignissimos itaque harum illo! Quidem, corporis at quae tempore nisi impedit cupiditate perferendis nesciunt, ex dolores doloremque! Sit, rem, in?</p> </blockquote> <blockquote class="blockquote bq-warning"> <p class="bq-title">Warning notification</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores quibusdam dignissimos itaque harum illo! Quidem, corporis at quae tempore nisi impedit cupiditate perferendis nesciunt, ex dolores doloremque! Sit, rem, in?</p> </blockquote> <blockquote class="blockquote bq-success"> <p class="bq-title">Success notification</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores quibusdam dignissimos itaque harum illo! Quidem, corporis at quae tempore nisi impedit cupiditate perferendis nesciunt, ex dolores doloremque! Sit, rem, in?</p> </blockquote> <blockquote class="blockquote bq-danger"> <p class="bq-title">Danger notification</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores quibusdam dignissimos itaque harum illo! Quidem, corporis at quae tempore nisi impedit cupiditate perferendis nesciunt, ex dolores doloremque! Sit, rem, in?</p> </blockquote> <!--Notifications--> </div> <!--/First column--> </div> <!--/First row--> <!--Second row--> <div class="row text-left"> <!--First column--> <div class="col-md-6 mt-3"> <!--Component title--> <h5 class="mb-3">Display headings</h5> <h1 class="display-1">Display 1</h1> <h1 class="display-2">Display 2</h1> <h1 class="display-3">Display 3</h1> <h1 class="display-4">Display 4</h1> </div> <!--/First column--> <!--Second column--> <div class="col-md-6 mt-3"> <!--Component title--> <h5 class="mb-3">Responsive headings</h5> <h1 class="h1-responsive">h1. heading</h1> <h2 class="h2-responsive">h2. heading</h2> <h3 class="h3-responsive">h3. heading</h3> <h4 class="h4-responsive">h4. heading</h4> <h5 class="h5-responsive">h5. heading</h5> </div> <!--/Second column--> </div> <!--/Second row--> <!--Component title--> <h5 class="mt-3 mb-2">Blockquotes</h5> <!--Third row--> <div class="row text-left"> <!--First column--> <div class="col-md-12"> <blockquote class="blockquote"> <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, dolorem. Nulla illum, earum illo, expedita necessitatibus sunt autem aspernatur sit sequi excepturi molestiae dolore, doloribus nesciunt voluptas exercitationem ipsa perferendis?</p> <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote> </div> <!--/First column--> </div> <!--/Third row--> <!--Component title--> <h5 class="mt-3 mb-2 text-center">Text color</h5> <p class="lead mb-2 text-center">MDBootstrap allows you to simply set the text color. All you have to to is add one of our classes:</p> <!--Fourth row--> <div class="row text-left"> <!--First column--> <div class="col-md-12"> <p class="red-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <p class="pink-text">Impedit architecto, totam hic sunt eum odio, deleniti.</p> <p class="purple-text">Similique ex, expedita minus assumenda a magni beatae dolorum itaque.</p> <p class="deep-purple-text">Veritatis eum libero nam, adipisci, necessitatibus eos.</p> <p class="indigo-text">Sapiente, ea. Molestias sunt nihil saepe numquam quas perferendis.</p> <p class="blue-text">Sapiente sit, possimus maiores, quo alias corporis cum eum nesciunt.</p> <p class="light-blue-text">Corrupti adipisci, praesentium iusto eos, iure debitis modi.</p> <p class="cyan-text">Odio autem veritatis aliquam consequuntur ea voluptatibus.</p> <p class="teal-text">Similique, adipisci ea, sequi magnam sit inventore.</p> <p class="green-text">Eos et vitae, odit deserunt dignissimos voluptas.</p> <p class="light-green-text">Fugit nihil numquam inventore accusantium tenetur ex est.</p> <p class="lime-text">Sed odit inventore illum excepturi officia, reiciendis numquam modi.</p> <p class="yellow-text">At odio animi distinctio, aut enim tempora nobis error odit mollitia.</p> <p class="amber-text">Quo at accusamus vel earum hic, inventore non, minima sint.</p> <p class="orange-text">Iusto odit eos distinctio temporibus voluptates ad, illo repellat.</p> <p class="deep-orange-text">Quas fugit fuga assumenda nihil esse et culpa reiciendis voluptatum.</p> <p class="brown-text">Excepturi iusto amet sunt illo ad debitis quibusdam eius, consequatur.</p> <p class="grey-text">Non sint nulla incidunt, odit repellat tempore, veniam ratione fugit.</p> <p class="blue-grey-text">Eius, provident. Quo similique, repellat atque voluptas explicabo odio.</p> <p class="mdb-color white-text">In consequuntur error, non consequatur expedita maxime dolorum.</p> </div> <!--/First column--> </div> <!--/Fourth row--> </section> <!--/Section: Typography--> <hr class="wow fadeIn" data-wow-delay="0.4s"> <!--Section: Icons--> <section class="mt-3 mb-3 wow fadeIn" data-wow-delay="0.4s"> <!--Section heading--> <h1 class="section-heading pb-4">Icons</h1> <!--First row--> <div class="row mb-3"> <!--First column--> <div class="col-md-3"> <ul> <li><i class="fa fa-camera-retro fa-lg mb-1 deep-purple-text"></i> fa-lg</li> <li><i class="fa fa-camera-retro fa-2x mb-1 deep-purple-text"></i> fa-2x</li> <li><i class="fa fa-camera-retro fa-3x mb-1 deep-purple-text"></i> fa-3x</li> <li><i class="fa fa-camera-retro fa-4x mb-1 deep-purple-text"></i> fa-4x</li> <li><i class="fa fa-camera-retro fa-5x mb-1 deep-purple-text"></i> fa-5x</li> </ul> </div> <!--/First column--> <!--Second column--> <div class="col-md-3"> <ul> <li><i class="fa fa-heart-o fa-lg mb-1 red-text"></i> fa-lg</li> <li><i class="fa fa-heart-o fa-2x mb-1 red-text"></i> fa-2x</li> <li><i class="fa fa-heart-o fa-3x mb-1 red-text"></i> fa-3x</li> <li><i class="fa fa-heart-o fa-4x mb-1 red-text"></i> fa-4x</li> <li><i class="fa fa-heart-o fa-5x mb-1 red-text"></i> fa-5x</li> </ul> </div> <!--/Second column--> <!--Third column--> <div class="col-md-3"> <ul> <li><i class="fa fa-umbrella fa-lg mb-1 cyan-text"></i> fa-lg</li> <li><i class="fa fa-umbrella fa-2x mb-1 cyan-text"></i> fa-2x</li> <li><i class="fa fa-umbrella fa-3x mb-1 cyan-text"></i> fa-3x</li> <li><i class="fa fa-umbrella fa-4x mb-1 cyan-text"></i> fa-4x</li> <li><i class="fa fa-umbrella fa-5x mb-1 cyan-text"></i> fa-5x</li> </ul> </div> <!--/Third column--> <!--Fourth column--> <div class="col-md-3"> <ul> <li><i class="fa fa-snapchat-ghost fa-lg mb-1 amber-text"></i> fa-lg</li> <li><i class="fa fa-snapchat-ghost fa-2x mb-1 amber-text"></i> fa-2x</li> <li><i class="fa fa-snapchat-ghost fa-3x mb-1 amber-text"></i> fa-3x</li> <li><i class="fa fa-snapchat-ghost fa-4x mb-1 amber-text"></i> fa-4x</li> <li><i class="fa fa-snapchat-ghost fa-5x mb-1 amber-text"></i> fa-5x</li> </ul> </div> <!--/Fourth column--> </div> <!--/First row--> <!--Second row--> <div class="row text-center"> <div class="col-md-12"> <p class="lead">To see the full list of available icons click the button below</p> </div> <div class="col-md-12"> <div class="flex-center"> <a href="https://mdbootstrap.com/css/icons-list/" class="btn btn-info">Icons list</a> </div> </div> </div> <!--/Second row--> </section> <!--/Section: Icons--> <hr class="wow fadeIn" data-wow-delay="0.4s"> <!--Section: Animations--> <section class="section mt-3 mb-3 wow fadeIn" data-wow-delay="0.4s"> <!--Section heading--> <h1 class="section-heading">Animations</h1> <p class="lead"><strong>Over 70 CSS animations</strong> </p> <p class="mt-3 mb-3">Bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.</p> <!--First row--> <div class="row"> <!--First column--> <div class="col-md-4 wow bounceInUp"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(58).jpg" alt="" class="img-fluid"> </div> <!--/First column--> <!--Second column--> <div class="col-md-4 wow tada"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(32).jpg" alt="" class="img-fluid"> </div> <!--/Second column--> <!--Third column--> <div class="col-md-4 wow fadeInLeft"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(33).jpg" alt="" class="img-fluid"> </div> <!--/Third column--> </div> <!--/First row--> <br> <!--Second row--> <div class="row"> <!--First column--> <div class="col-md-4 wow fadeInRight"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(3).jpg" alt="" class="img-fluid"> </div> <!--/First column--> <!--Second column--> <div class="col-md-4 wow fadeInUp" data-wow-delay="0.2s"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(10).jpg" alt="" class="img-fluid"> </div> <!--/Second column--> <!--Third column--> <div class="col-md-4 wow fadeInUp" data-wow-delay="0.6s"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(46).jpg" alt="" class="img-fluid"> </div> <!--/Third column--> </div> <!--/Second row--> </section> <!--/Section: Animations--> <hr class="wow fadeIn" data-wow-delay="0.4s"> <!--Section: Miscellaneous--> <section class="section mt-3 mb-3 wow fadeIn" data-wow-delay="0.4s"> <!--Section heading--> <h1 class="section-heading">Miscellaneous</h1> <!--First row--> <div class="row"> <!--First column--> <div class="col-md-5"> <!--Component title--> <h5 class="mb-2">Paginations </h5> <!--Pagination blue--> <nav> <ul class="pagination pg-blue"> <!--Arrow left--> <li class="page-item"> <a class="page-link" aria-label="Previous"> <span aria-hidden="true">«</span> <span class="sr-only">Previous</span> </a> </li> <!--Numbers--> <li class="page-item active"><a class="page-link">1</a></li> <li class="page-item"><a class="page-link">2</a></li> <li class="page-item"><a class="page-link">3</a></li> <li class="page-item"><a class="page-link">4</a></li> <li class="page-item"><a class="page-link">5</a></li> <!--Arrow right--> <li class="page-item"> <a class="page-link" aria-label="Next"> <span aria-hidden="true">»</span> <span class="sr-only">Next</span> </a> </li> </ul> </nav> <!--/Pagination blue--> <!--Pagination red--> <nav> <ul class="pagination pg-red"> <!--Arrow left--> <li class="page-item"> <a class="page-link" aria-label="Previous"> <span aria-hidden="true">«</span> <span class="sr-only">Previous</span> </a> </li> <!--Numbers--> <li class="page-item active"><a class="page-link">1</a></li> <li class="page-item"><a class="page-link">2</a></li> <li class="page-item"><a class="page-link">3</a></li> <li class="page-item"><a class="page-link">4</a></li> <li class="page-item"><a class="page-link">5</a></li> <!--Arrow right--> <li class="page-item"> <a class="page-link" aria-label="Next"> <span aria-hidden="true">»</span> <span class="sr-only">Next</span> </a> </li> </ul> </nav> <!--/Pagination red--> <!--Pagination teal--> <nav> <ul class="pagination pg-teal"> <!--Arrow left--> <li class="page-item"> <a class="page-link" aria-label="Previous"> <span aria-hidden="true">«</span> <span class="sr-only">Previous</span> </a> </li> <!--Numbers--> <li class="page-item active"><a class="page-link">1</a></li> <li class="page-item"><a class="page-link">2</a></li> <li class="page-item"><a class="page-link">3</a></li> <li class="page-item"><a class="page-link">4</a></li> <li class="page-item"><a class="page-link">5</a></li> <!--Arrow right--> <li class="page-item"> <a class="page-link" aria-label="Next"> <span aria-hidden="true">»</span> <span class="sr-only">Next</span> </a> </li> </ul> </nav> <!--/Pagination teal--> <!--Pagination dark--> <nav> <ul class="pagination pg-dark"> <!--Arrow left--> <li class="page-item"> <a class="page-link" aria-label="Previous"> <span aria-hidden="true">«</span> <span class="sr-only">Previous</span> </a> </li> <!--Numbers--> <li class="page-item active"><a class="page-link">1</a></li> <li class="page-item"><a class="page-link">2</a></li> <li class="page-item"><a class="page-link">3</a></li> <li class="page-item"><a class="page-link">4</a></li> <li class="page-item"><a class="page-link">5</a></li> <!--Arrow right--> <li class="page-item"> <a class="page-link" aria-label="Next"> <span aria-hidden="true">»</span> <span class="sr-only">Next</span> </a> </li> </ul> </nav> <!--/Pagination dark--> <!--Pagination blue grey--> <nav> <ul class="pagination pg-bluegrey"> <!--Arrow left--> <li class="page-item"> <a class="page-link" aria-label="Previous"> <span aria-hidden="true">«</span> <span class="sr-only">Previous</span> </a> </li> <!--Numbers--> <li class="page-item active"><a class="page-link">1</a></li> <li class="page-item"><a class="page-link">2</a></li> <li class="page-item"><a class="page-link">3</a></li> <li class="page-item"><a class="page-link">4</a></li> <li class="page-item"><a class="page-link">5</a></li> <!--Arrow right--> <li class="page-item"> <a class="page-link" aria-label="Next"> <span aria-hidden="true">»</span> <span class="sr-only">Next</span> </a> </li> </ul> </nav> <!--/Pagination grey--> <!--Pagination amber--> <nav> <ul class="pagination pg-amber"> <!--Arrow left--> <li class="page-item"> <a class="page-link" aria-label="Previous"> <span aria-hidden="true">«</span> <span class="sr-only">Previous</span> </a> </li> <!--Numbers--> <li class="page-item active"><a class="page-link">1</a></li> <li class="page-item"><a class="page-link">2</a></li> <li class="page-item"><a class="page-link">3</a></li> <li class="page-item"><a class="page-link">4</a></li> <li class="page-item"><a class="page-link">5</a></li> <!--Arrow right--> <li class="page-item"> <a class="page-link" aria-label="Next"> <span aria-hidden="true">»</span> <span class="sr-only">Next</span> </a> </li> </ul> </nav> <!--/Pagination amber--> <!--Pagination purple--> <nav> <ul class="pagination pg-purple"> <!--Arrow left--> <li class="page-item"> <a class="page-link" aria-label="Previous"> <span aria-hidden="true">«</span> <span class="sr-only">Previous</span> </a> </li> <!--Numbers--> <li class="page-item active"><a class="page-link">1</a></li> <li class="page-item"><a class="page-link">2</a></li> <li class="page-item"><a class="page-link">3</a></li> <li class="page-item"><a class="page-link">4</a></li> <li class="page-item"><a class="page-link">5</a></li> <!--Arrow right--> <li class="page-item"> <a class="page-link" aria-label="Next"> <span aria-hidden="true">»</span> <span class="sr-only">Next</span> </a> </li> </ul> </nav> <!--/Pagination purple--> <!--Pagination dark grey--> <nav> <ul class="pagination pg-darkgrey"> <!--Arrow left--> <li class="page-item"> <a class="page-link" aria-label="Previous"> <span aria-hidden="true">«</span> <span class="sr-only">Previous</span> </a> </li> <!--Numbers--> <li class="page-item active"><a class="page-link">1</a></li> <li class="page-item"><a class="page-link">2</a></li> <li class="page-item"><a class="page-link">3</a></li> <li class="page-item"><a class="page-link">4</a></li> <li class="page-item"><a class="page-link">5</a></li> <!--Arrow right--> <li class="page-item"> <a class="page-link" aria-label="Next"> <span aria-hidden="true">»</span> <span class="sr-only">Next</span> </a> </li> </ul> </nav> <!--/Pagination dark grey--> </div> <!--/First column--> <!--Second column--> <div class="col-md-7"> <!--Component title--> <h5 class="mb-2">Tags </h5> <h1>Example heading <span class="badge red">New</span></h1> <h2>Example heading <span class="badge blue">New</span></h2> <h3>Example heading <span class="badge black">New</span></h3> <h4>Example heading <span class="badge green">New</span></h4> <h5>Example heading <span class="badge grey">New</span></h5> <h6>Example heading <span class="badge indigo">New</span></h6> </div> <!--/Second column--> </div> <!--/First row--> </section> <!--/Section: Miscellaneous--> <hr class="wow fadeIn" data-wow-delay="0.4s"> <!--Section: Hover effects--> <section class="mt-3 mb-4 wow fadeIn" data-wow-delay="0.4s"> <!--Section heading--> <h1 class="section-heading pb-4"> Hover effects</h1> <!--Component title--> <h5 class="mb-3">Overlay effect</h5> <!--First row--> <div class="row"> <!--First column--> <div class="col-md-4"> <div class="view overlay hm-blue-light"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(75).jpg" class="img-fluid " alt=""> <div class="mask flex-center"> <p class="white-text">Light overlay</p> </div> </div> </div> <!--/First column--> <!--Second column--> <div class="col-md-4"> <div class="view overlay hm-red-strong"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(75).jpg" class="img-fluid " alt=""> <div class="mask flex-center"> <p class="white-text">Strong overlay</p> </div> </div> </div> <!--Second column--> <!--Third column--> <div class="col-md-4"> <div class="view overlay hm-green-slight"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(75).jpg" class="img-fluid " alt=""> <div class="mask flex-center"> <p class="white-text">Super light overlay</p> </div> </div> </div> <!--/Third column--> </div> <!--/First row--> <!--Second row--> <div class="row"> <!--First column--> <div class="col-md-6"> <h5 class="mt-3 mb-3">Zoom effect</h5> <div class="view overlay hm-zoom"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(2).jpg" class="img-fluid " alt=""> <div class="mask flex-center"> <p class="white-text">Zoom effect</p> </div> </div> </div> <!--/First column--> <!--Second column--> <div class="col-md-6"> <h5 class="mt-3 mb-3">Shadow effect</h5> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(32).jpg" class="img-fluid rounded-circle hoverable" alt=""> </div> <!--/Second column--> </div> <!--/Second row--> </section> <!--/Section: Hover effects--> <hr class="wow fadeIn" data-wow-delay="0.4s"> <!--Section: More--> <section class="section text-center wow fadeIn" data-wow-delay="0.4s"> <!--Section heading--> <h1 class="section-heading">...and many more</h1> <!--First row--> <div class="row"> <!--First column--> <div class="col-md-6 mb-r"> <!--Featured image--> <div class="view overlay hm-white-slight"> <img src="https://mdbootstrap.com/img/Mockups/Horizontal/6-col/section.jpg"> <a href="https://mdbootstrap.com/sections/"> <div class="mask waves-effect waves-light"></div> </a> </div> <!--Excerpt--> <div class="card-block"> <h4 class="mt-1 mb-2">Sections</h4> <a href="https://mdbootstrap.com/sections/" class="btn btn-info ">Live preview</a> </div> </div> <!--/First column--> <!--Second column--> <div class="col-md-6 mb-r"> <!--Featured image--> <div class="view overlay hm-white-slight"> <img src="https://mdbootstrap.com/img/Mockups/Horizontal/6-col/templates.jpg"> <a href="https://mdbootstrap.com/templates-2/"> <div class="mask waves-effect waves-light"></div> </a> </div> <!--Excerpt--> <div class="card-block"> <h4 class="mt-1 mb-2">Templates</h4> <a href="https://mdbootstrap.com/templates-2/" class="btn btn-info ">Live preview</a> </div> </div> <!--/Second column--> <!--Third column--> <div class="col-md-6 mb-r"> <!--Featured image--> <div class="view overlay hm-white-slight"> <img src="https://mdbootstrap.com/img/Mockups/Horizontal/6-col/css.jpg"> <a href="https://mdbootstrap.com/css/"> <div class="mask waves-effect waves-light"></div> </a> </div> <!--Excerpt--> <div class="card-block"> <h4 class="mt-1 mb-2">CSS</h4> <a href="https://mdbootstrap.com/css/" class="btn btn-info ">Live preview</a> </div> </div> <!--/Third column--> <!--Fourth column--> <div class="col-md-6 mb-r"> <!--Featured image--> <div class="view overlay hm-white-slight"> <img src="https://mdbootstrap.com/img/Mockups/Horizontal/6-col/javascript.jpg"> <a href="https://mdbootstrap.com/javascript/"> <div class="mask waves-effect waves-light"></div> </a> </div> <!--Excerpt--> <div class="card-block"> <h4 class="mt-1 mb-2">JavaScript plugins</h4> <a href="https://mdbootstrap.com/javascript/" class="btn btn-info ">Live preview</a> </div> </div> <!--/Fourth column--> </div> <!--/First row--> </section> <!--/Section: More--> </div> </main> <!--/Main layout--> <script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/js/mdb.min.js"></script> <script> //Animations on scroll new WOW().init(); </script>
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css); @import url(https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/css/mdb.min.css);
// Adds some data to charts $(function() { var data = { labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"], datasets: [{ label: "My First dataset", fillColor: "rgba(220,220,220,0.2)", strokeColor: "rgba(220,220,220,1)", pointColor: "rgba(220,220,220,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(220,220,220,1)", data: [65, 59, 80, 81, 56, 55, 40] }, { label: "My Second dataset", fillColor: "rgba(151,187,205,0.2)", strokeColor: "rgba(151,187,205,1)", pointColor: "rgba(151,187,205,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(151,187,205,1)", data: [28, 48, 40, 19, 86, 27, 90] }] }; var option = { responsive: true, scaleFontSize: 10, }; //Chart 1 var ctx = document.getElementById("lineChartEx").getContext('2d'); var lineChart = new Chart(ctx).Line(data, option); // Chart 2 var ctx = document.getElementById("radarChartEx").getContext('2d'); var radarChart = new Chart(ctx).Radar(data, option); // Chart 3 var ctx = document.getElementById("barChartEx").getContext('2d'); var barChart = new Chart(ctx).Bar(data, option); }); $(function() { var data = [{ value: 300, color: "#F7464A", highlight: "#FF5A5E", label: "Red" }, { value: 50, color: "#46BFBD", highlight: "#5AD3D1", label: "Green" }, { value: 100, color: "#FDB45C", highlight: "#FFC870", label: "Yellow" }, { value: 40, color: "#949FB1", highlight: "#A8B3C5", label: "Grey" }, { value: 120, color: "#4D5360", highlight: "#616774", label: "Dark Grey" }]; var option = { responsive: true, }; //Chart 4 var ctx = document.getElementById("polarChartEx").getContext('2d'); var myPolarChart = new Chart(ctx).PolarArea(data, option); //Chart 5 var ctx = document.getElementById("pieChartEx").getContext('2d'); var myPieChart = new Chart(ctx).Pie(data, option); //Chart 6 var ctx = document.getElementById("doughnutChartEx").getContext('2d'); var myDoughnutChart = new Chart(ctx).Doughnut(data, option); });

Similar snippets: See More


Comments:

comments powered by Disqus