Bootstrap 4 - Navbar

Descrição

Navbar fornece cabeçalhos de navegação para seu aplicativo ou site. As barras de navegação diminuem em visualizações móveis e se tornam horizontais conforme a largura da janela de visualização disponível aumenta.

Navbar básico

Para criar um navbar básico, adicione a classe .navbar com a classe de recolhimento responsivo .navbar-expand-xl | lg | md | sm (fornece navbar em telas extra grandes, grandes, médias ou pequenas). Para adicionar links à barra de navegação, basta adicionar uma lista não ordenada com a classe .navbar-nav . Para definir cada item de lista individual, adicione a classe .nav-item ao elemento <li> e use a classe .nav-link para um elemento <a> para links individuais.

O exemplo a seguir demonstra a criação de uma barra de navegação básica -

Exemplo

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Basic Navbar</h2>
         <nav class = "navbar navbar-expand-sm navbar-dark bg-secondary">
            <a class = "navbar-brand" href = "#">Navbar</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 = "collapse navbar-collapse" id = "navbarSupportedContent">
               <ul class = "navbar-nav mr-auto">
                  <li class = "nav-item active">
                     <a class = "nav-link" href = "#">Home 
                        <span class = "sr-only">(current)</span>
                     </a>
                  </li>
                  <li class = "nav-item">
                     <a class = "nav-link" href = "#">About Us</a>
                  </li>
                  <li class = "nav-item">
                     <a class = "nav-link" href = "#">Contact</a>
                  </li>
               </ul>
               
            </div>
         </nav>
      </div>
      
      <!-- jQuery library -->
      <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
         integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Popper -->
      <script src =" https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
         integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Latest compiled and minified Bootstrap JavaScript -->
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
         integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

Isso produzirá o seguinte resultado -

Resultado

Logotipo da marca

A marca ou logotipo da página pode ser destacado usando a classe .navbar-brand como mostrado no exemplo abaixo -

Exemplo

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Brand</h2>
         <nav class = "navbar navbar-expand-sm bg-secondary navbar-dark">
            <a class = "navbar-brand" href = "#">Logo</a>
            <ul class = "navbar-nav">
               <li class = "nav-item active">
                  <a class = "nav-link" href = "#">Home 
                     <span class = "sr-only">(current)</span>
                  </a>
               </li>
               <li class = "nav-item">
                  <a class = "nav-link" href = "#">About Us</a>
               </li>
               <li class = "nav-item">
                  <a class = "nav-link" href = "#">Contact</a>
               </li>
            </ul>
         </nav>
         <br>
         
         <h2>Image Logo</h2>
         <nav class = "navbar navbar-expand-sm bg-secondary navbar-dark">
            <a class = "navbar-brand" href = "#">
               <img src = "https://www.tutorialspoint.com/bootstrap/images/logo.png" 
                  style = "width:120px;" alt = "">
            </a>
            <ul class = "navbar-nav">
               <li class = "nav-item active">
                  <a class = "nav-link" href = "#">Home 
                     <span class = "sr-only">(current)</span>
                  </a>
               </li>
               <li class = "nav-item">
                  <a class = "nav-link" href = "#">About Us</a>
               </li>
               <li class = "nav-item">
                  <a class = "nav-link" href = "#">Contact</a>
               </li>
            </ul>
            
         </nav>
      </div>
      
      <!-- jQuery library -->
      <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
         integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Popper -->
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
         integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Latest compiled and minified Bootstrap JavaScript -->
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
         integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

Isso produzirá o seguinte resultado -

Resultado

Navbar com lista suspensa

Navbar pode ter um menu suspenso adicionando o código suspenso ao elemento <li> com a ajuda da classe .dropdown . O exemplo a seguir demonstra isso -

Exemplo

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   <body>
      <div class = "container">
         <h2>Navbar With Dropdown</h2>
         <nav class = "navbar navbar-expand-sm bg-secondary navbar-dark">
            <a class = "navbar-brand" href = "#">Navbar</a>
            <button class = "navbar-toggler" type = "button" data-toggle = "collapse" 
               data-target = "#navbarNavDropdown" aria-controls = "navbarNavDropdown" 
               aria-expanded = "false" aria-label = "Toggle navigation">
               
               <span class="navbar-toggler-icon"></span>
            </button>
            
            <div class = "collapse navbar-collapse" id = "navbarNavDropdown">
               <ul class = "navbar-nav">
                  <li class = "nav-item active">
                     <a class = "nav-link" href = "#">Home 
                        <span class = "sr-only">(current)</span>
                     </a>
                  </li>
                  <li class = "nav-item">
                     <a class = "nav-link" href = "#">About Us</a>
                  </li>
                  <li class = "nav-item">
                     <a class = "nav-link" href = "#">Contact</a>
                  </li>
                  <li class = "nav-item dropdown">
                     <a class = "nav-link dropdown-toggle" href = "#" 
                        id = "navbarDropdownMenuLink" role = "button" data-toggle = "dropdown" 
                        aria-haspopup = "true" aria-expanded = "false">
                        
                        Library
                     </a>
                     
                     <div class = "dropdown-menu" aria-labelledby = "navbarDropdownMenuLink">
                        <a class = "dropdown-item" href = "#">HTML-5</a>
                        <a class = "dropdown-item" href = "#">CSS-3</a>
                        <a class = "dropdown-item" href = "#">Bootstrap-4</a>
                     </div>
                  </li>
               </ul>
               
            </div>
         </nav>
      </div>
      
      <!-- jQuery library -->
      <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
         integrity =" sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Popper -->
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
         integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Latest compiled and minified Bootstrap JavaScript -->
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
         integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
         crossorigin =" anonymous">
      </script>
      
   </body>
</html>

Isso produzirá o seguinte resultado -

Resultado

Navbar com formulários e botões

Você pode criar controles de formulário e botão na barra de navegação usando a classe form-inline para o elemento <form>, conforme mostrado no exemplo abaixo -

Exemplo

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Navbar with Form and Button</h2>
         <nav class = "navbar navbar-expand-sm bg-secondary navbar-dark">
            <form class = "form-inline">
               <input class = "form-control mr-sm-2" type = "text" placeholder = "Search your product">
               <button class = "btn btn-info" type = "submit">Search</button>
            </form>
         </nav>
      </div>
      
      <!-- jQuery library -->
      <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
         integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Popper -->
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
         integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Latest compiled and minified Bootstrap JavaScript -->
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
         integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

Isso produzirá o seguinte resultado -

Resultado

Navbars coloridas

Altere a cor de fundo da barra de navegação usando utilitários de cor de fundo (.bg- *) , como bg-primary , bg-dark etc. O exemplo a seguir demonstra isso -

Exemplo

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Colored Navbars</h2>
         <nav class = "navbar navbar-expand-sm bg-light navbar-light">
            <a class = "navbar-brand" href = "#">Navbar</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 = "collapse navbar-collapse" id = "navbarSupportedContent">
               <ul class = "navbar-nav">
                  <li class = "nav-item active">
                     <a class =" nav-link" href = "#">Home</a>
                  </li>
                  <li class = "nav-item">
                     <a class = "nav-link" href = "#">About Us</a>
                  </li>
                  <li class = "nav-item">
                     <a class = "nav-link" href = "#">Contact</a>
                  </li>
               </ul>
            </div>
            
         </nav>
         <br>
         
         <nav class = "navbar navbar-expand-sm bg-secondary navbar-light">
            <a class = "navbar-brand" href = "#">Secondary Navbar</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 = "collapse navbar-collapse" id = "navbarSupportedContent">
               <ul class = "navbar-nav">
                  <li class = "nav-item active">
                     <a class = "nav-link" href = "#">Home</a>
                  </li>
                  <li class = "nav-item">
                     <a class = "nav-link" href = "#">About Us</a>
                  </li>
                  <li class = "nav-item">
                     <a class = "nav-link" href = "#">Contact</a>
                  </li>
               </ul>
            </div>
         </nav>
         <br>
         
         <nav class = "navbar navbar-expand-sm bg-dark navbar-light">
            <a class = "navbar-brand" href = "#">Dark Navbar</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 = "collapse navbar-collapse" id = "navbarSupportedContent">
               <ul class = "navbar-nav">
                  <li class = "nav-item active">
                     <a class = "nav-link" href = "#">Home</a>
                  </li>
                  <li class = "nav-item">
                     <a class = "nav-link" href = "#">About Us</a>
                  </li>
                  <li class = "nav-item">
                     <a class = "nav-link" href = "#">Contact</a>
                  </li>
               </ul>
            </div>
         </nav>
         <br>
         
         <nav class = "navbar navbar-expand-sm bg-primary navbar-light">
            <a class = "navbar-brand" href = "#">Primary Navbar</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 = "collapse navbar-collapse" id = "navbarSupportedContent">
               <ul class = "navbar-nav">
                  <li class = "nav-item active">
                     <a class = "nav-link" href = "#">Home</a>
                  </li>
                  <li class = "nav-item">
                     <a class = "nav-link" href = "#">About Us</a>
                  </li>
                  <li class = "nav-item">
                     <a class = "nav-link" href = "#">Contact</a>
                  </li>
               </ul>
            </div>
         </nav>
         <br>
         
         <nav class = "navbar navbar-expand-sm bg-success navbar-light">
            <a class = "navbar-brand" href = "#">Success Navbar</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 = "collapse navbar-collapse" id = "navbarSupportedContent">
               <ul class = "navbar-nav">
                  <li class = "nav-item active">
                     <a class = "nav-link" href = "#">Home</a>
                  </li>
                  <li class = "nav-item">
                     <a class = "nav-link" href = "#">About Us</a>
                  </li>
                  <li class = "nav-item">
                     <a class = "nav-link" href = "#">Contact</a>
                  </li>
               </ul>
            </div>
         </nav>
         <br>
         
         <nav class = "navbar navbar-expand-sm bg-info navbar-light">
            <a class = "navbar-brand" href = "#">Info Navbar</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 = "collapse navbar-collapse" id = "navbarSupportedContent">
               <ul class = "navbar-nav">
                  <li class = "nav-item active">
                     <a class = "nav-link" href = "#">Home</a>
                  </li>
                  <li class = "nav-item">
                     <a class = "nav-link" href = "#">About Us</a>
                  </li>
                  <li class = "nav-item">
                     <a class = "nav-link" href = "#">Contact</a>
                  </li>
               </ul>
            </div>
         </nav>
         <br>
         
         <nav class = "navbar navbar-expand-sm bg-warning navbar-light">
            <a class = "navbar-brand" href = "#">Warning Navbar</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 = "collapse navbar-collapse" id = "navbarSupportedContent">
               <ul class = "navbar-nav">
                  <li class = "nav-item active">
                     <a class = "nav-link" href = "#">Home</a>
                  </li>
                  <li class = "nav-item">
                     <a class = "nav-link" href = "#">About Us</a>
                  </li>
                  <li class = "nav-item">
                     <a class = "nav-link" href = "#">Contact</a>
                  </li>
               </ul>
            </div>
         </nav>
         <br>
         
         <nav class = "navbar navbar-expand-sm bg-danger navbar-light">
            <a class = "navbar-brand" href = "#">Danger Navbar</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 = "collapse navbar-collapse" id = "navbarSupportedContent">
               <ul class = "navbar-nav">
                  <li class = "nav-item active">
                     <a class = "nav-link" href = "#">Home</a>
                  </li>
                  <li class = "nav-item">
                     <a class = "nav-link" href = "#">About Us</a>
                  </li>
                  <li class = "nav-item">
                     <a class = "nav-link" href = "#">Contact</a>
                  </li>
               </ul>
            </div>
            
         </nav>
      </div>
      
      <!-- jQuery library -->
      <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
         integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Popper -->
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
         integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Latest compiled and minified Bootstrap JavaScript -->
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
         integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

Isso produzirá o seguinte resultado -

Resultado

Barra de navegação fixa

A barra de navegação Bootstrap pode ser dinâmica em seu posicionamento. Você pode colocá-lo no topo adicionando a classe .fixed-top à classe .navbar . O exemplo a seguir demonstra isso -

Exemplo

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body style = "height:2000px">
      <div class = "container">
         <nav class = "navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
            <a class = "navbar-brand" href = "#">Fixed Top</a>
            <ul class = "navbar-nav">
               <li class = "nav-item active">
                  <a class = "nav-link" href = "#">Home</a>
               </li>
               <li class = "nav-item">
                  <a class = "nav-link" href = "#">About Us</a>
               </li>
               <li class = "nav-item">
                  <a class = "nav-link" href = "#">Contact</a>
               </li>
            </ul>
         </nav>
         <div class = "container-fluid" style = "margin-top:80px">
            <h4>This is Fixed Navigation Bar...Scroll this page to see the effect</h4>
         </div>
      </div>
      
      <!-- jQuery library -->
      <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
         integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Popper -->
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
         integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Latest compiled and minified Bootstrap JavaScript -->
      <script src =" https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
         integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin = "anonymous">
      </script>
      
   </body>
</html>

Isso produzirá o seguinte resultado -

Resultado

Barra de navegação inferior

Se você deseja que a barra de navegação seja fixada na parte inferior da página, adicione a classe .fixed-bottom à classe .navbar . O exemplo a seguir demonstra isso -

Exemplo

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body style = "height:2000px">
      <div class = "container">
         <nav class = "navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
            <a class = "navbar-brand" href = "#">Fixed Bottom</a>
            <ul class = "navbar-nav">
               <li class = "nav-item active">
                  <a class = "nav-link" href = "#">Home</a>
               </li>
               <li class = "nav-item">
                  <a class = "nav-link" href = "#">About Us</a>
               </li>
               <li class = "nav-item">
                  <a class = "nav-link" href = "#">Contact</a>
               </li>
            </ul>
         </nav>
         
         <div class = "container-fluid" style = "margin-top:80px">
            <h4>This is Bottom Fixed Navigation Bar...Scroll this page to see the effect</h4>
         </div>
      </div>
      
      <!-- jQuery library -->
      <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
         integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Popper -->
      <script src =" https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
         integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Latest compiled and minified Bootstrap JavaScript -->
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
         integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

Isso produzirá o seguinte resultado -

Resultado

Barra de navegação aderente

Você pode tornar a barra de navegação fixa no topo da página, ao rolar a página usando a classe .sticky-top que será adicionada à classe .navbar . O exemplo a seguir demonstra isso -

Exemplo

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body style = "height:2000px">
      <div class = "container-fluid">
         <div class = "container-fluid" style = "margin-top:80px">
            <h4>This is Sticky Navigation Bar...Scroll this page to see the effect</h4>
         </div>
      </div>
      
      <nav class = "navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
         <a class = "navbar-brand" href = "#">Sticky Top</a>
         <ul class = "navbar-nav">
            <li class = "nav-item active">
               <a class = "nav-link" href = "#">Home</a>
            </li>
            <li class = "nav-item">
               <a class = "nav-link" href = "#">About Us</a>
            </li>
            <li class = "nav-item">
               <a class = "nav-link" href = "#">Contact</a>
            </li>
         </ul>
      </nav>
      
      <!-- jQuery library -->
      <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
         integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Popper -->
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
         integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Latest compiled and minified Bootstrap JavaScript -->
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
         integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
         crossorigin = "anonymous">
      </script>
     
   </body>
</html>

Isso produzirá o seguinte resultado -

Resultado