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

Read

Discuss

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:

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 01 Jun, 2020

.pull-left and .pull-right classes in Bootstrap 4

Node.js This Binding

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

Please Login to comment...