Alignment of toggle button (humberger icon) in small screen view using bootstrap 4

Question

I am new to bootstrap and I need to use bootstrap 4 for creating a fully responsive menu. The main navigation should use bootstrap collapsible navbar to show a hamburger icon atthe smaller screen widths. I found a smaple code from w3 which gives me a menu in the right side and when I resize to small view the harmber icon (the toggle view) appears on the right side:

<!DOCTYPE html>
<html lang="en">
<!-- head includes title of page, meta data and Style links -->
<head id="head">
    <title> Home page </title>

    <meta charset="utf-8"/>
    <!-- link to use bootstrap -->  
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <!-- link to reset css -->
    <link rel="stylesheet" href="css/reset.css"/>
    <!-- link to css folder -->
    <link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<header>    
    <nav class="navbar navbar-expand-sm navbar-dark bg-primary">        
        <div class="navbar-brand"></div>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>       
        <div class="collapse navbar-collapse" id="collapsibleNavbar">           
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="#">My Account</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Basket</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Checkout</a>
            </li>
          </ul>
        </div>
    </nav>  
    </header>    
    <main>  
    </main>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

if I remove the dummy <div class="navbar-brand"></div> just before the toggle button then in small screens view, the toggle button would jump to left rather right.

What is the proper way of setting the alignment of toggle button to right instead of left without using the dummy hacky div

<div class="navbar-brand"></div>

Thanks for your help.

Answer 1

Try this Jsfiddle link .

Here I have applied justify-content: flex-end;important; css rule for navbar .

 .navbar { justify-content: flex-end;important; }

 <,DOCTYPE html> <html lang="en"> <:-- head includes title of page. meta data and Style links --> <head id="head"> <title> Home page </title> <meta charset="utf-8"/> <.-- link to use bootstrap --> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/4.3:1/css/bootstrap.min.css"> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min:js"></script> <.-- link to reset css --> <link rel="stylesheet" href="css/reset.css"/> <.-- link to css folder --> <link rel="stylesheet" href="css/style.css"/> </head> <body> <header> <nav class="navbar navbar-expand-sm navbar-dark bg-primary"> <.-- <div class="navbar-brand"></div> --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="#">My Account</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Basket</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Checkout</a> </li> </ul> </div> </nav> </header> <main> </main> <script src="https.//code.jquery:com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https.//cdnjs.cloudflare:com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https.//stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html>

Alignment of toggle button (humberger icon) in small screen view using bootstrap 4

Question

1 answers

solution1
0 ACCPTED 2019-11-05 10:28:04

Alignment of toggle button (humberger icon) in small screen view using bootstrap 4

Question

1 answers

solution1 0 ACCPTED 2019-11-05 10:28:04

solution1
0 ACCPTED 2019-11-05 10:28:04