<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <nav role="navigation" aria-labelledby="block-mainnavigation-menu" id="block-mainnavigation" class="contextual-region block block-menu navigation menu--main"> <ul class="navbar-nav mb-2 mb-lg-0"> <!-- Link --> <li class="nav-item"> <a class="nav-link" href="/websites">Websites</a> </li> <li class="nav-item"> <a class="nav-link" href="#">My Todo</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#"> <i class="fa fa-envelope-o"> <span class="badge badge-warning">11</span> </i> Disabled </a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> Dropdown link </a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> </div> </li> </ul> <ul class="navbar-nav ml-auto "> <li class="nav-item"> <a href="#" class="nav-item nav-link">Login</a> </li> <li class="nav-item"> <a class="nav-link" href="#"> <i class="fa fa-bell"> <span class="badge badge-info">11</span> </i> Test </a> </li> <li class="nav-item"> <a class="nav-link" href="#"> <i class="fa fa-globe"> <span class="badge badge-success">11</span> </i> Test </a> </li> </ul> </nav>