NEW
Font size
WorksheetsBootstrap Unit Review
Total questions: 15
Worksheet time: 8mins
Which of the following is not a Bootstrap component covered in this unit?
Glyphicons
Buttons
Emojis
Tables
All site content needs to be inside a ________ div to make the content responsive.
“row”
“jumbotron”
“column”
“container”
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.
True
False
What is the largest device that will display this row in stacked columns?
<div class=“row”>
<div class=“col-sm-6”>1</div>
<div class=“col-sm-6”>2</div>
</div>
Laptop
Desktop Computer
Smart Phone
Tablet
Which of the following does not correctly create a navigation bar?
<nav class="navbar navbar-default">
<div class="container">
</div>
</nav>
<nav class="navey-nav navbar-right">
<div class="container">
</div>
</nav>
<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.
Nav-tabs
Dropdown menus
Containers
Grids
True or False: Bootstrap example websites can be used as a starter template for your own projects.
True
False
Which of the following correctly creates a thumbnail of the CodeHS logo that links to https://codehs.com?
<a href="https://codehs.com/">
<img src="codehs_logo.jpg" alt="CodeHS Logo">
</a>
<a href="https://codehs.com/">
<img class="thumbnail" src="codehs_logo.jpg" alt="CodeHS Logo">
</a>
<a href="https://codehs.com/" class="thumbnail">
<img src="codehs_logo.jpg" alt="CodeHS Logo">
</a>
<a href="codehs_logo.jpg" class="thumbnail">
<img src="https://codehs.com/">
</a>
Which of the following creates a table that is responsive to screens of different sizes?
<div class=“response”>
</div>
<table class=“table-responsive”>
...
</table>
<div class=“table-responsive”>
<table class=“table”>
...
</table>
</div>
<div class=“table”>
<table class=“responsive”>
...
</table>
</div>
Which of the following will correctly display a page header with subtext?
<h1>
This is the header <small> This is the subtext </small>
</h1>
<div class="page-header">
<h1>
This is the header <small> This is the subtext </small>
</h1>
</div>
<div>
<h1>
This is the header <small> This is the subtext </small>
</h1>
</div>
<page-header>
<h1>
This is the header <small> This is the subtext </small>
</h1>
</page-header>
How many columns fit in a single row in the Bootstrap grid system?
4
12
8
24
True or False: It is impossible to have more than one jumbotron on a given page.
True
False
Which of the following correctly creates a jumbotron on your website?
<div class="container">
<div class="jumbotron">
<h1>This text will be in a jumbotron</h>
</div>
</div>
<jumbotron>
<h1>This text will be in a jumbotron</h1>
</jumbotron>
<div class="container">
<jumbotron>
<h1>This text will be in a jumbotron</h>
</jumbotron>
</div>
<div class="jumbotron responsive">
<h1>This text will be in a jumbotron</h1>
</div>
What is the difference between .container and .container-fluid?
.container-fluid keeps margins to the left and right of the content, while .container fills the entire width of the window.
.container-fluid is responsive to the window size, while container creates a fixed width that never changes, regardless of window size.
.container should be used in headers, while .container-fluid is used for p tags.
.container-fluid constantly updates to fit the width of the window, while .container will update occasionally as the window is resized.
