Tips for aligning an icon at the center of a navigation bar using Bootstrap

I'm attempting to design a navigation bar with a hamburger icon on the left and another icon centered. How can I achieve this while maintaining responsiveness?

  1. My initial attempt using mx-auto (margin-left margin-right: auto) didn't work as expected because the inline block on the left pushed the centered icon to the left.
  2. I also experimented with making the navbar d-flex and adding justify-content-center, but it had no effect...

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="pos-f-t">
  <nav id="navbar" class="navbar navbar-expand-sm fixed-top navbar-dark bg-dark d-flex flex-row">
    <button class="navbar-toggler d-flex justify-content-start" type="button">
        <span class="navbar-toggler-icon"></span>
    </button>
    <img src="https://picsum.photos/20" alt="apple icon" class="d-flex justify-content-center mx-auto" id="icon">

  </nav>
</div>

Expected outcome: - The hamburger icon remains on the left, while the apple icon is centered.

Actual result: - The apple icon is slightly displaced right by the hamburger icon, - or there is no change at all, with the icon still positioned on the right side.

htmlcssbootstrap-4

Answer №1

Works flawlessly in conjunction with the code provided above. Take a look at the screenshot below.

https://i.sstatic.net/o8f0o.png

Ensure that you have included the bootstrap4 CSS file.

Answer №2

Hi Lewis, I have successfully implemented your code and integrated the bootstrap4 CSS file to enhance the design. Here's how it looks now:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<div class="pos-f-t">
        <nav
          id="navbar"
          class="navbar navbar-expand-sm fixed-top navbar-dark bg-dark d-flex flex-row"
        >
          <button class="navbar-toggler d-flex justify-content-start" type="button">
            <span class="navbar-toggler-icon"></span>
          </button>
          <img
            src="http://www.newdesignfile.com/postpic/2012/09/small-apple-logo_154074.jpg"
            alt="apple icon"
            class="d-flex justify-content-center mx-auto"
            id="icon"
            width="50px"
          />
        </nav>
</div>

https://i.sstatic.net/t7EbT.png

Answer №3

To center the image in the navbar, you can add a right padding to the navbar equal to the width of the navbar toggle button (width = 56px). Since the navbar already has a right padding of 16px, the total padding needed should be 16px + 56px = 72px.

This adjustment will ensure the image is perfectly centered within the navbar.

.navbar-fix {
  padding-right: 72px !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="pos-f-t">
  <nav id="navbar" class="navbar navbar-expand-sm fixed-top navbar-dark bg-dark d-flex flex-row navbar-fix">
    <button class="navbar-toggler d-flex justify-content-start" type="button">
        <span class="navbar-toggler-icon"></span>
    </button>
    <img src="https://picsum.photos/20" alt="apple icon" class="d-flex justify-content-center mx-auto" id="icon">

  </nav>
</div>

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

Challenges with placement of Div elements

Check out my jsFiddle example here: http://jsfiddle.net/pqCGd/. Within the jsFiddle, you will find a large messages div that contains multiple message divs. In this example, I have manually provided an example of a message div instead of using auto-genera ...

csshtml

What is the process for uploading the product information to the database during checkout?

Everything on my e-commerce website is functioning perfectly, except for the checkout page. After the customer fills in the bill details, they should be able to place an order. The issue I am facing is that while I am able to retrieve and store the bill d ...

phpjqueryhtml

Smooth transitions that will enhance your webpage's SEO rankings

Lately, I have been experimenting with AJAX and absolutely enjoying how it elevates the user experience. One aspect of my (Wordpress) website that I believe could benefit from enhancement is incorporating animated transitions between pages. Nevertheless, ...

jqueryajaxcssseo

Excessive content in Bootstrap Table

I am currently facing an issue with two tables placed side by side using the Bootstrap grid system. While the tables are dynamic and visually appealing, I encounter a problem when adding lengthy strings dynamically. The overflow of text within the table ca ...

htmlcsshtml-tableoverflowbootstrap-4

A pair of buttons and text with varying alignment

Here is the code from my popup.htlm file: HTML <body> <select style="width: 100%;" multiple id="HLSlist"> </select> <span style="display:inline"> <button type="button" id="Deletebut">Delete</button> ...

htmlcssalignment

Updating the Title of a Page in Node.js

Is it possible to dynamically update the title of each page using NodeJS? The index.html file (located inside the public folder) looks like this: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel= ...

htmlnode.jsexpress

How can I utilize CSS to dictate color schemes on an HTML5 canvas element?

Currently, I am working on a checkers project where the first step is to create the initial board. The way we are currently implementing this has raised a philosophical concern. We are using the fillRect function to define the color of the "dark" squares a ...

csshtml

Align the <div> vertically within the <td> tag

My current set up looks something like this: <tr> <td> <div class="blue">...</div> <div class="yellow">...</div> </td> <td> <div class="blue">...</div> <div class="yellow ...

htmlcss

Troubleshooting a Responsive DIV with Hover Effects in CSS

I am encountering an issue with the mobile version of a responsive website that I am constructing. The green "info" DIV seen at the top left corner in the full-screen version needs to be relocated and placed at the bottom of the screen, just above the foo ...

htmljquerycssresponsive-design

Value of an object passed as a parameter in a function

I am trying to use jQuery to change the color of a link, but I keep getting an error when trying to reference the object. Here is my HTML : <a onmouseover="loclink(this);return false;" href="locations.html" title="Locations" class="nav-link align_nav" ...

javascriptjqueryhtmlcss

What is the procedure for adding my API key to the URI provided by British Airways?

Here is the British Airways developer site link: How can I apply my API key to this link in order to access information? URI Format: To access a resource, use the URI format below: https://api.ba.com/rest-v1/{resourceVersion}/{resourceName};{filters} ...

htmlangularjsapiurluri

Glistening HTML Element along with DT::renderDataTable result$

My website is built using HTML and connected to Shiny through the use of matching IDs in HTML Elements. To display table data on the site, the code snippet below functions properly: server.R output$InfoTable <- renderTable({...}) index.html <div ...

htmlrclassshinydt

What is causing nested divs to generate a scrollbar?

I am struggling with a situation involving 3 layers of nested divs: <div class="outer"> <div class="inner"><div class="item"></div></div> </div> In this scenario, the .inner div is set to position absolute and each d ...

htmlcssborder-box

Rotate the front view image to the left view with a three-dimensional twist

I've been attempting to rotate the image using the code below, but I can only manage to go from a front view to a bottom view. My goal is to rotate the image from the front view to the left view. Is there a way for me to achieve this? body { heig ...

htmlcsscss-transforms

Using JSON as HTML data within Flexbox for interactive hyperlink rollovers

Utilizing JSON to extract HTML data with unique html tags within Flex has presented a challenge. The limited support for HTML in Flex has made it difficult to implement a basic font color rollover effect on links. While Flex only allows for a few HTML tags ...

htmlcssapache-flexjsonrollovers

Is there a way to verify if an <input/> element is flagged as invalid during testing?

Currently, I have a Selenium suite in place to test the (web) user interface. My main focus is on verifying that appropriate error messages are displayed when users enter invalid values. <input id="inputID" type="number" min="1" step="1" /> WebE ...

javahtmlseleniumautomated-tests

What could be causing my click event to only fire once upon generating HTML, but function properly when using console.log?

It seems to be functioning correctly in the console, as well as when generating HTML. However, it only seems to work once with HTML, while it consistently works with the console. Should I consider using a loop here and returning the HTML in that manner? I ...

javascripthtmlajaxdomevents

Tips for eliminating the blank white screen that shows up after the splash screen and before the initial page on an HTML5 web application on iOS

Our HTML5 app can be found at www.tekiki.com. We're experiencing an issue where a white page appears between the splash screen and the first page on iPhone 4s. This only occurs on the iPhone and not on desktop, and we're struggling to find a solu ...

iphoneioshtmlios5

"Utilizing margins to create space between elements within a Bootstrap

I am currently utilizing bootstrap 4 and have a list of items that I am displaying in the following manner: <div class="container"> <div class="row"> <div class="card col-md-4 col-sm-6 col-12 item-wr" *ngFor="let item of items"> ...

htmlcsstwitter-bootstrapangularbootstrap-4

The Open Graph share debugger encounters a situation where it scrapes through an empty

Having trouble setting up Open Graph meta tags for a website? Even though the tags appear in the source when accessed through a browser, they don't show up in the OG debugger. The website I'm currently working on is located at spurafrika-org.ver ...

htmlnext.jsfacebook-opengraph