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

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

Last Updated : 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:

html

<!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:

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

A

avengerjanus123

Improve

Article Tags :

Similar Reads

How to Add a Logo to the React Bootstrap Navbar ?

In this article, we will see how to add the Logo to the Navbar using React Bootstrap. The Navbar or Navigation bar is one of the most important UI components for dynamic and single-page applications. The navbar provides a better user experience and navigation over different components. In this navig

How to align two navbars in bootstrap?

Aligning two navbars in Bootstrap involves utilizing its built-in navbar classes and custom CSS styles to create and position navigation bars on a web page. Bootstrap provides predefined classes for navbars that facilitate easy creation and customization. ApproachThe HTML document imports Bootstrap

How to align navbar items to the right in Bootstrap 4 ?

The .ml-auto class in Bootstrap 4 is used to apply an automatic left margin to an element. This moves the element to the right side of its container, which is especially helpful for aligning items when using a flex layout. In this article, we will align the navbar to the right in two different ways,

How to Align Navbar Items to Center using Bootstrap 4 ?

Aligning navbar items to the center using Bootstrap refers to the practice of positioning navigation links in the middle of the navigation bar for a balanced and aesthetic design. Bootstrap's utility classes make it easy to implement this alignment responsively and efficiently.There are some common

How to Add Icon in NavBar using React-Bootstrap ?

This article will show you how to add an icon in the navigation bar using React-Bootstrap. We will use React-Bootstrap because it makes it easy to use reusable components without implementing them. PrerequisitesReactJSJSXReact BootstrapCreating React App and Installing ModuleStep 1: Create a React a