D7net
Home
Console
Upload
information
Create File
Create Folder
About
Tools
:
/
var
/
www
/
html
/
epaji.com
/
public_html
/
hindiusa
/
web
/
themes
/
kidz
/
Filename :
component-default.html
back
Copy
<!DOCTYPE html> <html lang="en"> <head> <!-- Site Tittle --> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Breadcrumb - KIDZ SCHOOL</title> <!-- Plugins css Style --> <link href="assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet"> <link href="assets/plugins/no-ui-slider/nouislider.min.css" rel="stylesheet"/> <link href="assets/plugins/owl-carousel/owl.carousel.min.css" rel="stylesheet" media="screen"> <link href="assets/plugins/owl-carousel/owl.theme.default.min.css" rel="stylesheet" media="screen"> <link href="assets/plugins/fancybox/jquery.fancybox.min.css" rel="stylesheet"/> <link href="assets/plugins/isotope/isotope.min.css" rel="stylesheet"/> <link href="assets/plugins/animate/animate.css" rel="stylesheet"> <link href="assets/plugins/select2/css/select2.min.css" rel="stylesheet"> <link href="assets/plugins/revolution/css/settings.css" rel="stylesheet"> <link href="assets/plugins/revolution/css/layers.css" rel="stylesheet"> <link href="assets/plugins/revolution/css/navigation.css" rel="stylesheet"> <!-- Fonts --> <link href="https://fonts.googleapis.com/css?family=Dosis:300,400,600,700|Open+Sans:300,400,600,700" rel="stylesheet"> <!-- Custom css --> <link href="assets/css/kidz.css" id="option_style" rel="stylesheet"> <!-- Favicon --> <link href="assets/img/favicon.png" rel="shortcut icon"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body id="body" class="up-scroll" data-spy="scroll" data-target=".element-right-sidebar"> <!-- ==================================== ——— HEADER ===================================== --> <header class="header main-wrapper" id="pageTop"> <!-- Top Color Bar --> <div class="color-bars"> <div class="container-fluid"> <div class="row"> <div class="col color-bar bg-warning d-none d-md-block"></div> <div class="col color-bar bg-success d-none d-md-block"></div> <div class="col color-bar bg-danger d-none d-md-block"></div> <div class="col color-bar bg-info d-none d-md-block"></div> <div class="col color-bar bg-purple d-none d-md-block"></div> <div class="col color-bar bg-pink d-none d-md-block"></div> <div class="col color-bar bg-warning"></div> <div class="col color-bar bg-success"></div> <div class="col color-bar bg-danger"></div> <div class="col color-bar bg-info"></div> <div class="col color-bar bg-purple"></div> <div class="col color-bar bg-pink"></div> </div> </div> </div> <!-- Top Bar--> <!-- d-none d-md-block --> <div class=" bg-stone top-bar"> <div class="container"> <div class="row"> <div class="col-lg-7 d-none d-lg-block"> <ul class="list-inline d-flex justify-content-xl-start align-items-center h-100 mb-0"> <li> <span class="bg-warning icon-header mr-xl-2"> <i class="fa fa-envelope" aria-hidden="true"></i> </span> <a href="mailto:info@yourdomain.com" class="mr-lg-4 mr-xl-6 text-white opacity-80">info@yourdomain.com</a> </li> <li> <span class="bg-success icon-header mr-xl-2"> <i class="fa fa-phone" aria-hidden="true"></i> </span> <a href="tel:+1 234 567 8900" class="mr-lg-4 mr-xl-6 text-white opacity-80"> +1 234 567 8900 </a> </li> <li class="text-white"> <span class="bg-pink icon-header"> <i class="fa fa-clock-o" aria-hidden="true"></i> </span> <span class="opacity-80">Open: 9am - 6pm</span> </li> </ul> </div> <div class="col-lg-5"> <ul class="list-inline d-flex mb-0 justify-content-xl-end justify-content-center align-items-center mr-xl-2"> <li> <span class="bg-info icon-header mr-lg-0 mr-xl-1"> <i class="fa fa-globe" aria-hidden="true"></i> </span> </li> <li class="mr-3 mr-md-4 mr-lg-3 mr-xl-5 dropdown dropdown-sm"> <button class="btn btn-link dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Language </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">English</a> <a class="dropdown-item" href="#">Spanish</a> <a class="dropdown-item" href="#">Hindi</a> </div> </li> <li class="text-white mr-md-3 mr-lg-2 mr-xl-5"> <span class="bg-purple icon-header mr-1 mr-md-2 mr-lg-1 mr-xl-2"> <i class="fa fa-unlock-alt text-white font-size-13" aria-hidden="true"></i> </span> <a class="text-white font-weight-medium opacity-80" href="javascript:void(0)" data-toggle="modal" data-target="#modal-login"> Login </a> <span class="text-white opacity-80">or</span> <a class="text-white font-weight-medium opacity-80" href="javascript:void(0)" data-toggle="modal" data-target="#modal-createAccount">Create an account</a> </li> <li class="cart-dropdown d-none d-md-block"> <div data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static"> <a href="javascript:void(0)"> <span class="rounded-sm bg-pink icon-small icon-badge d-none close-icon"> <i class="fa fa-close text-white" aria-hidden="true"></i> </span> <span class="rounded-sm bg-pink icon-small icon-badge shopping-icon"> <i class="fa fa-shopping-basket text-white" aria-hidden="true"></i> <span class="badge bg-warning">3</span> </span> </a> </div> <div class="dropdown-menu dropdown-menu-right"> <ul class="bg-white list-unstyled"> <li class="d-flex align-items-center"> <i class="fa fa-shopping-basket font-size-20 mr-3" aria-hidden="true"></i> <h3 class="text-capitalize font-weight-bold mb-0">3 items in your cart</h3> </li> <hr> <li> <a href="product-single.html"> <div class="media"> <div class="image"> <img class="bg-light rounded-sm px-5 py-3 mr-4" src="assets/img/products/product-sm.png" alt="cart-Image"> </div> <div class="media-body"> <div class="d-flex justify-content-between"> <h4 class="text-dark">Barbie Racing Car</h4> <span class="cancel"> <i class="fa fa-close text-muted" aria-hidden="true"></i> </span> </div> <div class="price"> <span class="text-warning font-weight-medium">$50</span> </div> <span class="text-muted font-weight-medium text-muted">Qnt: 1</span> </div> </div> </a> <hr> </li> <li> <a href="product-single.html"> <div class="media"> <div class="image"> <img class="bg-light rounded-sm px-5 py-3 mr-4" src="assets/img/products/product-sm.png" alt="cart-Image"> </div> <div class="media-body"> <div class="d-flex justify-content-between"> <h4 class="text-dark">Barbie Racing Car</h4> <span class="cancel"> <i class="fa fa-close text-muted" aria-hidden="true"></i> </span> </div> <div class="price"> <span class="text-warning font-weight-medium">$50</span> </div> <span class="text-muted font-weight-medium">Qnt: 1</span> </div> </div> </a> <hr> </li> <li> <a href="product-single.html"> <div class="media"> <div class="image"> <img class="bg-light rounded-sm px-5 py-3 mr-4" src="assets/img/products/product-sm.png" alt="cart-Image"> </div> <div class="media-body"> <div class="d-flex justify-content-between"> <h4 class="text-dark font-weight-bold">Barbie Racing Car</h4> <span class="cancel"> <i class="fa fa-close text-muted" aria-hidden="true"></i> </span> </div> <div class="price"> <span class="text-warning font-weight-medium">$50</span> </div> <span class="text-muted font-weight-medium">Qnt: 1</span> </div> </div> </a> <hr> </li> <li> <div class="d-flex justify-content-between mb-3"> <h3 class="cart-total font-weight-bold">Subtotal</h3> <h3 class="cart-price font-weight-bold">$150</h3> </div> <div class="cart-button d-flex justify-content-between"> <button type="button" class="btn btn-danger text-uppercase px-4 shadow-sm mr-3" onclick="location.href='product-checkout-step-1.html';">Checkout</button> <button type="button" class="btn btn-danger text-uppercase px-4 shadow-sm" onclick="location.href='product-cart.html';">View Cart</button> </div> </li> </ul> </div> </li> </ul> </div> </div> </div> </div> <!-- Navbar --> <nav class="navbar navbar-expand-md navbar-scrollUp navbar-sticky navbar-white"> <div class="container"> <a class="navbar-brand" href="index.html"> <img class="d-inline-block" src="assets/img/logo-school.png" alt="Kidz School"> </a> <!-- cart-dropdown --> <div class="dropdown cart-dropdown ml-auto mr-5 d-md-none"> <div data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <a href="javascript:void(0)"> <span class="rounded-sm bg-pink icon-small icon-badge d-none close-icon"> <i class="fa fa-close text-white" aria-hidden="true"></i> </span> <span class="rounded-sm bg-pink icon-small icon-badge shopping-icon"> <i class="fa fa-shopping-basket text-white" aria-hidden="true"></i> <span class="badge bg-warning">3</span> </span> </a> </div> <div class="dropdown-menu dropdown-menu-right"> <ul class="bg-white list-unstyled"> <li class="d-flex align-items-center"> <i class="fa fa-shopping-basket font-size-20 mr-3" aria-hidden="true"></i> <h3 class="text-capitalize font-weight-bold mb-0">3 items in your cart</h3> </li> <hr> <li> <a href="product-single.html"> <div class="media"> <div class="image"> <img class="mr-4 p-2 bg-light" src="assets/img/products/product-sm.png" alt="cart-Image"> </div> <div class="media-body"> <div class="d-flex justify-content-between"> <h4 class="text-dark">Barbie Racing Car</h4> <span class="cancel"> <i class="fa fa-close text-muted" aria-hidden="true"></i> </span> </div> <div class="price"> <span class="text-warning font-weight-medium">$50</span> </div> <span class="text-muted font-weight-medium text-muted">Qnt: 1</span> </div> </div> </a> <hr> </li> <li> <a href="product-single.html"> <div class="media"> <div class="image"> <img class="mr-4 p-2 bg-light" src="assets/img/products/product-sm.png" alt="cart-Image"> </div> <div class="media-body"> <div class="d-flex justify-content-between"> <h4 class="text-dark">Barbie Racing Car</h4> <span class="cancel"> <i class="fa fa-close text-muted" aria-hidden="true"></i> </span> </div> <div class="price"> <span class="text-warning font-weight-medium">$50</span> </div> <span class="text-muted font-weight-medium">Qnt: 1</span> </div> </div> </a> <hr> </li> <li> <a href="product-single.html"> <div class="media"> <div class="image"> <img class="mr-4 p-2 bg-light" src="assets/img/products/product-sm.png" alt="cart-Image"> </div> <div class="media-body"> <div class="d-flex justify-content-between"> <h4 class="text-dark font-weight-bold">Barbie Racing Car</h4> <span class="cancel"> <i class="fa fa-close text-muted" aria-hidden="true"></i> </span> </div> <div class="price"> <span class="text-warning font-weight-medium">$50</span> </div> <span class="text-muted font-weight-medium">Qnt: 1</span> </div> </div> </a> <hr> </li> <li> <div class="d-flex justify-content-between mb-3"> <h3 class="cart-total font-weight-bold">Subtotal</h3> <h3 class="cart-price font-weight-bold">$150</h3> </div> <div class="cart-button d-flex justify-content-between"> <button type="button" class="btn btn-danger text-uppercase px-4 shadow-sm mr-3" onclick="location.href='product-checkout-step-1.html';">Checkout</button> <button type="button" class="btn btn-danger text-uppercase px-4 shadow-sm" onclick="location.href='product-cart.html';">View Cart</button> </div> </li> </ul> </div> </div> <button class="navbar-toggler py-2" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation"> <i class="fa fa-bars"></i> </button> <div class="collapse navbar-collapse" id="navbarContent"> <ul class="navbar-nav ml-lg-auto"> <li class="nav-item dropdown bg-warning"> <a class="nav-link dropdown-toggle " href="javascript:void(0)" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fa fa-home nav-icon" aria-hidden="true"></i> <span>Home</span> </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown1"> <li> <a class="dropdown-item " href="index.html">Kidz School</a> </li> <li> <a class="dropdown-item " href="index-v2.html">Kidz Store</a> </li> <li> <a class="dropdown-item " href="index-v3.html">Kidz Daycare</a> </li> <li> <a class="dropdown-item " href="index-v4.html">Kidz Fashion</a> </li> </ul> </li> <li class="nav-item dropdown bg-danger"> <a class="nav-link dropdown-toggle " href="javascript:void(0)" role="button" data-toggle="dropdown"> <i class="fa fa-list-ul nav-icon" aria-hidden="true"></i> <span>Pages</span> </a> <ul class="dropdown-menu"> <li> <a class="dropdown-item " href="about-us.html">About Us</a> </li> <li> <a class="dropdown-item " href="javascript:void(0)"> Team <i class="fa fa-chevron-right" aria-hidden="true"></i> </a> <ul class="sub-menu"> <li><a class="" href="teachers.html">Teachers</a></li> <li><a class="" href="teachers-details.html">Teachers Details</a></li> </ul> </li> <li> <a class="dropdown-item " href="testimonial.html">Testimonial</a> </li> <li> <a class="dropdown-item || || " href="javascript:void(0)">Events<i class="fa fa-chevron-right" aria-hidden="true"></i></a> <ul class="sub-menu"> <li><a class=" " href="events.html">All Events</a></li> <li> <a class="" href="event-single-left-sidebar.html">Events Left Sidebar</a> </li> <li> <a class="" href="event-single-right-sidebar.html">Events Right Sidebar</a> </li> </ul> </li> <li> <a class="dropdown-item " href="photo-gallery.html">Photo Gallery</a> </li> <li> <a class="dropdown-item " href="pricing-table.html">Pricing Table</a> </li> <li> <a class="dropdown-item " href="services.html">Services</a> </li> <li> <a class="dropdown-item " href="services-details.html">Services Details</a> </li> <li> <a class="dropdown-item " href="search-result.html">Search Result</a> </li> <li> <a class="dropdown-item " href="contact-us.html">Contact Us</a> </li> <li> <a class="dropdown-item " href="faq.html">FAQ</a> </li> <li> <a class="dropdown-item " href="sign-up-or-login.html">Sign Up / Login</a> </li> <li> <a class="dropdown-item " href="404.html">Error 404</a> </li> <li> <a class="dropdown-item" href="coming-soon.html">Coming Soon</a> </li> </ul> </li> <li class="nav-item dropdown mega-dropdown bg-success"> <a class="nav-link dropdown-toggle " href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fa fa-file-text-o nav-icon" aria-hidden="true"></i> <span>Courses</span> </a> <div class="dropdown-menu row" > <div class="col-12 col-md-3"> <ul class="list-unstyled"> <li>Courses Grid</li> <li><a class="" href="courses-grid-full.html">Courses Grid Fullwidth</a></li> <li><a class="" href="courses-grid-left-sidebar.html">Courses Grid Left Sidebar</a></li> <li><a class="" href="courses-grid-right-sidebar.html">Courses Grid Right Sidebar</a></li> </ul> </div> <div class="col-12 col-md-3"> <ul class="list-unstyled"> <li>Courses List</li> <li><a class="" href="course-list-fullwidth.html">Courses List Fullwidth</a></li> <li><a class="" href="course-list-left-sidebar.html">Courses List left Sidebar</a></li> <li><a class="" href="course-list-right-sidebar.html">Courses List Right Sidebar</a></li> </ul> </div> <div class="col-12 col-md-3"> <ul class="list-unstyled"> <li>Single Course</li> <li><a class="" href="course-single.html">Single Course Fullwidth</a></li> <li><a class="" href="course-single-left-sidebar.html">Single Course left Sidebar</a></li> <li><a class="" href="course-single-right-sidebar.html">Single Course Right Sidebar</a></li> </ul> </div> <div class="col-12 col-md-3"> <ul class="list-unstyled"> <li>Checkout</li> <li><a class="" href="product-checkout-step-1.html">Personal Info</a></li> <li><a class="" href="product-checkout-step-2.html">Payment Info</a></li> <li><a class="" href="product-checkout-step-3.html">Confirmation</a></li> </ul> </div> </div> </li> <li class="nav-item dropdown bg-info"> <a class="nav-link dropdown-toggle " href="javascript:void(0)" id="stores" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fa fa-pencil-square-o nav-icon" aria-hidden="true"></i> <span>Store</span> </a> <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="stores"> <li> <a class="dropdown-item || || " href="javascript:void(0)">Products<i class="fa fa-chevron-right" aria-hidden="true"></i></a> <ul class="sub-menu"> <li><a class="" href="products.html">Products Fullwidth</a></li> <li><a class="" href="product-left-sidebar.html">Products Left Sidebar</a></li> <li><a class="" href="product-right-sidebar.html">Products Right Sidebar</a></li> </ul> </li> <li> <a class="dropdown-item " href="product-single.html">Single Product</a> </li> <li> <a class="dropdown-item " href="product-category.html">Product Categories</a> </li> <li> <a class="dropdown-item " href="product-cart.html">Cart</a> </li> <li> <a class="dropdown-item || || " href="javascript:void(0)">Checkout<i class="fa fa-chevron-right" aria-hidden="true"></i></a> <ul class="sub-menu"> <li> <a class="" href="product-checkout-step-1.html">Personal Info</a> </li> <li> <a class="" href="product-checkout-step-2.html">Payment Info</a> </li> <li> <a class="" href="product-checkout-step-3.html">Confirmation</a> </li> </ul> </li> </ul> </li> <li class="nav-item dropdown bg-purple"> <a class="nav-link dropdown-toggle " href="javascript:void(0)" id="stores" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fa fa-calendar nav-icon" aria-hidden="true"></i> <span>Blog</span> </a> <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="stores"> <li> <a class="dropdown-item || || " href="javascript:void(0)">Blog Grid<i class="fa fa-chevron-right" aria-hidden="true"></i></a> <ul class="sub-menu"> <li><a class="" href="blog-grid.html">Blog Grid Fullwidth</a></li> <li><a class="" href="blog-grid-left-sidebar.html">Blog Grid Left Sidebar</a></li> <li><a class="" href="blog-grid-right-sidebar.html">Blog Grid Right Sidebar</a></li> </ul> </li> <li> <a class="dropdown-item || || " href="javascript:void(0)">Blog List<i class="fa fa-chevron-right" aria-hidden="true"></i></a> <ul class="sub-menu"> <li><a class="" href="blog-list.html">Blog List Fullwidth</a></li> <li><a class="" href="blog-list-left-sidebar.html">Blog List Left Sidebar</a></li> <li><a class="" href="blog-list-right-sidebar.html">Blog List Right Sidebar</a></li> </ul> </li> <li> <a class="dropdown-item || || " href="javascript:void(0)">Single Blog<i class="fa fa-chevron-right" aria-hidden="true"></i></a> <ul class="sub-menu"> <li><a class="" href="blog-single.html">Blog Single Fullwidth</a></li> <li><a class="" href="blog-single-left-sidebar.html">Blog Single Left Sidebar</a></li> <li><a class="" href="blog-single-right-sidebar.html">Blog Single Right Sidebar</a></li> </ul> </li> </ul> </li> <li class="nav-item dropdown bg-pink"> <a class="nav-link dropdown-toggle active " href="component-default.html"> <i class="fa fa-home nav-icon" aria-hidden="true"></i> <span>components</span> </a> </li> </ul> </div> </div> </nav> </header> <div class="main-wrapper components"> <!-- ==================================== ——— BREADCRUMB ===================================== --> <section class="bg-info" style="background-image: url(assets/img/background/page-title-bg-img.jpg); background-size:cover; background-position:bottom center; background-repeat:no-repeat;"> <div class="container"> <div class="row breadcrumb-element"> <div class="col-12 col-md-12"> <h1>Components</h1> <p>Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. <a class="text-white" href=" https://getbootstrap.com/docs/4.1/getting-started/introduction/">click here.</a></p> </div> </div> </div> </section> <!-- Elements Alerts --> <section class="py-10"> <div class="container"> <div class="row"> <div class="col-xl-10"> <div class="" id="alerts"> <h1 class="element-title">Alerts</h1> <p class="mb-4 font-size-20">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. <a target="_blank" href="http://getbootstrap.com/docs/4.1/components/alerts/">View details. </a></p> <div class="row"> <div class="col-lg-6 mb-7"> <h3 class="element-title">Default</h3> <div class="alert alert-primary alert-dismissible fade show" role="alert"> <strong>Holy guacamole!</strong> A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="alert alert-secondary alert-dismissible fade show" role="alert"> <strong>Holy guacamole!</strong> A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="alert alert-success alert-dismissible fade show" role="alert"> <strong>Holy guacamole!</strong> A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="alert alert-warning alert-dismissible fade show" role="alert"> <strong>Holy guacamole!</strong> A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="alert alert-info alert-dismissible fade show" role="alert"> <strong>Holy guacamole!</strong> A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="alert alert-light alert-dismissible fade show" role="alert"> <strong>Holy guacamole!</strong> A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="alert alert-dark alert-dismissible fade show" role="alert"> <strong>Holy guacamole!</strong> A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> </div> <div class="col-lg-6 mb-7"> <h3 class="element-title">Additional content</h3> <div class="alert alert-primary" role="alert"> <h4 class="alert-heading">Well done!</h4> <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p> <hr> <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p> </div> <div class="alert alert-secondary" role="alert"> <h4 class="alert-heading">Well done!</h4> <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p> <hr> <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p> </div> <div class="alert alert-success" role="alert"> <h4 class="alert-heading">Well done!</h4> <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p> <hr> <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p> </div> </div> </div> </div> <!-- Elements Badge --> <div class="py-5" id="badge"> <h1 class="element-title">Badges</h1> <p class="mb-4 font-size-20"> Documentation and examples for badges, our small count and labeling component. <a target="_blank" href="http://getbootstrap.com/docs/4.1/components/badge/">View details. </a></p> <div class="row"> <div class="col-lg-6"> <h3 class="element-title">Default</h3> <div class="mb-8"> <h1>Example heading <span class="badge badge-primary">New</span></h1> <h2>Example heading <span class="badge badge-secondary">New</span></h2> <h3>Example heading <span class="badge badge-warning">New</span></h3> <h4>Example heading <span class="badge badge-info">New</span></h4> <h5>Example heading <span class="badge badge-purple">New</span></h5> <h6>Example heading <span class="badge badge-success">New</span></h6> </div> <h3 class="element-title">Badges with button</h3> <div> <button type="button" class="btn btn-primary"> Profile <span class="badge badge-light">9</span> <span class="sr-only">unread messages</span> </button> </div> </div> <div class="col-lg-6 mb-7"> <h3 class="element-title">Contextual variations and links</h3> <div class="mb-8"> <a href="#" class="badge badge-primary">Primary</a> <a href="#" class="badge badge-secondary">Secondary</a> <a href="#" class="badge badge-success">Success</a> <a href="#" class="badge badge-danger">Danger</a> <a href="#" class="badge badge-warning">Warning</a> <a href="#" class="badge badge-info">Info</a> <a href="#" class="badge badge-light">Light</a> <a href="#" class="badge badge-dark">Dark</a> </div> <h3 class="element-title">Pill badges</h3> <div class="mb-8"> <span class="badge badge-pill badge-primary">Primary</span> <span class="badge badge-pill badge-secondary">Secondary</span> <span class="badge badge-pill badge-success">Success</span> <span class="badge badge-pill badge-danger">Danger</span> <span class="badge badge-pill badge-warning">Warning</span> <span class="badge badge-pill badge-info">Info</span> <span class="badge badge-pill badge-light">Light</span> <span class="badge badge-pill badge-dark">Dark</span> </div> </div> </div> </div> <!-- Elements Breadcrumb --> <div class="py-5" id="breadcrumb"> <h1 class="element-title">Breadcrumb</h1> <p class="mb-4 font-size-20">Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.<a target="_blank" href="http://getbootstrap.com/docs/4.1/components/breadcrumb/"> View details. </a></p> <div class="row"> <div class="col-12"> <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item active" aria-current="page">Home</li> </ol> </nav> <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item active" aria-current="page">Library</li> </ol> </nav> <nav aria-label="breadcrumb"> <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" aria-current="page">Data</li> </ol> </nav> </div> </div> </div> <!-- Elements Buttons --> <div class="py-5" id="buttons"> <div class=""> <h1 class="element-title">Buttons</h1> <p class="mb-4 font-size-20">Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more. <a target="_blank" href="http://getbootstrap.com/docs/4.1/components/buttons/">View details. </a></p> </div> <div class="row"> <div class="col-12"> <h3 class="element-title">Default</h3> <div class="mb-8"> <button type="button" class="btn btn-primary mb-2">Primary</button> <button type="button" class="btn btn-secondary mb-2">Secondary</button> <button type="button" class="btn btn-success mb-2">Success</button> <button type="button" class="btn btn-danger mb-2">Danger</button> <button type="button" class="btn btn-warning mb-2">Warning</button> <button type="button" class="btn btn-info mb-2">Info</button> <button type="button" class="btn btn-light mb-2">Light</button> <button type="button" class="btn btn-dark mb-2">Dark</button> <button type="button" class="btn btn-link mb-2">Link</button> </div> <h3 class="element-title">Outline buttons</h3> <div class="mb-8"> <button type="button" class="btn btn-outline-primary mb-2">Primary</button> <button type="button" class="btn btn-outline-secondary mb-2">Secondary</button> <button type="button" class="btn btn-outline-success mb-2">Success</button> <button type="button" class="btn btn-outline-danger mb-2">Danger</button> <button type="button" class="btn btn-outline-warning mb-2">Warning</button> <button type="button" class="btn btn-outline-info mb-2">Info</button> <button type="button" class="btn btn-outline-light mb-2">Light</button> <button type="button" class="btn btn-outline-dark mb-2">Dark</button> </div> <h3 class="element-title">Small buttons</h3> <div class="mb-8"> <button type="button" class="btn btn-primary btn-sm mb-2">Small button</button> <button type="button" class="btn btn-secondary btn-sm mb-2">Small button</button> </div> </div> <div class="col-lg-6"> <h3 class="element-title">Active state</h3> <div class="mb-8"> <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button> <button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button> </div> </div> <div class="col-12"> <h3 class="element-title">Button group Basic</h3> <div class="btn-group mb-8" role="group" aria-label="Basic example"> <button type="button" class="btn btn-primary">Left</button> <button type="button" class="btn btn-primary">Middle</button> <button type="button" class="btn btn-primary">Right</button> </div> <h3 class="element-title">Button toolbar</h3> <div class="btn-toolbar mb-8" role="toolbar" aria-label="Toolbar with button groups"> <div class="btn-group mr-2 mb-3" role="group" aria-label="First group"> <button type="button" class="btn btn-secondary mb-3">1</button> <button type="button" class="btn btn-secondary mb-3">2</button> <button type="button" class="btn btn-secondary mb-3">3</button> <button type="button" class="btn btn-secondary mb-3">4</button> </div> <div class="btn-group mr-2 mb-2" role="group" aria-label="Second group"> <button type="button" class="btn btn-secondary mb-4">5</button> <button type="button" class="btn btn-secondary mb-4">6</button> <button type="button" class="btn btn-secondary mb-4">7</button> <button type="button" class="btn btn-secondary mb-4">8</button> </div> </div> </div> </div> </div> <!-- Elements Collapse --> <div class="py-5" id="collapse"> <h1 class="element-title">Collapses</h1> <p class="mb-4 font-size-20">Toggle the visibility of content across your project with a few classes and our JavaScript plugins. <a target="_blank" href="https://getbootstrap.com/docs/4.1/components/collapse/#accordion-example/">View details. </a></p> <div class="row"> <div class="col-lg-6"> <h3 class="element-title">Accordion</h3> <div class="accordion mb-8" id="accordionExample"> <div class="card"> <div class="card-header" id="headingOne"> <h5 class="mb-0"> <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Collapsible Group Item #1 </button> </h5> </div> <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample"> <div class="card-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="card"> <div class="card-header" id="headingTwo"> <h5 class="mb-0"> <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Collapsible Group Item #2 </button> </h5> </div> <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample"> <div class="card-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="card"> <div class="card-header" id="headingThree"> <h5 class="mb-0"> <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Collapsible Group Item #3 </button> </h5> </div> <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample"> <div class="card-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> </div> <div class="col-lg-6"> <div class="mb-8"> <h3 class="element-title">Link with href & data-target</h3> <p> <a class="btn btn-primary mb-2" data-toggle="collapse" href="#collapseExampleHref" role="button" aria-expanded="false" aria-controls="collapseExampleHref"> Link with href </a> <button class="btn btn-warning mb-2" type="button" data-toggle="collapse" data-target="#collapseExampleHref" aria-expanded="false" aria-controls="collapseExampleHref"> Button with data-target </button> </p> <div class="collapse" id="collapseExampleHref"> <div class="card card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. </div> </div> </div> <div class="mb-8"> <h3 class="element-title">Multiple targets</h3> <p> <a class="btn btn-success mb-2" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a> <button class="btn btn-info mb-2" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button> <div class="row"> <div class="col"> <div class="collapse multi-collapse" id="multiCollapseExample1"> <div class="card card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. </div> </div> </div> <div class="col"> <div class="collapse multi-collapse" id="multiCollapseExample2"> <div class="card card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. </div> </div> </div> </div> <p> <button class="btn btn-secondary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button> </p> </div> </div> </div> </div> <!-- Elements Card --> <div class="py-5" id="card"> <div class=""> <h1 class="element-title">Cards</h1> <p class="mb-4 font-size-20">Use default <strong>Kidz</strong> markup to display Card elements. See the <strong>Kidz</strong> documentation for a full list of options and modifiers. <a target="_blank" href="http://getbootstrap.com/docs/4.1/components/card/">View Card on Bootstrap. </a></p> </div> <div class="row"> <div class="col-md-6 col-lg-4"> <div class="card"> <img class="card-img-top" src="assets/img/component/component-img-2.jpg" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Card title</h5> <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> </div> <ul class="list-group list-group-flush"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Vestibulum at eros</li> </ul> <div class="card-body"> <a href="#" class="card-link">Card link</a> <a href="#" class="card-link">Another link</a> </div> </div> </div> <div class="col-md-6 col-lg-4"> <div class="card"> <img class="card-img-top" src="assets/img/component/component-img-1.jpg" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Card title</h5> <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">Go somewhere</a> </div> </div> </div> <div class="col-md-6 col-lg-4"> <div class="card text-center"> <div class="card-header"> Featured </div> <div class="card-body"> <h5 class="card-title">Special title treatment</h5> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> <div class="card-footer text-muted"> 2 days ago </div> </div> </div> </div> </div> <!-- Elements Forms --> <div class="py-5" id="forms"> <div class=""> <h1 class="element-title">Forms</h1> <p class="mb-4 font-size-20">Use default <strong>Kidz</strong> markup to display Forms elements. See the <strong>Kidz</strong> documentation for a full list of options and modifiers. <a target="_blank" href="http://getbootstrap.com/docs/4.1/components/forms/">View Forms on Bootstrap. </a></p> </div> <div class="row"> <div class="col-12"> <h3 class="element-title">Forms Basic</h3> <div class="mb-8"> <form> <div class="form-group"> <label for="exampleFormControlInput1">Email address</label> <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com"> </div> <div class="form-group check-step-gray"> <label for="exampleFormControlSelect1">Example select</label> <select class="form-control" id="exampleFormControlSelect1"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> <div class="form-group"> <label for="exampleMultipleSelect">Example multiple select</label> <select multiple class="form-control" id="exampleMultipleSelect"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> <div class="form-group"> <label for="exampleFormControlTextarea1">Example textarea</label> <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea> </div> <div class="form-group row"> <label for="staticEmail" class="col-sm-2 col-form-label">Static Email</label> <div class="col-sm-10"> <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com"> </div> </div> <div class="form-group row mb-5"> <label for="inputPassword" class="col-sm-2 col-form-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword" placeholder="Password"> </div> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="defaultCheck1"> <label class="form-check-label" for="defaultCheck1"> Default checkbox </label> </div> <div class="form-check mb-5"> <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled> <label class="form-check-label" for="defaultCheck2"> Disabled checkbox </label> </div> <div class="form-check mb-5"> <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked> <label class="form-check-label" for="exampleRadios1"> Default radio </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2"> <label class="form-check-label" for="exampleRadios2"> Second default radio </label> </div> <div class="form-check mb-5"> <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled> <label class="form-check-label" for="exampleRadios3"> Disabled radio </label> </div> </form> </div> </div> <div class="col-12"> <h3 class="element-title">Input Group</h3> <from> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1">@</span> </div> <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"> </div> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2"> <div class="input-group-append"> <span class="input-group-text" id="basic-addon2">@example.com</span> </div> </div> <label for="basic-url">Your vanity URL</label> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon3">https://example.com/users/</span> </div> <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3"> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">$</span> </div> <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)"> <div class="input-group-append"> <span class="input-group-text">.00</span> </div> </div> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text">With textarea</span> </div> <textarea class="form-control" aria-label="With textarea"></textarea> </div> </from> </div> </div> </div> <!-- Elements Dropdown --> <div class="py-5" id="dropdowns"> <div class=""> <h1 class="element-title">Dropdowns</h1> <p class="mb-4 font-size-20">Use default <strong>Kidz</strong> markup to display Dropdowns elements. See the <strong>Kidz</strong> documentation for a full list of options and modifiers. <a target="_blank" href="http://getbootstrap.com/docs/4.1/components/dropdowns/">View Dropdowns on Bootstrap. </a></p> </div> <div class="row"> <div class="col-12 col-md-6 col-lg-4"> <h3 class="element-title">Dropdown Default</h3> <div class="dropdown mb-8"> <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <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> </div> <!-- <div class="btn-group dropright"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropright </button> <div class="dropdown-menu" x-placement="right-start" style="position: absolute; transform: translate3d(112px, 0px, 0px); top: 0px; left: 0px; will-change: transform;"> <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> <div class="col-12 col-md-6 col-lg-4"> <h3 class="element-title">Dropdown Left</h3> <div class="btn-group dropleft"> <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropleft </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> <div class="col-12 col-md-6 col-lg-4"> <h3 class="element-title">Dropdown Right</h3> <div class="btn-group dropright"> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropright </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> </div> </div> <!-- Elements List Group --> <div class="py-5" id="list-group"> <div class=""> <h1 class="element-title">List Group</h1> <p class="mb-4 font-size-20">Use default <strong>Kidz</strong> markup to display List Group elements. See the <strong>Kidz</strong> documentation for a full list of options and modifiers. <a target="_blank" href="https://getbootstrap.com/docs/4.1/components/list-group/">View List Group on Bootstrap. </a></p> </div> <div class="row"> <div class="col-md-6"> <h3 class="element-title">Default List Group</h3> <div class="mb-8"> <div class="list-group"> <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a> <a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a> </div> </div> </div> <div class="col-md-6"> <h3 class="element-title">List Group With badges</h3> <div class="mb-8"> <ul class="list-group"> <li class="list-group-item d-flex justify-content-between align-items-center"> Cras justo odio <span class="badge badge-primary badge-pill">14</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Dapibus ac facilisis in <span class="badge badge-primary badge-pill">2</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Morbi leo risus <span class="badge badge-primary badge-pill">1</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Cras justo odio <span class="badge badge-primary badge-pill">1</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Dapibus ac facilisis in <span class="badge badge-primary badge-pill">1</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Morbi leo risus <span class="badge badge-primary badge-pill">1</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Cras justo odio <span class="badge badge-primary badge-pill">14</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Dapibus ac facilisis in <span class="badge badge-primary badge-pill">2</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Morbi leo risus <span class="badge badge-primary badge-pill">1</span> </li> </ul> </div> </div> </div> </div> <!-- Elements Modal --> <div class="py-5" id="modal"> <div class=""> <h1 class="element-title">modals</h1> <p class="mb-4 font-size-20">Use default <strong>Kidz</strong> markup to display List Group elements. See the <strong>Kidz</strong> documentation for a full list of options and modifiers. <a target="_blank" href="http://getbootstrap.com/docs/4.1/components/modal/">View Modal on Bootstrap. </a></p> </div> <div class="row"> <div class="col-md-6 col-lg-4"> <h3 class="element-title mb-5">Modal Default</h3> <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade mb-8" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>Modal body text goes here.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <h3 class="element-title mb-5 mt-8">Modal Scrolling long content</h3> <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong"> Launch demo modal </button> <!-- Modal --> <div class="modal fade mb-8" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius sit eum nisi qui quas veniam blanditiis alias, facere fugiat deleniti enim natus repudiandae in laudantium culpa eaque. Dolorem ipsam beatae nisi, a excepturi harum voluptatum consectetur culpa eos, ea optio? Optio minima vel, cum ipsam voluptatem. Nemo ratione aliquam, doloremque dolor numquam dolorem esse libero dolorum quibusdam quis, eligendi impedit dicta quaerat nobis laudantium ad suscipit optio nesciunt perspiciatis est. Natus labore officiis rerum et ut suscipit, quos aut laboriosam magnam eligendi omnis, ad facilis tempora soluta! Et, corrupti eius. Quaerat modi itaque nisi assumenda magni, similique quod voluptatibus, mollitia!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius sit eum nisi qui quas veniam blanditiis alias, facere fugiat deleniti enim natus repudiandae in laudantium culpa eaque. Dolorem ipsam beatae nisi, a excepturi harum voluptatum consectetur culpa eos, ea optio? Optio minima vel, cum ipsam voluptatem. Nemo ratione aliquam, doloremque dolor numquam dolorem esse libero dolorum quibusdam quis, eligendi impedit dicta quaerat nobis laudantium ad suscipit optio nesciunt perspiciatis est. Natus labore officiis rerum et ut suscipit, quos aut laboriosam magnam eligendi omnis, ad facilis tempora soluta! Et, corrupti eius. Quaerat modi itaque nisi assumenda magni, similique quod voluptatibus, mollitia!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius sit eum nisi qui quas veniam blanditiis alias, facere fugiat deleniti enim natus repudiandae in laudantium culpa eaque. Dolorem ipsam beatae nisi, a excepturi harum voluptatum consectetur culpa eos, ea optio? Optio minima vel, cum ipsam voluptatem. Nemo ratione aliquam, doloremque dolor numquam dolorem esse libero dolorum quibusdam quis, eligendi impedit dicta quaerat nobis laudantium ad suscipit optio nesciunt perspiciatis est. Natus labore officiis rerum et ut suscipit, quos aut laboriosam magnam eligendi omnis, ad facilis tempora soluta! Et, corrupti eius. Quaerat modi itaque nisi assumenda magni, similique quod voluptatibus, mollitia!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius sit eum nisi qui quas veniam blanditiis alias, facere fugiat deleniti enim natus repudiandae in laudantium culpa eaque. Dolorem ipsam beatae nisi, a excepturi harum voluptatum consectetur culpa eos, ea optio? Optio minima vel, cum ipsam voluptatem. Nemo ratione aliquam, doloremque dolor numquam dolorem esse libero dolorum quibusdam quis, eligendi impedit dicta quaerat nobis laudantium ad suscipit optio nesciunt perspiciatis est. Natus labore officiis rerum et ut suscipit, quos aut laboriosam magnam eligendi omnis, ad facilis tempora soluta! Et, corrupti eius. Quaerat modi itaque nisi assumenda magni, similique quod voluptatibus, mollitia!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius sit eum nisi qui quas veniam blanditiis alias, facere fugiat deleniti enim natus repudiandae in laudantium culpa eaque. Dolorem ipsam beatae nisi, a excepturi harum voluptatum consectetur culpa eos, ea optio? Optio minima vel, cum ipsam voluptatem. Nemo ratione aliquam, doloremque dolor numquam dolorem esse libero dolorum quibusdam quis, eligendi impedit dicta quaerat nobis laudantium ad suscipit optio nesciunt perspiciatis est. Natus labore officiis rerum et ut suscipit, quos aut laboriosam magnam eligendi omnis, ad facilis tempora soluta! Et, corrupti eius. Quaerat modi itaque nisi assumenda magni, similique quod voluptatibus, mollitia!</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> </div> </div> </div> <!-- Elements Navs --> <div class="py-5" id="navs"> <div class=""> <h1 class="element-title">Navs</h1> <p class="mb-4 font-size-20">Use default <strong>Kidz</strong> markup to display List Group elements. See the <strong>Kidz</strong> documentation for a full list of options and modifiers. <a target="_blank" href="http://getbootstrap.com/docs/4.1/components/navs/">View Navs on Bootstrap. </a></p> </div> <div class="row"> <div class="col-lg-6 mb-8"> <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> </li> <li class="nav-item"> <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a> </li> <li class="nav-item"> <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a> </li> </ul> <div class="tab-content" id="myTabContent"> <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa voluptate aliquam ipsa optio officiis quia fuga repudiandae architecto! Quis ratione tenetur nihil nesciunt, quidem, earum debitis reiciendis vitae culpa ipsum odio vel tempore porro doloremque dignissimos perferendis unde quam enim officia velit explicabo incidunt autem quo sed! Autem, quos, repellendus!</div> <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa voluptate aliquam ipsa optio officiis quia fuga repudiandae architecto! Quis ratione tenetur nihil nesciunt, quidem, earum debitis reiciendis vitae culpa ipsum odio vel tempore porro doloremque dignissimos perferendis unde quam enim officia velit explicabo incidunt autem quo sed! Autem, quos, repellendus!</div> <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa voluptate aliquam ipsa optio officiis quia fuga repudiandae architecto! Quis ratione tenetur nihil nesciunt, quidem, earum debitis reiciendis vitae culpa ipsum odio vel tempore porro doloremque dignissimos perferendis unde quam enim officia velit explicabo incidunt autem quo sed! Autem, quos, repellendus!</div> </div> </div> <div class="col-lg-6 mb-8"> <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a> </li> <li class="nav-item"> <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a> </li> <li class="nav-item"> <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a> </li> </ul> <div class="tab-content" id="pills-tabContent"> <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa voluptate aliquam ipsa optio officiis quia fuga repudiandae architecto! Quis ratione tenetur nihil nesciunt, quidem, earum debitis reiciendis vitae culpa ipsum odio vel tempore porro doloremque dignissimos perferendis unde quam enim officia velit explicabo incidunt autem quo sed! Autem, quos, repellendus!</div> <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa voluptate aliquam ipsa optio officiis quia fuga repudiandae architecto! Quis ratione tenetur nihil nesciunt, quidem, earum debitis reiciendis vitae culpa ipsum odio vel tempore porro doloremque dignissimos perferendis unde quam enim officia velit explicabo incidunt autem quo sed! Autem, quos, repellendus!</div> <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa voluptate aliquam ipsa optio officiis quia fuga repudiandae architecto! Quis ratione tenetur nihil nesciunt, quidem, earum debitis reiciendis vitae culpa ipsum odio vel tempore porro doloremque dignissimos perferendis unde quam enim officia velit explicabo incidunt autem quo sed! Autem, quos, repellendus!</div> </div> </div> <div class="col-12"></div> </div> </div> <!-- Elements Pagination --> <div class="py-5" id="pagination"> <div class=""> <h1 class="element-title">Paginations</h1> <p class="mb-4 font-size-20">Use default <strong>Kidz</strong> markup to display pagination elements. See the <strong>Kidz</strong>documentation for a full list of options and modifiers. <a target="_blank" href="http://getbootstrap.com/docs/4.1/components/pagination/">View Pagination on Bootstrap. </a></p> </div> <div class="row"> <div class="col-md-6 col-lg-5"> <h3 class="element-title">Pagination Default</h3> <nav aria-label="Page navigation example"> <ul class="pagination"> <li class="page-item"><a class="page-link" href="#">Prev</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">Next</a></li> </ul> </nav> </div> </div> </div> <!-- Elements Tooltips --> <div class="py-5" id="tooltips"> <div class=""> <h1 class="element-title">Tooltips</h1> <p class="mb-4 font-size-20">Use default <strong>Kidz</strong> markup to display Tooltips elements. See the <strong>Kidz</strong> documentation for a full list of options and modifiers. <a target="_blank" href="http://getbootstrap.com/docs/4.1/components/tooltips/">View Tooltips on Bootstrap. </a></p> </div> <div class="row"> <div class="col-12"> <h3 class="element-title">Tooltips Default</h3> <div class="mb-5"> <button type="button" class="btn btn-primary mb-2" data-toggle="tooltip" data-placement="top" title="Tooltip on top"> Tooltip on top </button> <button type="button" class="btn btn-warning mb-2" data-toggle="tooltip" data-placement="right" title="Tooltip on right"> Tooltip on right </button> <button type="button" class="btn btn-success mb-2" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom"> Tooltip on bottom </button> <button type="button" class="btn btn-info mb-2" data-toggle="tooltip" data-placement="left" title="Tooltip on left"> Tooltip on left </button> </div> </div> </div> </div> <!-- Elements Progress --> <div class="py-5" id="progress"> <div class=""> <h1 class="element-title">Progress</h1> <p class="mb-4 font-size-20">Use default <strong>Kidz</strong> markup to display Progress elements. See the <strong>Kidz</strong> documentation for a full list of options and modifiers. <a target="_blank" href="http://getbootstrap.com/docs/4.1/components/progress/">View Progress on Bootstrap. </a></p> </div> <div class="row"> <div class="col-md-6"> <h3 class="element-title">Progress</h3> <div class="mb-5"> <div class="progress"> <div class="progress-bar bg-primary" role="progressbar" style="width: 10%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> </div> <div class="col-md-6"> <h3 class="element-title">Progress</h3> <div class="mb-5"> <div class="progress"> <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> </div> </div> </div> </div> <div class="col-xl-2 d-none d-xl-block"> <div class="element-right-sidebar"> <div class="card shadow-none bg-transparent"> <h4 class="card-header font-weight-bold bg-success rounded-top text-white">Components</h4> <div class="card-body border border-top-0 rounded-bottom components"> <ul class="nav scrolling list-style-1"> <li class="nav-item"> <a class="nav-link active" href="#alerts">Alerts</a> </li> <li class="nav-item"> <a class="nav-link" href="#badge">Badge</a> </li> <li class="nav-item"> <a class="nav-link" href="#breadcrumb">Breadcrumb</a> </li> <li class="nav-item"> <a class="nav-link " href="#buttons">Buttons</a> </li> <li class="nav-item"> <a class="nav-link " href="#collapse">Collapse</a> </li> <li class="nav-item"> <a class="nav-link " href="#card">Card</a> </li> <li class="nav-item"> <a class="nav-link " href="#forms">Forms</a> </li> <li class="nav-item"> <a class="nav-link " href="#dropdowns">Dropdowns</a> </li> <li class="nav-item"> <a class="nav-link " href="#list-group">List Group</a> </li> <li class="nav-item"> <a class="nav-link " href="#modal">Modal</a> </li> <li class="nav-item"> <a class="nav-link " href="#navs">Navs</a> </li> <li class="nav-item"> <a class="nav-link " href="#pagination">Pagination</a> </li> <li class="nav-item"> <a class="nav-link " href="#tooltips">Tooltips</a> </li> <li class="nav-item"> <a class="nav-link " href="#progress">Progress</a> </li> </ul> </div> </div> </div> </div> </div> </div> </section> </div> <!-- element wrapper ends --> <!-- ==================================== ——— FOOTER ===================================== --> <footer class="footer-bg-img"> <!-- Footer Color Bar --> <div class="color-bar"> <div class="container-fluid"> <div class="row"> <div class="col color-bar bg-warning"></div> <div class="col color-bar bg-danger"></div> <div class="col color-bar bg-success"></div> <div class="col color-bar bg-info"></div> <div class="col color-bar bg-purple"></div> <div class="col color-bar bg-pink"></div> <div class="col color-bar bg-warning d-none d-md-block"></div> <div class="col color-bar bg-danger d-none d-md-block"></div> <div class="col color-bar bg-success d-none d-md-block"></div> <div class="col color-bar bg-info d-none d-md-block"></div> <div class="col color-bar bg-purple d-none d-md-block"></div> <div class="col color-bar bg-pink d-none d-md-block"></div> </div> </div> </div> <div class="pt-8 pb-7 bg-repeat" style="background-image: url(assets/img/background/footer-bg-img-1.png);"> <div class="container"> <div class="row"> <div class="col-sm-6 col-lg-3 col-xs-12"> <a class="mb-6 d-block" href="index.html"> <img class="img-fluid d-inline-block w-50 lazyestload" data-src="assets/img/logo-footer.png" src="assets/img/logo-footer.png"> </a> <p class="mb-6">Excepteur sint occaecat cupidatat non proident, sunt in culpa officia.Lorem ipsum dolor sit amet.</p> <p class="mb-6">consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div class="col-sm-6 col-lg-3 col-xs-12"> <h4 class="section-title-sm font-weight-bold text-white mb-6">Useful Links</h4> <ul class="list-unstyled"> <li class="mb-4"> <a href="index.html"> <i class="fa fa-angle-double-right mr-2" aria-hidden="true"></i>Kidz School </a> </li> <li class="mb-4"> <a href="about-us.html"> <i class="fa fa-angle-double-right mr-2" aria-hidden="true"></i>About Kidz School </a> </li> <li class="mb-4"> <a href="index-v2.html"> <i class="fa fa-angle-double-right mr-2" aria-hidden="true"></i>Kidz Store </a> </li> <li class="mb-4"> <a href="index-v3.html"> <i class="fa fa-angle-double-right mr-2" aria-hidden="true"></i>Kidz Daycare </a> </li> <li class="mb-3"> <a href="photo-gallery.html"> <i class="fa fa-angle-double-right mr-2" aria-hidden="true"></i> Photo Gallery </a> </li> </ul> </div> <div class="col-sm-6 col-lg-3 col-xs-12"> <h4 class="section-title-sm font-weight-bold text-white mb-6">Recent Post</h4> <ul class="list-unstyled list-item-border-bottom"> <li class="mb-4 pb-4"> <div class="media"> <a class="mr-2" href="blog-single-left-sidebar.html"> <img class="rounded-lg w-100 border-warning border-2 d-block" data-src="assets/img/blog/blog-sm-img5.jpg" src="assets/img/blog/blog-sm-img5.jpg" alt="blog-sm-img5.jpg"> </a> <div class="media-body"> <h5 class="line-hight-16 mb-1"> <a class="font-base font-size-14" href="blog-single-left-sidebar.html">A Clean Website Gives More Experience To The Visitors</a> </h5> <time class="text-white">July 7 - 2018</time> </div> </div> </li> <li class="mb-4 pb-4"> <div class="media"> <a class="mr-2" href="blog-single-left-sidebar.html"> <img class="rounded-lg w-100 border-success border-2 d-block" data-src="assets/img/blog/blog-sm-img-12.jpg" src="assets/img/blog/blog-sm-img-12.jpg" alt="blog-sm-img-12.jpg"> </a> <div class="media-body"> <h5 class="line-hight-16 mb-1"> <a class="font-base font-size-14" href="blog-single-left-sidebar.html">Duis aute irure dolor in reprehenderit in voluptate.</a> </h5> <time class="text-white">Jun 7 - 2018</time> </div> </div> </li> <li class="mb-4 pb-4"> <div class="media"> <a class="mr-2" href="blog-single-left-sidebar.html"> <img class="rounded-lg w-100 border-info border-2 d-block" data-src="assets/img/blog/blog-sm-img7.jpg" src="assets/img/blog/blog-sm-img7.jpg" alt="blog-sm-img7.jpg"> </a> <div class="media-body"> <h5 class="line-hight-16 mb-1"> <a class="font-base font-size-14" href="blog-single-left-sidebar.html">Duis aute irure dolor in reprehenderit in voluptate.</a> </h5> <time class="text-white">Jun 7 - 2018</time> </div> </div> </li> </ul> </div> <div class="col-sm-6 col-lg-3 col-xs-12"> <h4 class="section-title-sm font-weight-bold text-white mb-6">Mailing List</h4> <p class="mb-4">Sign up for our mailing list to get latest updates and offers.</p> <form class="mb-4" action=""> <div class="input-group shadow-light rounded-sm input-addon"> <input type="text" class="form-control py-4" placeholder="Email address" aria-describedby="basic-addon21"> <div class="input-group-append "> <div class="input-group-text bg-danger"> <i class="fa fa-check text-white" aria-hidden="true"></i></div> </div> </div> </form> </div> </div> </div> </div> <!-- Copy Right --> <div class="copyright"> <div class="container"> <div class="row py-4 align-items-center"> <div class="col-sm-7 col-xs-12 order-1 order-md-0"> <p class="copyright-text"> © 2018 Copyright Kidz School Bootstrap Template by <a href="http://www.iamabdus.com/" target="_blank">Abdus.</a></p> </div> <div class="col-sm-5 col-xs-12"> <ul class="list-inline d-flex align-items-center justify-content-md-end justify-content-center mb-md-0"> <li class="mr-3"> <a class="icon-rounded-circle-small bg-warning" href="javascript:void(0)"> <i class="fa fa-facebook text-white" aria-hidden="true"></i> </a> </li> <li class="mr-3"> <a class="icon-rounded-circle-small bg-success" href="javascript:void(0)"> <i class="fa fa-twitter text-white" aria-hidden="true"></i> </a> </li> <li class="mr-3"> <a class="icon-rounded-circle-small bg-danger" href="javascript:void(0)"> <i class="fa fa-google-plus text-white" aria-hidden="true"></i> </a> </li> <li class="mr-3"> <a class="icon-rounded-circle-small bg-info" href="javascript:void(0)"> <i class="fa fa-pinterest-p text-white" aria-hidden="true"></i> </a> </li> <li class=""> <a class="icon-rounded-circle-small bg-purple" href="javascript:void(0)"> <i class="fa fa-vimeo text-white" aria-hidden="true"></i> </a> </li> </ul> </div> </div> </div> </div> </footer> <!-- Modal Login --> <div class="modal fade" id="modal-login" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-sm" role="document"> <div class="modal-content"> <div class="bg-warning rounded-top p-2"> <h3 class="text-white font-weight-bold mb-0 ml-2">Login</h3> </div> <div class="border rounded-bottom-md border-top-0"> <div class="p-3"> <form action="#" method="POST" role="form"> <div class="form-group form-group-icon"> <input type="text" class="form-control border" placeholder="User name" required=""> </div> <div class="form-group form-group-icon"> <input type="password" class="form-control border" placeholder="Password" required=""> </div> <div class="form-group"> <button type="submit" class="btn btn-danger text-uppercase w-100">Log In</button> </div> <div class="form-group text-center text-secondary mb-0"> <a class="text-danger" href="#">Forgot password?</a> </div> </form> </div> </div> </div> </div> </div> <!-- Modal Create Account --> <div class="modal fade" id="modal-createAccount" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-sm rounded" role="document"> <div class="modal-content"> <div class="bg-warning rounded-top p-2"> <h3 class="text-white font-weight-bold mb-0 ml-2">Create An Account</h3> </div> <div class="border rounded-bottom-md border-top-0"> <div class="p-3"> <form action="#" method="POST" role="form"> <div class="form-group form-group-icon"> <input type="text" class="form-control border" placeholder="Name" required=""> </div> <div class="form-group form-group-icon"> <input type="text" class="form-control border" placeholder="User name" required=""> </div> <div class="form-group form-group-icon"> <input type="text" class="form-control border" placeholder="Phone" required=""> </div> <div class="form-group form-group-icon"> <input type="password" class="form-control border" placeholder="Password" required=""> </div> <div class="form-group form-group-icon"> <input type="password" class="form-control border" placeholder="Re-Password" required=""> </div> <div class="form-group"> <button type="submit" class="btn btn-danger text-uppercase w-100">Register</button> </div> <div class="form-group text-center text-secondary mb-0"> <p class="mb-0">Allready have an account? <a class="text-danger" href="#">Log in</a></p> </div> </form> </div> </div> </div> </div> </div> <!-- Modal Enroll --> <div class="modal fade" id="modal-enrolAccount" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-sm rounded" role="document"> <div class="modal-content"> <div class="bg-pink rounded-top p-2"> <h3 class="text-white font-weight-bold mb-0 ml-2">Create An Account</h3> </div> <div class="border rounded-bottom-md border-top-0"> <div class="p-3"> <form action="#" method="POST" role="form"> <div class="form-group form-group-icon"> <input type="text" class="form-control border" placeholder="Name" required=""> </div> <div class="form-group form-group-icon"> <input type="text" class="form-control border" placeholder="User name" required=""> </div> <div class="form-group form-group-icon"> <input type="text" class="form-control border" placeholder="Phone" required=""> </div> <div class="form-group form-group-icon"> <input type="password" class="form-control border" placeholder="Password" required=""> </div> <div class="form-group form-group-icon"> <input type="password" class="form-control border" placeholder="Re-Password" required=""> </div> <div class="form-group"> <button type="submit" class="btn btn-pink text-uppercase text-white w-100">Register</button> </div> <div class="form-group text-center text-secondary mb-0"> <p class="mb-0">Allready have an account? <a class="text-pink" href="#">Log in</a></p> </div> </form> </div> </div> </div> </div> </div> <!-- Modal Products --> <div class="modal fade" id="modal-products" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header border-0"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="row"> <div class="col-sm-6 col-xs-12"> <img class="img-fluid d-block mx-auto" src="assets/img/products/products-preview01.jpg" alt="preview01.jpg"> </div> <div class="col-sm-6 col-xs-12"> <div class="product-single"> <h1>Barbie Racing Car</h1> <span class="pricing font-size-55">$50 <del>$60</del></span> <p class="mb-7">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p> <div class="add-cart mb-0"> <div class="count-input"> <input class="quantity btn-primary" type="text" value="1"> <a class="incr-btn incr-up" data-action="decrease" href="#"><i class="fa fa-caret-up" aria-hidden="true"></i></a> <a class="incr-btn incr-down" data-action="increase" href="#"><i class="fa fa-caret-down" aria-hidden="true"></i></a> </div> <button type="button" class="btn btn-danger text-uppercase" onclick="location.href='product-cart.html';">Add to cart</button> </div> </div> </div> </div> </div> </div> </div> </div> <!--scrolling--> <div class="scrolling"> <a href="#pageTop" class="back-to-top" id="back-to-top" style="opacity: 1;"> <i class="fa fa-arrow-up" aria-hidden="true"></i> </a> </div> <!-- Javascript --> <script src="assets/plugins/jquery/jquery.min.js"></script> <script src="assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="assets/plugins/owl-carousel/owl.carousel.min.js"></script> <script src="assets/plugins/fancybox/jquery.fancybox.min.js"></script> <script src="assets/plugins/isotope/isotope.min.js"></script> <script src="assets/plugins/syotimer/jquery.syotimer.min.js"></script> <script src="assets/plugins/select2/js/select2.min.js"></script> <script src="assets/plugins/no-ui-slider/nouislider.min.js"></script> <script src="assets/plugins/lazyestload/lazyestload.js"></script> <script src="assets/plugins/velocity/velocity.min.js"></script> <script src="assets/plugins/smoothscroll/SmoothScroll.js"></script> <script src="assets/plugins/images-loaded/js/imagesloaded.pkgd.min.js"></script> <script src="assets/plugins/revolution/js/jquery.themepunch.tools.min.js"></script> <script src="assets/plugins/revolution/js/jquery.themepunch.revolution.min.js"></script> <!-- Load revolution slider only on Local File Systems. The following part can be removed on Server --> <!-- <script src="assets/plugins/revolution/js/extensions/revolution.extension.slideanims.min.js"></script> <script src="assets/plugins/revolution/js/extensions/revolution.extension.layeranimation.min.js"></script> <script src="assets/plugins/revolution/js/extensions/revolution.extension.navigation.min.js"></script> --> <script src="assets/plugins/wow/wow.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDU79W1lu5f6PIiuMqNfT1C6M0e_lq1ECY"></script> <script src="assets/js/kidz.js"></script> </body> </html>