Review for Bootstrap Test

Fill in the blank: All site content needs to be inside a ________ div to make the content responsive.

• “column”

• “jumbotron”

• “row”

• container

<div class=“row”> <div class=“col-sm-6”>1</div> <div class=“col-sm-6”>2</div> </div>

What is the largest device that will display this row in stacked columns?

• Tablet

• Desktop Computer

• Laptop

• Smart Phone

True or False: If you are adding your own CSS sheet, make sure your CSS file comes before the Bootstrap CSS file.

• True

• False

True or False: The number of columns in a row depends on the device that the website is being viewed on.

• False

• True

left

middle

right

Which of the following will result in this button grouping?

• <a href="#" class="btn btn-default">Left</a>

  <a href="#" class="btn btn-default">Middle</a>

  <a href="#" class="btn btn-default">Right</a>

• <div class="btn-group"> <a href="#" class="btn btn-default">Left</a>

  <a href="#" class="btn btn-default">Middle</a> <a href="#" class="btn btn-default">Right</a>

  </div>

• <div class="btn-group-vertical">

  <a href="#" class="btn btn-default">Left</a>

  <a href="#" class="btn btn-default">Middle</a>

  <a href="#" class="btn btn-default">Right</a> </div>

• <div class="btn-group btn-group-justified"

  <a href="#" class="btn btn-default">Left</a>

  <a href="#" class="btn btn-default">Middle</a>

  <a href="#" class="btn btn-default">Right</a>

Which of the following is not a Bootstrap component covered in this unit?

• Buttons

• Glyphicons

• Emojis

• Tables

Which of the following does not correctly create a navigation bar?

• <nav class="navbar navbar-default"> <div class="container"> ... </div> </nav>

• <nav class=" navbar-right"> <div class="container"> ... </div>

• <nav class="navbar navbar-inverse"> <div class="container"> ... </div> </nav>

• <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> ... </div> </nav>

Fill in the blank: ________ are a great way to pack more options into a navigation bar while keeping the interface clean and simple.

• Dropdown menus

• Nav-tabs

• Containers

• Grids

True or False: Bootstrap example websites can be used as a starter template for your own projects.

• True

• False

What is the difference between .container and .container-fluid?

• .container-fluid is non-responsive to the window size, while container resizes but the width never changes, regardless of window size.

• .container-fluid keeps margins to the left and right of the content fixed, while .container fills the entire width of the window.

• .container-fluid constantly updates to fit the width of the window, while .container updates occasionally as the window is resized.

• .container should be used in headers, while .container-fluid is used for p tags.