WorksheetsBootstrap Recap
Total questions: 8
Worksheet time: 4mins
What is the correct way to add a default-styled button to an <a> tag?
<a href="#" class="btn btn-default">Button</a>
<a href="#" class="btn-default">Button</a>
<a href="#" class="btn default">Button</a>
<a href="#" class="btn">Button</a>
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>
<h1>
This is the header <small> This is the subtext </small>
</h1>
</div>
<div class="page-header">
<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>
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-fluid constantly updates to fit the width of the window, while .container will update occasionally as the window is resized
.container should be used in headers, while .container-fluid is used for p tags
True or False: If you use Bootstrap’s framework for your site, you can’t add your own CSS rules.
True
False
How many columns fit in a single row in the Bootstrap grid system?
3
5
12
6
What is the smallest device that will display these columns side by side?
Desktop
Tablet
Laptop
Smart Phone
True or False: It is impossible to have more than one jumbotron on a given page
True
False
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">
<jumbotron>
<h1>This text will be in a jumbotron</h>
</jumbotron>
</div>
<div class="container">
<div class="jumbotron">
<h1>This text will be in a jumbotron</h>
</div>
</div>
<div class="jumbotron responsive">
<h1>This text will be in a jumbotron</h1>
</div>
