• 12 hours
  • Medium

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 9/3/20

Check Your Understanding of Bootstrap UI Components

Log in or subscribe for free to enjoy all this course has to offer!

Evaluated skills

  • Use Bootstrap UI components for displaying content
  • Question 1

    If you want the Bootstrap navbar to collapse for small and extra-small screens, and expand for all other screens, which of these classes would you have to add to the  <nav>  element?

    • navbar-expand

    • navbar-expand-sm

    • navbar-expand-md

    • navbar-expand-lg

       

  • Question 2

    The  .navbar-light  and  .navbar-dark  classes:

    • Adjusts the color of the background of the navbar component.

    • Adjusts the color of elements in the navbar component.

    • Adjusts the color of the background and the element of the navbar component. 

  • Question 3

    Which of the following will create a responsive navbar that is expanded on viewports with the size of the large breakpoint or wider and collapsed in all other viewport widths?

    • <nav class="navbar navbar-expand-lg">
      <a class="navbar-brand" href="#">Site Name</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent">
      <span class="navbar-toggler-icon"></span>
      </button>
      <div id="navbarContent" class="collapse navbar-collapse">
      ... nav items ...
      </div>
      </nav>
    • <nav class="navbar navbar-expand">
      <a class="navbar-brand" href="#">Site Name</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent">
      <span class="navbar-toggler-icon"></span>
      </button>
      <div id="navbarContent" class="collapse navbar-collapse">
      ... nav items ...
      </div>
      </nav>
    • <nav class="navbar navbar-expand-lg">
      <a class="navbar-brand" href="#">Site Name</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse">
      <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse">
      ... nav items ...
      </div>
      </nav>
    • <nav class="navbar navbar-expand-lg">
      <a class="navbar-brand" href="#">Site Name</a>
      <button class="navbar-toggler" type="button" data-target="#navbarContent">
      <span class="navbar-toggler-icon"></span>
      </button>
      <div id="navbarContent">
      ... nav items ...
      </div>
      </nav>