How to Align navbar logo to the left screen using Bootstrap ?

01 Jun, 2020
It is very easy in Bootstrap to align items left and right by using the bootstrap classes. By default, it sets to left. If you want to align items center or right then it will be done by yourself. To align the navbar logo to the left of the screen with the Bootstrap method is a quick trick that can save you from writing extra CSS. In this, we simply add another div tag above the div tag having class navbar navbar-expand-lg navbar-light bg-light fixed-top py-lg-0.
Example:
<!DOCTYPE html><html>  <head>    <title>        How to Align navbar logo to the         left screen using Bootstrap ?    </title>      <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"            rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"            crossorigin="anonymous">      <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="             crossorigin="anonymous">    </script>          <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"            integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"            crossorigin="anonymous">    </script></head>  <body>    <!-- NAVBAR STARTING -->    <!-- Use navbar class to the navbar logo         to the far left of the screen-->    <nav class=" navbar navbar-expand-lg         navbar-light bg-light fixed-top py-lg-0 ">          <a class="navbar-brand" href="#">              <!-- Add logo with size of 90*80 -->            <img src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"            width="90" height="80" alt="">        </a>                  <button class="navbar-toggler" type="button"                data-toggle="collapse"                 data-target="#navbarResponsive"                aria-controls="navbarResponsive"                 aria-expanded="false"                 aria-label="Toggle navigation">                                  <span class="navbar-toggler-icon"></span>        </button>          <div class="collapse navbar-collapse"                id="navbarResponsive">            <ul class="navbar-nav ml-auto">                <li class="nav-item active">                    <a class="nav-link" href="#">Home                        <span class="sr-only">(current)</span>                    </a>                </li>                <li class="nav-item">                    <a class="nav-link" href="#">About</a>                </li>                <li class="nav-item">                    <a class="nav-link" href="#">Courses</a>                </li>                <li class="nav-item">                    <a class="nav-link" href="#">Contact</a>                </li>            </ul>        </div>    </nav></body>  </html>
Output:
Bootstrap-4
Bootstrap-Misc
Picked
Bootstrap
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to set Bootstrap Timepicker using datetimepicker library ?
How to Show Images on Click using HTML ?
How to Use Bootstrap with React?
How to make Bootstrap table with sticky table head?
Tailwind CSS vs Bootstrap
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
REST API (Introduction)
Hide or show elements in HTML using display property