<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 ----------> <!-- NAVBAR--> <nav class="navbar navbar-expand-lg it-1 navbar-dark bg-dark shadow-sm"> <div class="container"> <a href="#" class="navbar-brand"> <!-- Logo Image --> <img src="https://indior.tours/images-static/indior_transperent%20cropped.png" width="85" alt="Indior Tours" class="d-inline-block align-middle mr-2"> <!-- Logo Text --> <span class="text-uppercase font-weight-bold">The World is Our Family</span> </a> <button type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler"><span class="navbar-toggler-icon"></span></button> <div id="navbarSupportedContent" class="collapse navbar-collapse"> <ul class="navbar-nav ml-auto"> <li class="nav-item active"><a href="#" class="nav-link">Home <span class="sr-only">(current)</span></a></li> <li class="nav-item"><a href="#" class="nav-link">About</a></li> <li class="nav-item"><a href="#" class="nav-link">Services</a></li> <li class="nav-item"><a href="#" class="nav-link">Contact</a></li> </ul> </div> </div> </nav> <!-- DUMMY TEXT--> <section class="it-1"> <div class="container it-1"> <ol class="pt-3"> <li class="it-2">Add your logo image inside<code>a.navbar-brand</code></li> <li class="it-3">You can set the logo width and height by<code>width=""</code>,<code>height=""</code> attributes.</li> <li class="it-4">Add one of <code>.align-top .align-middle .align-bottom</code> classes to vertically adapt adjacent text with the image.</li> </ol> <p class="text-muted it-5">Snippet by <a href="https://bootsnipp.com/" class="text-reset"> <u>Bootstrap</u></a> </p> </p> </div> </section>

/* * * ========================================== * DUMMY TEXT * ========================================== * */ body { background: linear-gradient(70deg, #e6e6e6, #f7f7f7); color: #514B64; min-height: 100vh; } code { background: #fff; padding: 0.2rem; border-radius: 0.2rem; margin: 0 0.3rem; }