Navbar & Navs

2.2 Basic Typography 2.3 Text Alignment & Display 2.4 Floats & Position 2.5: Colors & Background 2.6 Spacing 2.7 Sizing 2.8 Breakpoints
3.2 Buttons 3.3 Navbar 3.4 List Groups & Badges 3.5 Forms 3.6 Input Groups 3.7 Alerts & Progress 3.8 Tables & Pagination 3.9 Cards 3.10 Media Objects
4.2 Grid System 4.3 Grid Alignment 4.4 Flexbox 4.5 Auto Margins & Wrap
5.2 Carousel 5.3 Collapse 5.4 Tooltips 5.5 Popovers 5.6 Modals


SIMPLE NAVBAR

  1. nav class="navbar navbar-light bg-faded navbar-toggleable-sm"
  2. div class="container"
  3. a class="navbar-brand"
  4. ul class="navbar-nav"
  5. li class="nav-item"
  6. a class="nav-link


NAVBAR WITH RESPONSIVE TOGGLE

  1. nav class="navbar navbar-light navbar-toggleable-md bg-faded"
  2. div class="container"
  3. button class="navbar-toggler navbar-toggler-right"
  4. type="button" data-toggle="collapse"
  5. data-target="#navbarNav"
  6. span class="navbar-toggler-icon"
  7. a class="navbar-brand"
  8. div class="collapse navbar-collapse" id="navbarNav"
  9. ul class="navbar-nav"
  10. li class="nav-item"
  11. a class="nav-link"
  12. nav .container {width: 100%;}


NAVBAR WITH FORM

  1. nav class="navbar navbar-light navbar-toggleable-md bg-faded"
  2. div class="container"
  3. button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" | span class="navbar-toggler-icon"
  4. a class="navbar-brand"
  5. div class="collapse navbar-collapse" id="navbarNav
  6. ul class="navbar-nav mr-auto
  7. li class="nav-item"
  8. a class="nav-link"


NAVBAR WITH DROPDOWN

  1. nav class="navbar navbar-light navbar-toggleable-md bg-faded"
  2. div class="container"
  3. a class="navbar-brand"
  4. ul class="navbar-nav"
  5. ul class="navbar-nav"
  6. li class="nav-item"
  7. a class="nav-link"
  1. li class="nav-item dropdown"
  2. a class="nav-link dropdown-toggle" | data-toggle="dropdown"
  3. div class="dropdown-menu"
  4. a href="#" class="dropdown-item"


COLORS

  1. nav class="navbar navbar-light navbar-toggleable-md bg-primary navbar-inverse"
  2. div class="container"
  3. a class="navbar-brand"
  4. ul class="navbar-nav"
  5. li class="nav-item"
  6. a class="nav-link












NAVS


  1. ul class="nav nav-pills"
  2. li class="nav-item
  3. a class="nav-link active" href="#">Link 1
  4. li class="nav-item
  5. a class="nav-link

DEFAULT ALIGN



HORIZONTAL ALIGN

RIGHT ALIGN



VERTICAL ALIGN



FILL & JUSTIFY



WITH DROPDOWNS

  1. ul class="nav nav-fill nav-pills"
  2. li class="nav-item dropdown"
  3. a class="nav-link dropdown-toggle" | data-toggle="dropdown"
  4. div class="dropdown-menu"
  5. a href="#" class="dropdown-item"