Navbar-toggler messing up navbar-brand alignment

navbar-toggler-right bootstrap 4
bootstrap navbar
bootstrap 4 navbar right align
bootstrap navbar-right align
bootstrap left navbar
bootstrap 4 navbar-brand right
bootstrap sticky navbar
bootstrap navbar-toggler-icon

I am using Bootstrap 4 and I want my navbar-toggler to come before navbar-brand such as this, but my alignment keeps getting messed up if I put the navbar-toggler first.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<nav class="navbar">
  <button class="navbar-toggler navbar-light" type="button" aria-expanded="True">
        <span class="navbar-toggler-icon"></span>
    </button>
  <a class="navbar-brand">
    <h1>????</h1>
  </a>
</nav>

Just apply the class .mr-auto after .navbar-brand.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<nav class="navbar">
  <button class="navbar-toggler navbar-light" type="button" aria-expanded="True">
        <span class="navbar-toggler-icon"></span>
    </button>
  <a class="navbar-brand mr-auto">
    <h1>????</h1>
  </a>
</nav>

Check out the .mr-auto class: https://getbootstrap.com/docs/4.0/utilities/flex/

Hope this helps :)

Navbar w/o navbar-brand breaks with navbar-toggler-right(-left , RusinovAnton commented on Jan 26, 2017. Why don't we just use align-self instead of position absolute;  When you create a navbar with only a navbar-nav component (no navbar-brand), and then use navbar-toggler-right or navbar-toggler-left, the entire navbar height collapses when the toggler is shown.


In bootstrap 4, you can add margin / padding classes to provide auto margins or paddings.

From the screenshot, I think you want your button and nav brand both in left side. There is bootstrap class "mr-auto" which is used to push items to the right and the element with this class will be aligned to the left.

<a class="navbar-brand mr-auto">
    <h1>????</h1>
  </a>

This should do the trick.

-- FULL CODE --

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<nav class="navbar">
  <button class="navbar-toggler navbar-light" type="button" aria-expanded="True">
        <span class="navbar-toggler-icon"></span>
    </button>
  <a class="navbar-brand mr-auto">
    <h1>????</h1>
  </a>
</nav>

Navbar · Bootstrap, Navbar togglers are left-aligned by default, but should they follow a sibling With no .navbar-brand shown in lowest breakpoint:. Bootstrap 4 Navbar all messed up I wish I could post a picture, but apparently you can't even link a picture so I'll try to describe. When I copy the following code, from the Bootstrap website, it is all messed up.


You could try this in a style.css:

@media (max-width: 991px) {
    .navbar-brand{    
        position: absolute;
        margin-left: 68px;
    }
}

Bootstrap 4 navbar-brand with image and text - HTML & CSS, I am looking for a way to have a navbar-brand with an image and text. But when I use that both the navbar-brand and the navbar are messed up as you can span { width: 100%; display: block; font-size: 50%; font-weight: 200; text-align: right; } Toggler/collapsibe Button --> <button class="navbar-toggler" type="​button"  Bootstrap navbar is a horizontal navigation component which apart from traditional, text links, might embed icons, dropdowns, avatars or search forms.


Navbar Left align Brand & Right align Menus, So I have a navbar code, just want the Brand to the left & menus to the right. I copied the code fixing the pull-xs-right to float-xs-right, but the navbar appears with a class="navbar-toggler-icon"></span> </button> Brand <div class="​collapse  Navbar togglers are left-aligned by default, but should they follow a sibling element like a .navbar-brand, they’ll automatically be aligned to the far right. Reversing your markup will reverse the placement of the toggler. Below are examples of different toggle styles. With no .navbar-brand shown in lowest breakpoint:


Bootstrap 4: How to make top fixed navbar stay in container and not , <div class="container"> <nav class="navbar navbar-fixed-top navbar-light bg-​faded"> <button class="navbar-toggler hidden-lg-up" type="button" id="​navbarResponsive"> <a class="navbar-brand" href="#"> <img src="" width="30" height="30" class="d-inline-block align-top" alt="">Navbar </a> <ul  I am using a navbar with only a brand image; no brand name (as shown above). You can see that the collapse button is clearly out of place, over my brand image. Expected. The collapse toggle should remain right-floated regardless of viewport width.


Bootstrap 4 Navbar Center Links Examples on Codeply, Snippets for navbar in Bootstrap 4 with centered links and left aligned brand and right aligned items. There are also examples of content outside collapse,  Navbar togglers can be left or right aligned with .navbar-toggler-left or .navbar-toggler-right modifiers. These are absolutely positioned within the navbar to avoid interference with the collapsed state. You can also use your own styles to position togglers. Below are examples of different toggle styles. With no .navbar-brand shown in lowest