What is the best way to position the navbar logo all the way to the left of the screen using Bootstrap?

I need to adjust the position of the logo in the navbar so that it is aligned with the far left of the screen. Currently, it is slightly off-center. I've experimented with various bootstrap classes along with the "navbar-brand" class, but haven't been successful in getting it to work. Any assistance would be greatly appreciated!

The portion of code I require help with is:

<a class="navbar-brand" href="index.html"><img src="img/logo.png" width="90" height="80" alt=""></a>

  <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top py-lg-0">
    <div class="container">

      <a class="navbar-brand" href="index.html"><img src="img/logo.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="products.html">Products</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

Answer №1

Have you noticed the logo positioned on the left side?

<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>
 <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top py-lg-0">
  

      <a class="navbar-brand" href="index.html"><img src="https://via.placeholder.com/150" 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="products.html">Products</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
        </ul>
  
    </div>
  </nav>

Answer №2

Delete the container `div` to eliminate unnecessary margins on the left and right side.

  <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top py-lg-0">
    <a class="navbar-brand" href="index.html">logo</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="products.html">Products</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </nav>

View code on Codepen: https://codepen.io/manaskhandelwal1/pen/BaoVvMe

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to ensure that the ul navigation bar spans the entire bottom of the page evenly (without resorting to using table

This question has been previously raised on Stack Overflow with an insightful answer provided. However, I am encountering a specific problem in implementing it. My objective is to have a navigation bar (nav consisting of ul and its li items) occupy the en ...

Is it necessary to number each header and paragraph when coding in HTML?

Do I need to write paragraphs as p1, p2, and p3 when using headers like h1, h2, and h3, or can I simply use p? Additionally, which text editor app is recommended for a Macbook? ...

Button in Angular CLI not triggering method on click event

After running the phpStorm Angular CLI project, I encountered an issue with adding a button and assigning a listener to it for the click event. Despite researching extensively and even referencing code from the official Angular documentation, the button do ...

What is the process for accessing a URL using a web browser and receiving a plain text file instead of HTML code?

Hello there! I've created a simple HTML file located at that can display your public IP address. If you take a look at the code of the page, you'll notice that it's just plain HTML - nothing fancy! However, I'm aiming for something mo ...

Validating forms using Bootstrap 4 and AngularJS

I am working on a form using Bootstrap 4 and AngularJS, and I want to implement simple form validation with the following requirements: Validate input fields after the user has interacted with them, Show different error messages based on the validation c ...

What is the reason behind the jQuery only functioning properly on Internet Explorer 8 on this particular page and no other browsers?

I recently created a webpage utilizing jQuery: The functionality on the page should change music images to represent different key signatures when switching from 'Higher Key' to 'Lower Key' in the combo box. While this works perfectly ...

The CSS styling of Confluence content is stripped when exporting to Word

Greetings StackOverflow community, I have embarked on creating a document generator within Confluence 6.10.2 (utilizing JQuery 1.7.2) that offers a range of options for the user. Users are able to interact with checkboxes or radio buttons that trigger th ...

What methods does the firebug use to uncover the distinct CSS pathway for Selenium?

When working on automating scripts with Selenium, I encountered a situation where I needed to locate a specific web element using a css selector. I relied on Firebug to provide me with the unique css path for that element. Surprisingly, there were instance ...

Determining the precise location of the div element

I am seeking to determine the precise positions of a div based on its class name. In the screenshot provided, my script for finding the div's position is highlighted in yellow, while the div I am targeting is highlighted in red at the bottom. Currentl ...

Use CSS3 to conceal the form while displaying the default div

In my project, I am restricted to using only HTML5 and CSS3. Currently, I have a form that requires simulating the action of "sending form data". Upon clicking the submit button, the form should be hidden and a default div (#result) needs to be displayed. ...

jQuery Swiper slider

I am currently working with the Swiper jQuery slider for my project. As a beginner in programming (js / jquery), I am looking to run a specific function, involving some jquery code, whenever the first slide of the slider is active. It seems that this can ...

I'm new to Bootstrap and I'm looking for a way to customize the functionality of table 1 compared to table

I am currently facing a unique issue for which I cannot find a solution. The problem lies in my timesheet table, where I intend to only add data to Table #1. However, whenever I click the + sign in the table, the same data is also displayed in Table #2. De ...

Control the button's activation status by accepting or unaccepting the two checkbox conditions

In my search through stackoverflow for help on enabling/disabling a button conditionally, I found some assistance but nothing quite matched what I needed. My situation involves two checkbox conditions rather than just one. The button should only be enable ...

How can I dynamically assign @ViewChild('anchor_name') to a newly updated anchor element in Angular 2+?

Upon receiving an item through a GET request, I set the item_id upon subscription. In the HTML file, I create a div with an anchor id="{{this.item_id}}". However, I encountered the following error: FeedComponent.html:1 ERROR TypeError: Cannot read propert ...

Steps for resetting the HTML5 meter element

I have implemented the meter element to rate between 0 and 5, but I want to display a specific image for each value instead of the default meter style: <meter min="0" max="5" value="5"> <img width="80" height="20" alt="5 out of 5 stars" src=" ...

How to extract information from a shared notebook on Evernote using Python

Trying to retrieve data from a shared Evernote notebook, such as this one: Initially attempted using Beautiful Soup: url = 'https://www.evernote.com/pub/missrspink/evernoteexamples#st=p&n=56b67555-158e-4d10-96e2-3b2c57ee372c' r = requests.g ...

What steps can I take to prevent the "onclick" event from triggering multiple times?

I'm struggling to create a button that, when clicked, reveals a message input area. I am using the "onclick" attribute in the HTML and I want to ensure that the button is only clickable once to avoid generating multiple textareas on subsequent clicks. ...

Is there a way to delete a stylesheet if I only have limited information about the url?

I am attempting to dynamically remove a CSS stylesheet using JavaScript or jQuery. I am aware that the target stylesheet is located within the 'head' element and includes the text 'civicrm.css', however, I do not possess the full URL o ...

Step by step guide on inserting View and Delete buttons in an HTML table populated by JSON data

I've successfully loaded data from a JavaScript file in JSON format into a plain HTML table using JavaScript. Everything is working well so far. I now want to enhance the table by adding two buttons, View and Delete, that when clicked will redirect to ...

Display the HTML content retrieved from the SailsJS Controller

Exploring the world of SailsJS, I am on a mission to save HTML content in a database, retrieve it, and display it as rendered HTML. To achieve this goal, I have set up a sails model and a controller. This is what my model looks like: attributes: { ht ...