I want to make all the div to the right except the brand

Question

I have a navbar with the links in div tag.Except for the navbar brand i want to shift all the items to the right.I want to shift all the element to the right of the navigation bar and I want to make it like a psd,but i dont know what is the mistake in my code.Please checkout the code below.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<nav class="navbar navbar-expand-lg navbar-light bg-success">
    <a class="navbar-brand" href="#"><img src="assets/logo.png" width="100" height="40" alt=""></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar navbar-right">
        <a class="nav-link disabled" href="#" style="color:white;">How Switching Works</a>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <div class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="color:white;">
                    Dropdown
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </div>
            <div>
                <a class="nav-link disabled" href="#" style="color:white;">Blog</a>
            </div>
            <div>
                <a class="nav-link disabled" href="#" style="color:white;">Contact</a>
            </div>
            <form class="form-inline my-2 my-lg-0">
                <button class="btn btn-light my-2 my-sm-0" type="submit">Signup</button>&nbsp;&nbsp;
                <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Login</button>
            </form>
        </div>
    </div>
</nav>

<!-- Scripts are here -->
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

can you send screenshot of your psd, so we will know how you want — Nisharg Shah, Apr 21 '19 at 17:04
If you're using Bootstrap 4 then [use the correct Navbar structure](https://getbootstrap.com/docs/4.3/components/navbar/). The code you posted is for a Bootstrap 3 Navbar. — Carol Skelly, Apr 22 '19 at 10:08

score 0 · Answer 1 · answered Apr 21 '19 at 17:12

If you want all div go to right side except brand, use ml-auto class that push all content to the right side

<div class="navbar navbar-right ml-auto">

Make good navbar for mobile devices so its look nice

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<nav class="navbar navbar-expand-lg navbar-light bg-success">
    <a class="navbar-brand" href="#"><img src="assets/logo.png" width="100" height="40" alt=""></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar navbar-right ml-auto">
        <a class="nav-link disabled" href="#" style="color:white;">How Switching Works</a>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <div class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="color:white;">
                    Dropdown
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </div>
            <div>
                <a class="nav-link disabled" href="#" style="color:white;">Blog</a>
            </div>
            <div>
                <a class="nav-link disabled" href="#" style="color:white;">Contact</a>
            </div>
            <form class="form-inline my-2 my-lg-0">
                <button class="btn btn-light my-2 my-sm-0" type="submit">Signup</button>&nbsp;&nbsp;
                <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Login</button>
            </form>
        </div>
    </div>
</nav>

<!-- Scripts are here -->
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

I want to make all the div to the right except the brand

1 Answers1