Breaking News: Grepper is joining You.com. Read the official announcement!

nav bar menu pull right

@CodeGrepperManu answered on March 16, 2022 Popularity 10/10 Helpfulness 2/10

answer nav bar menu pull right

related pull right item of navbar

nav bar menu pull right

Comment

<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <!-- Container wrapper -->
    <div class="container-fluid">
      <!-- Navbar brand -->
      <a class="navbar-brand" href="#">Navbar</a>
  
      <!-- Toggle button -->
      <button class="navbar-toggler" type="button" data-mdb-toggle="collapse"
        data-mdb-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
        aria-label="Toggle navigation">
        <i class="fas fa-bars text-light"></i>
      </button>
  
      <!-- Collapsible wrapper -->
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <!-- Left links -->
        <ul class="navbar-nav me-auto d-flex flex-row mt-3 mt-lg-0">
          <li class="nav-item text-center mx-2 mx-lg-1">
            <a class="nav-link active" aria-current="page" href="#!">
              <div>
                <i class="fas fa-home fa-lg mb-1"></i>
              </div>
              Home
            </a>
          </li>
          <li class="nav-item text-center mx-2 mx-lg-1">
            <a class="nav-link" href="#!">
              <div>
                <i class="far fa-envelope fa-lg mb-1"></i>
                <span class="badge rounded-pill badge-notification bg-danger">11</span>
              </div>
              Link
            </a>
          </li>
          <li class="nav-item text-center mx-2 mx-lg-1">
            <a class="nav-link disabled" aria-disabled="true" href="#!">
              <div>
                <i class="far fa-envelope fa-lg mb-1"></i>
                <span class="badge rounded-pill badge-notification bg-warning">11</span>
              </div>
              Disabled
            </a>
          </li>
          <li class="nav-item dropdown text-center mx-2 mx-lg-1">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-mdb-toggle="dropdown"
              aria-expanded="false">
              <div>
                <i class="far fa-envelope fa-lg mb-1"></i>
                <span class="badge rounded-pill badge-notification bg-primary">11</span>
              </div>
              Dropdown
            </a>
            <!-- Dropdown menu -->
            <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDropdown">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li>
                <hr class="dropdown-divider" />
              </li>
              <li>
                <a class="dropdown-item" href="#">Something else here</a>
              </li>
            </ul>
          </li>
        </ul>
        <!-- Left links -->
  
        <!-- Right links -->
        <ul class="navbar-nav ms-auto d-flex flex-row mt-3 mt-lg-0">
          <li class="nav-item text-center mx-2 mx-lg-1">
            <a class="nav-link" href="#!">
              <div>
                <i class="fas fa-bell fa-lg mb-1"></i>
                <span class="badge rounded-pill badge-notification bg-info">11</span>
              </div>
              Messages
            </a>
          </li>
          <li class="nav-item text-center mx-2 mx-lg-1">
            <a class="nav-link" href="#!">
              <div>
                <i class="fas fa-globe-americas fa-lg mb-1"></i>
                <span class="badge rounded-pill badge-notification bg-success">11</span>
              </div>
              News
            </a>
          </li>
        </ul>
        <!-- Right links -->
  
        <!-- Search form -->
        <form class="d-flex input-group w-auto ms-lg-3 my-3 my-lg-0">
          <input type="search" class="form-control" placeholder="Search" aria-label="Search" />
          <button class="btn btn-primary" type="button" data-mdb-ripple-color="dark">
            Search
          </button>
        </form>
      </div>
      <!-- Collapsible wrapper -->
    </div>
    <!-- Container wrapper -->
  </nav>
  <!-- Navbar -->
<style>
.btn { padding: .55rem 1.5rem .45rem;} </style>

Popularity 10/10 Helpfulness 2/10 Language whatever

Source: Grepper

Tags: bootstrap-5 menu nav navbar pull whatever

Link to this answer
Share Copy Link

Contributed on Jan 03 2023

@CodeGrepperManu

0 Answers Avg Quality 2/10

Closely Related Answers

pull right item of navbar

Comment

you can use 
			ml-auto 
on the * <ul> * element you want to float right in the navbar

Popularity 5/10 Helpfulness 6/10 Language whatever

Source: Grepper

Tags: navbar pull whatever

Link to this answer
Share Copy Link

Contributed on Mar 16 2022

msaber

0 Answers Avg Quality 2/10

nav bar menu pull right

Contents

More Related Answers

nav bar menu pull right

Closely Related Answers

pull right item of navbar

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.