Bootstrap Level One

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

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="jumbotron responsive">

  <h1>This text will be in a jumbotron</h1>

  </div>

• <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>

How many columns fit in a single row in the Bootstrap grid system?

• 4

• 8

• 12

• It depends on the screen size.

<div class=“row”>

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

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

</div>

What is the smallest device that will display these columns side by side?

• Desktop Computer

• Laptop

• Tablet

• Smart Phone

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>

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/" class="thumbnail">

  <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="codehs_logo.jpg" class="thumbnail">

  <img src="https://codehs.com/" alt="CodeHS Logo">

  </a>

Which of the following creates a table that is responsive to screens of different sizes?

• <div class=“table-responsive”>

  ...

  </div>

• <table class=“table-responsive”>

  ...

  </table>

• <div class=“table-responsive”>

  <table class=“table”>

  ...

  </table>

  </div>

• <div class=“table”>

  <table class=“table-responsive”>

  ...

  </table>

  </div>