How to center Icon in navbar with bootstrap

Related searches

I'm trying to create navbar with a hamburger on the left and icon centered. How can I do this with responsively?

  1. I tried to use mx-auto (margin-left margin-right: auto) but since I have a inline block on the left, the centered icon is pushed to the left.
  2. I have also tried making the navbar d-flex and add justify-content-center but it just did nothing...

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

This works perfectly with your above code. Check the below screenshot.

Make sure you have added the bootstrap4 css file

How to Align Navbar Items to Center using Bootstrap 4 , Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java� What you can do here is that add a right padding equal to the width of the navbar toggle button (width = 56px) to navbar. It already has a right padding of 16px. So, our total padding should be 16px + 56px = 72px. This will align the image exactly in the center of the navbar.

Lewis, Your code is working fine. I just added bootstrap4 CSS file. Below is my code.

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

Bootstrap 4 Navbar Center Links Examples on Codeply, Create a responsive Navbar with text below icons that shows only icons on mobile. Tagged with bootstrap, html, webdev, css. Bootstrap provides an easy way to control the menu alignment. To align the text or menu links in Bootstrap navbar, navbar-navand navbar-leftor navbar-rightare used. However, sometimes it requires aligning menu links in the center of the navbar. But Bootstrap doesn’t have any class for center alignment.

What you can do here is that add a right padding equal to the width of the navbar toggle button (width = 56px) to navbar. It already has a right padding of 16px. So, our total padding should be 16px + 56px = 72px.

This will align the image exactly in the center of 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>

How To Create Centered Menu Links, Input group � Jumbotron � List group � Modal � Navs � Navbar � Pagination � Popovers � Progress � Scrollspy � Tooltips � Utilities � Borders � Clearfix � Close icon � The Bootstrap 4 Navbar uses flexbox, so it's possible to achieve this without extra CSS. You will need an empty spacer div to keep the logo centered. <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="collapse navbar-collapse w-100 order-1 order-lg-0" id="navbarNav">

How to Make a Icon + Text Navbar in Bootstrap, The following CSS code of the navbar-center class will align the menu or text content to the center position in Bootstrap navbar..navbar-nav.navbar-center { position: absolute; left: 50 %; transform: translatex(-50 %); } Our example code aligns the menu in three positions on Bootstrap navbar like the below.

Vertical alignment � Bootstrap, 21,301 Points. on Jun 12, 2017. Hello Mark Libario , Bootstrap uses Flexbox (css technique) on the navigation bar. so to center the nav bar you have to set the flexbox css property. justify-content: center; on the. <div class="collapse navbar-collapse" id="navbarNav" style="">.

This snippet is free and open source hence you can use it in your project.Bootstrap 4 navbar with icons snippet example is best for Bootstrap navbar, responsive.A great starter for your new awesome project with 1000+ Font Awesome Icons, 4000+ Material Design Icons and Material Design Colors at BBBootstrap.com.

Comments
  • Can you please post both HTML and CSS code, which can be run to check the issue OR create a JSfiddle / Codepen.
  • Do you want it to be in the center of the whole navbar, instead of the part of navbar that is left after the hamburger icon?
  • I think the OP wants it to be in the center of the whole navbar, instead of the part of navbar that is left after the hamburger icon
  • @NanditaSharma But this is not what is mentioned above
  • I had a doubt and thats why I have asked the OP about the same.