Creating A Dropdown

Dropdowns are a very handy way to condense a lot of information into a very small space. starting out with a simple button, as well as an unordered list, and this will eventually become the dropdown. So the first step is to wrap both the button and the list with a DIV that has a class of dropdown. Then button and list inside. Next, add the data toggle equals dropdown attribute to the button.

Button Group

Another great component is called button groups. You can use it to create different kinds of button combinations. In order to place them into groups, you can add a div with a class of btn-groups. These become a group of unified buttons. For screen readers and usability, you need to add the role="group" as well Assigning a role to an element lets screen readers know about the expected functionality of that element. So it knows how to handle it properly. Now you should also add a label so that readers know what to say.

Nav Bars

Bootstrap navigation is one of the most complex components available in the framework. It's part of a family of elements that all share the nav class, and there are three different types of navs that you can create: including tabs, pills, and navbars. You can place any number of elements inside navbars, but in order for them to align properly, you have to wrap them in special classes. When you view a navigation component on an access breakpoint, that means a breakpoint that is smaller than 768 pixels, the navigation is going to stack up on top of one another. In those instances, it's common to display something called a Hamburger menu that expands to display the complete list. Now Bootstrap offers some classes to be able to take care of that.

Breadcrumbs And Pagination

There are a few other navigation-related components that can help you with things like creating breadcrumbs, pagers, and numeric pagination.

Dropdown Example Code

            <div class="dropdown">
              <button onclick="myFunction()" class="dropbtn">Dropdown</button>
              <div id="myDropdown" class="dropdown-content">
                <a href="#">Link 1</a>
                <a href="#">Link 2</a>
                <a href="#">Link 3</a>
              </div>
            </div>
        

Button Groups Example Code

            <div class="btn-group">
              <button type="button" class="btn btn-primary">Example</button>
              <button type="button" class="btn btn-primary">ExampleExample</button>
              <button type="button" class="btn btn-primary">Example</button>
            </div>  
        

Nav Bar Example Code

            <nav class="navbar navbar-default">
              <div class="container">
                <div class="navbar-header">
                    <button type="button" 
                            class="navbar-toggle collapsed" 
                            data-toggle="collapse" 
                            data-target="#collapsemenu"
                            aria-expanded="false">
                        <span class="sr-only">Toggle Navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                  <a href="#" class="navbar-brand">
                    Example
                  </a>
                </div>
              </div>
            </nav>
        

Breadcrumb Example Code

            <ul class="breadcrumb">
              <li><a href="#">Home</a></li>
              <li><a href="#">Pictures</a></li>
              <li><a href="#">Summer 15</a></li>
              <li>Example</li>
            </ul>
        

Pagination Example Code

            <nav>
                <ol class="pagination pagination-sm">
                    <li><a href="#" aria-label="previous">«</a></li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#" aria-label="next">»</a></li>
                </ol>
            </nav>