"Bootstrap section with navigation and image"
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"> <!--font--> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Spartan:wght@100&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Comfortaa&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> </head> <body> <!--1 section--> <header class="bg-light pt-2"> <div class="container"> <div class="row"> <!--social media bar--> <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6"> <ul class="nav"> <li><a href="#"><span><img src="https://image.flaticon.com/icons/png/512/124/124010.png" alt="facebook" width="20px"></span></a></li> <li><a href="#"><span><img src="https://image.flaticon.com/icons/png/512/124/124021.png" alt="facebook" width="20px"></span></a></li> <li><a href="#"><span><img src="https://image.flaticon.com/icons/png/512/124/124013.png" alt="facebook" width="20px"></span></a></li> <li><a href="#"><span><img src="https://image.flaticon.com/icons/png/512/124/124011.png" alt="facebook" width="20px"></span></a></li> </ul> </div> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4"> <p style="font-family: 'Comfortaa', cursive;"><span><img src="https://image.flaticon.com/icons/png/512/13/13898.png" width="20"></span> <b>0123 Alaskan Way, Seattle, WA</b></p> </div> <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xl-2"> <p style="font-family: 'Comfortaa', cursive;"><span><img src="https://image.flaticon.com/icons/png/512/166/166815.png" width="20"></span> <b>(123) 456-7890</b></p> </div> </div> </div> </header> <!--2 Navigation Bar--> <div class="container-fluid"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12"> <nav class="navbar navbar-expand-md bg-dark navbar-dark"> <!-- Brand --> <a class="navbar-brand" href="#"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRLiX7H91W4CoTbomZhH_oUUBKEyXXi8Y50VA&usqp=CAU" width="200px"></a> <!-- Toggler/collapsibe Button --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <!-- Navbar links --> <div class="collapse navbar-collapse justify-content-end" id="collapsibleNavbar"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Gallery</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact Details</a> </li> <!-- Dropdown --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> More Information </a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Information 1</a> <a class="dropdown-item" href="#">Information 2</a> <a class="dropdown-item" href="#">Information 3</a> </div> </li> </ul> </div> </nav> </div> </div> </div> <!--3 Jubotron section with button--> <section class="third"> <div class="container-fluid"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12"> <!--section start--> <div class="jumbotron jumbotron-fluid"> <div class="container"> <h1>Life-long Learning</h1> <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing<br> responsive, mobile-first projects on the web.</p> <button type="button" class="btn btn-danger" style="font-family: 'Comfortaa', cursive;">Book An Appointment</button> </div> </div> </div> </div> </div> </section> <!--4 section block--> <section class="fourth"> <div class="container-fluid"> <div class="row no-gutters"> <div class="col-md-3"> <div class="jumbotron bg-primary text-white"> <img src="https://image.flaticon.com/icons/png/512/144/144322.png" alt="facebook" width="50px"> <h4>Tutorial Name 1</h4> <p>Lorem Ipsum is simply dummy text of the printing.</p> </div> </div> <div class="col-md-3"> <div class="jumbotron bg-warning text-white"> <img src="https://image.flaticon.com/icons/png/512/168/168681.png" alt="facebook" width="50px"> <h4>Tutorial Name 2</h4> <p>Lorem Ipsum is simply dummy text of the printing.</p> </div> </div> <div class="col-md-3"> <div class="jumbotron bg-success text-white"> <img src="https://image.flaticon.com/icons/png/512/167/167973.png" alt="facebook" width="50px"> <h4>Tutorial Name 3</h4> <p>Lorem Ipsum is simply dummy text of the printing.</p> </div> </div> <div class="col-md-3"> <div class="jumbotron bg-danger text-white"> <img src="https://image.flaticon.com/icons/png/512/145/145779.png" alt="facebook" width="50px"> <h4>Tutorial Name 4</h4> <p>Lorem Ipsum is simply dummy text of the printing.</p> </div> </div> </div> </div> </section> </body> </html>
h1 { font-family: 'Abril Fatface', cursive;} ul li a { margin-right: 15px;} .third { background-color: #6c757d26; background-image: url(https://www.jesusislife.in/wp-content/uploads/2019/05/Savin-NY-Website-Background-Web.jpg) !important; height: 400px; background-repeat: no-repeat; background-size: cover; background-position: bottom;} .jumbotron { background-color: #e9ecef00 !important; padding: 2rem 2rem; border-radius: 0rem;} .jumbotron h1 { margin-top: 2pc; font-size: 4pc;} .fourth { margin-top: -80px;} .navbar-dark .navbar-nav .nav-link { color: rgb(255 255 255) !important; font-family: 'Comfortaa', cursive;} .fourth h4 { font-family: 'Comfortaa', cursive; margin-top: 15px;}

Related: See More

Rotating CSS Card
Our Team section using bootstrap 4
Team Design Section with Pure CSS Effect
Image Crop jQuery

Questions / Comments: