"Untitled"
Bootstrap 4.1.1 Snippet by anjalish

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 4 Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <style> header a img { padding: 15px;} nav { border-top: 1.3px solid; border-bottom: 1.3px solid;} nav ul li a { margin-left: 35px; margin-right: 35px; font-size: 17px;} #top-nav li a { font-family: 'Anton', sans-serif; color: #444444 !important; letter-spacing: 1px;} nav ul li:nth-child(1),nav ul li:nth-child(2),nav ul li:nth-child(3),nav ul li:nth-child(4) { border-right: 1px solid;} .navbar { padding: 0rem 0rem !important; } .carousel-caption { text-align: right; top: 8rem; left: 55% !important;} .carousel-caption h3 { color: black; font-size: 50px; font-family: 'Anton', sans-serif;} .carousel-caption p { background-color: #ffc107; padding: 7px;} .options { display: inline-flex; list-style-type: none;} .nav-link span img { width: 65px;} .carousel-control-next-icon { background-image: url(https://img.icons8.com/ios/50/000000/long-arrow-right.png);} .carousel-control-prev-icon { background-image: url(https://img.icons8.com/ios/32/000000/long-arrow-left.png);} .carousel-control-next-icon, .carousel-control-prev-icon { width: 35px; height: 35px;} .carousel-indicators li { width: 250px; height: 55px; text-indent: 0px; color: #f7f7f7; text-align: center; background-color: #000000; padding-top: 20px;} .carousel-indicators h4 { font-weight: 900; line-height: 0.2;} ul#navv { margin-top: -10px; margin-bottom: -10px;} .dropdown-item { margin-left: 0px;} .dropdown-item:hover { background-color: #ffc10700; margin-left: 11px; transition: 0.2s ease-in;} .numbr h1 { font-size: 100px; color: #80808026;} h3 { font-family: 'Anton', sans-serif;} .hover-effect button { transition: width 1s, 0.1s transition ease-out; width: 150px; height: 42px;} .hover-effect button:hover { width: 200px;} .butn span:after { content: 'We Are Hiring'; transition: 0.2s ease; position: absolute; opacity: 0; font-size: 10px;} .butn:hover span:after { opacity: 1; /* right: 0px; */ margin-left: 10px; background-color: yellowgreen; width: 50px;} .butn1 span:hover { background-image: linear-gradient( 70deg, #efefef, white); padding: 9px; border: 1px solid white; color: green; transition: 0.5s ease;} </style> </head> <body> <header> <a class="navbar-brand" href="#"> <img src="https://cordial.com/wp-content/uploads/2020/06/Cordial_Logo_Black_Full_Color.png" alt="Logo" class="mx-auto d-block w-25"> </a> </header> <nav class="navbar navbar-expand-sm bg-light navbar-light justify-content-center" id="top-nav"> <ul class="navbar-nav"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> Shop </a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">Blogs</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Service</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Login</a> </li> </ul> </nav> <header> <div class="container"> <div class="row"> <div class="col-md-12"> <nav class="navbar navbar-expand-sm bg-white navbar-light justify-content-center" style="border-top: 0px solid;border-bottom: 0px solid;"> <ul class="navbar-nav" id="navv"> <li class="nav-item" style=" border-right: 0px solid;"> <a class="nav-link" href="#"><span><img src="https://img.icons8.com/color-glass/48/000000/potted-plant.png"/></span>Grow your own, be sure</a> </li> <li class="nav-item" style=" border-right: 0px solid;"> <a class="nav-link" href="#"><span><img src="https://img.icons8.com/color/48/000000/hand-planting.png"/></span>Adopt healthy living</a> </li> <li class="nav-item" style=" border-right: 0px solid;"> <a class="nav-link" href="#"><span><img src="https://img.icons8.com/color/48/000000/garden.png"/></span>Bring your favrouite plant home</a> </li> </ul> </nav> </div> </div> </div> </header> <section> <div class="container-fluid"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12"> <!--starts--> <div id="slider" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ul class="carousel-indicators"> <li data-target="#slider" data-slide-to="0" class="active"> <h4>Green</h4> <p>We are here to deliver you</p> </li> <li data-target="#slider" data-slide-to="1"> <h4>Yellow</h4> <p>We are here to deliver you</p> </li> <li data-target="#slider" data-slide-to="2"> <h4>Yellow Green</h4> <p>We are here to deliver you</p> </li> </ul> <!-- The slideshow --> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://cdn1.angusandceleste.com/wp-content/uploads/2019/08/09160318/Relief-Plant-Pots-Banner.jpg" alt="Los Angeles" class="w-100"> <div class="carousel-caption"> <h3>Make Your Living </br>Green & Healthy</h3> <hr> <p>Make Your Living/Surroundings Green & Healthy</p> </div> </div> <div class="carousel-item"> <img src="https://cdn1.angusandceleste.com/wp-content/uploads/2020/11/05163619/Angus-Celeste-Milk-Wash-Artisan-Planters-Banner-02-2000x800.jpg" alt="Chicago" class="w-100"> <div class="carousel-caption"> <h3>Make Your Living </br>Green & Healthy</h3> <hr> <p>Make Your Living/Surroundings Green & Healthy</p> </div> </div> <div class="carousel-item"> <img src="https://cdn1.angusandceleste.com/wp-content/uploads/2019/08/09160318/Relief-Plant-Pots-Banner.jpg" alt="New York" class="w-100"> <div class="carousel-caption"> <h3>Make Your Living </br>Green & Healthy</h3> <hr> <p>Make Your Living/Surroundings Green & Healthy</p> </div> </div> </div> <!-- Left and right controls --> <a class="carousel-control-prev" href="#slider" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#slider" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> </div> <!--ends--> </div> </div> </div> </section> <br> <br> <section> <div class="container"> <div class="row"> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4"> <div class="numbr"> <h1>01</h1> </div> <h3>Here We Go</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <div class="hover-effect"> <button type="button" class="btn btn-lg btn-success mt-4">Read More</button> </div> </div> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4"> <div class="numbr"> <h1>02</h1> </div> <h3>Here We Go</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <div class="hover-effect"> <button type="button" class="btn btn-lg btn-success mt-4">Read More</button> </div> </div> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4"> <div class="numbr"> <h1>03</h1> </div> <h3>Here We Go</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <div class="hover-effect"> <button type="button" class="btn btn-lg btn-success mt-4">Read More</button> </div> </div> </div> </div> </section> </body> </html>

Related: See More

Bootstrap Wizard

Questions / Comments: