CODEWITHSUNDEEP
twitter-bootstrapbootstrap-4
MRB
MRB

Reputation: 65

Bootstrap 4 Brand wont align left with data toggle

Can anyone please offer an advice on the following...

I'm learning Bootstrap 4 but I'm having issues aligning the brand element on the left of the nav bar - when the data toggle is visible. The brand is left aligned until the data toggle appears, then it seems to want to centre itself.

I simply want the brand to stay on the left hand side - i.e. stay it's default position - with the data toggle to the left of the brand when it appears. (In the example below, the data toggle is permanently showing for purpose of the example).

I have tried "float-left", "justify-content-end", as well as various work-arounds on the brand element, but nothing seems to work and I can't understand why - it should be simple to do!

<nav class="navbar navbar-dark bg-dark">
<!--Toggler LHS-->
<button class="navbar-toggler" style="border:1px solid red" type="button" data-toggle="collapse" data-target="#verticalNav" aria-controls="verticalNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

<!--Brand LHS-->
<a class="navbar-brand float-left" href="#"  style="border:1px solid red"> LOGO</a>

<!--fixed Links, RHS-->
<div style="float:right; border:1px solid red">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
</div>

Many thanks for any help

Upvotes: 1

Views: 484

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362290

Don't use floats to align Bootstrap 4 Navbar content. Now that the Navbar is flexbox, you can use auto-margins or the flexbox utils...

<nav class="navbar navbar-dark bg-dark">
    <!--Toggler LHS-->
    <button class="navbar-toggler" style="border:1px solid red" type="button" data-toggle="collapse" data-target="#verticalNav" aria-controls="verticalNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <!--Brand LHS-->
    <a class="navbar-brand mr-auto" href="#" style="border:1px solid red"> LOGO</a>

    <!--fixed Links, RHS-->
    <div style="border:1px solid red">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
    </div>

https://www.codeply.com/go/xDUFwteCs6

Also see: Bootstrap NavBar with left, center or right aligned items

Upvotes: 2

Related Questions