"Advance Navbar Bootstrap 4.1.1 (Just put image in carousel)"
Bootstrap 4.1.1 Snippet by mahmoodhafiz

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 ----------> <div class="container"> <div class="row"> <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2> </div> </div><!DOCTYPE html> <html> <head> <title>Alphtach | Home</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" > <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/animate.css"> <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> </head> <body> <header> <!-- ======================================Navigation Bar================================================= --> <nav class="navbar navbar-expand-lg navStyle"> <a class="brand-navbar" href="#"><img src="image/logo.png" alt="Responsive image" height="60px"></a> <button class="navbar-toggler" data-toggle="collapse" data-target="#mainMenu"> <span><i class="fas fa-align-right iconStyle"></i></span> </button> <div class="collapse navbar-collapse" id="mainMenu"> <ul class="navbar-nav ml-auto navList"> <li class="nav-item active"><a href="#" class="nav-link"><i class="fas fa-home"></i>HOME<span class="sr-only">(current)</span></a></li> <li class="nav-item"> <a href="services.html" class="nav-link"><i class="fas fa-cogs"></i>Services</a> </li> <li class="nav-item"> <a href="portfolio.html" class="nav-link"><i class="fas fa-briefcase"></i>Portfolio</a> </li> <li class="nav-item"> <a href="contact.html" class="nav-link"><i class="fas fa-phone"></i>Contact</a> </li> <li class="nav-item"> <a href="about.html" class="nav-link"><i class="fas fa-users"></i>About</a> </li> </ul> </div> </nav> <!-- ======================================carousel================================================= --> <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="image/slide1.jpg" role="listbox"> <div class="carousel-caption"> <h1 class="animated fadeInDown">Welcome</h1> <p class="animated fadeInUp">Aliquam quis unde nobis aspernatur,<br/> perferendis sed explicabo obcaecati provident repudiandae.</p> <button class="btn btn-defualt animated zoomIn">Read More</button> </div> </div> <div class="carousel-item"> <img class="d-block w-100" src="image/slide2.jpeg" alt="..." role="listbox"> <div class="carousel-caption"> <h1 class="animated fadeInDown">Welcome</h1> <p class="animated fadeInUp">Aliquam quis unde nobis aspernatur,<br/> perferendis sed explicabo obcaecati provident repudiandae.</p> <button class="btn btn-defualt animated zoomIn">Read More</button> </div> </div> <div class="carousel-item"> <img class="d-block w-100" src="image/slide3.jpg" alt="..." role="listbox"> <div class="carousel-caption"> <h1 class="animated zoomIn">We Design We Develop</h1> <p class="animated zoomIn">Aliquam quis unde nobis aspernatur,<br/> perferendis sed explicabo obcaecati provident repudiandae.</p> <button class="btn btn-defualt animated zoomIn">Read More</button> </div> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control" aria-hidden="true"><i class="fas fa-long-arrow-alt-left"></i></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control" aria-hidden="true"><i class="fas fa-long-arrow-alt-right"></i></span> <span class="sr-only">Next</span> </a> </div> </header> </body> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" ></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> </html>
body { font-family: 'Montserrat', sans-serif; } .navbar { background-color: black; } .navbar .brand-navbar img:hover { opacity: 0.7; } .navbar ul { padding: 0px 30px 0px 0px; } .navbar ul li a{ color: white; margin: 10px 0px 0px 10px; text-transform: uppercase; font-size: 12px; } .navbar ul li a .fas{ padding-right:5px; padding-left:5px; } .navbar ul li a:hover{ color: #15b000; } .navbar ul li.active > a { color: #15b000; font-weight: bold; font-size: 12px; border-left: 3px solid #15b000; border-radius: 40px; } .iconStyle { color: #15b000; } /*=====================================Slier============================================*/ header .carousel-inner .item { height: 100vh; } .carousel-caption { padding-bottom: 130px; } .carousel-caption h1 { font-size: 70px; font-weight: 1000; text-shadow: 3px 3px #15b000;; text-transform: uppercase; animation-delay: 1s; animation-duration: 2s; } .carousel-caption p { animation-delay: 1s; } .carousel-caption .btn { animation-delay: 1s; border-radius: 20px; background-color: transparent; border: 2px solid white; color: white; margin-top: 20px; animation-duration: 2s; } .carousel-control-prev { width: 48px; height: 48px; top: auto; bottom: 0; font-size: 2rem; } .carousel-control-next { width: 48px; height: 48px; top: auto; bottom: 0; font-size: 2rem; } /*=====================================Slier============================================*/ @media only screen and (max-width:480px) { .carousel-caption { padding-bottom: 20px; } .carousel-caption h1 { font-size: 20px; font-weight: 1000; text-shadow: 3px 3px #15b000;; text-transform: uppercase; animation-delay: 1s; animation-duration: 2s; } .carousel-caption p { animation-delay: 1s; font-size: 10px; } .carousel-caption .btn { animation-delay: 1s; border-radius: 20px; background-color: transparent; border: 2px solid white; color: white; margin-top: 5px; animation-duration: 2s; padding: 5px; font-size: 10px; } }

Related: See More

BLK• Design System
Bootstrap NavBar Menu Dropdowns http://fontenele.github.io/bootstrap-navbar-dropdowns/
Image Crop jQuery
Bootstrap 4 Navbar with Icon Top

Questions / Comments: