WorksheetsReview for Bootstrap Test
Total questions: 13
Worksheet time: 7mins
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.
Why might you decide to use a dropdown menu on your website?
To group options together in a way that makes sense
o have a simple interface without too many buttons
To save space and keep a clean website layout
All of the above
Answered
How many columns fit in a single row in the Bootstrap grid system?
It depends on the screen size.
8
4
12
Which of the following creates a responsive jumbotron on your website?
<jumbotron> <h1>This text will be in a jumbotron</h1> </jumbotron>
<div class="container"> <div class="jumbotron"> <h1>This text will be in a jumbotron</h1> </div> </div>
<div class="container"> <jumbotron> <h1>This text will be in a jumbotron</h1> </jumbotron> </div>
<div class="jumbo responsive"> <h1>This text will be in a jumbotron</h1> </div>
