Twitter Bootstrap Question posted in

Navbar-toggler messing up navbar-brand alignment-Twitter bootstrap

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>

JSFiddle.

Thank you

Tags:

3

Answers


  1. 0

    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 🙂

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
  3. 0

    You could try this in a style.css:

    @media (max-width: 991px) {
    .navbar-brand{    
        position: absolute;
        margin-left: 68px;
    }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search