Bootstrap 4 Quick Start: Quiz

21 Questions | Total Attempts: 6600

SettingsSettingsSettings
Bootstrap 4 Quick Start: Quiz - Quiz

Want to test your knowledge of Bootstrap 4 and responsive design basics? In this 20 question exam, you will be tested on the features of Bootstrap 4. It covers the grid, flexbox, and how to setup a basic layout using components. In addition, you will be tested on responsive web design basics to make sure you understand how Bootstrap 4 applies these fundamentals. How well do you know Bootstrap 4? Are you up for the challenge? Want to learn more? Get my Bootstrap 4 Quick Start Book


Questions and Answers
  • 1. 
    Thank you for taking this quiz. You can learn more here https://bootstrapcreative.com/shop/bootstrap-quick-start/
  • 2. 
    What are the main differences between ID and Class
    • A. 

      Classes are for use with spans and ID's are for use with DIVs

    • B. 

      ID's are supposed to be only used once per page but Classes can be used multiple times per page, and one element can have more than one Class but should have only one ID

    • C. 

      Classes should be used only once per page, but ID's can be used as many times as you like on one page

    • D. 

      ID's are better than Classes

  • 3. 
    The Bootstrap grid system is based on how many columns?
    • A. 

      6

    • B. 

      12

    • C. 

      9

    • D. 

      14

  • 4. 
    In Bootstrap, content must be placed within...
    • A. 

      Rows

    • B. 

      Containers

    • C. 

      Columns

  • 5. 
    What class name would you make a full width container in Bootstrap?
    • A. 

      .container-full

    • B. 

      .container-fluid

    • C. 

      .container-width

    • D. 

      .container-fw

  • 6. 
    If you want to have 3 equal columns in Bootstrap, which class would you use?
    • A. 

      .col-md-3

    • B. 

      .col-md-4

    • C. 

      .col-md-7

    • D. 

      .col-md-12

  • 7. 
    What does this meta tag do?<meta name="viewport" content="width=device-width, initial-scale=1">
    • A. 

      Tells the browser to look for media queries in the CSS file

    • B. 

      Automatically makes a website responsive

    • C. 

      Prevents browsers from scaling desktop websites on mobile

  • 8. 
    A big challenge with responsive design is finding a balance between the content needs for both mobile and desktop. A desktop site has a lot of visual real estate that is often filled with carousels, videos, large parallax background images, and large blocks of text.
    • A. 

      True

    • B. 

      False

  • 9. 
    A mobile first approach considers the goals of a mobile user and presents the content to help them achieve those goals. It removes all of the fluff and filler content and presents a concise collection of content that loads fast and is easy to use.
    • A. 

      True

    • B. 

      False

  • 10. 
    What are the two main ways you can add Bootstrap to your website? Only select two options
    • A. 

      Linking to the CSS/JS files on GitHub

    • B. 

      Linking to a customized build using the Sass source files

    • C. 

      Adding the CSS styles in a style tag in the head of the document

    • D. 

      Linking to a precompiled CSS/JS versions via CDN or locally

  • 11. 
    Each class name begins with a prefix. Class name prefixing makes Bootstrap code more durable and easier to maintain, but it also better enables us to scope styles to only the relevant elements. What is another name for these elements or group of elements?
    • A. 

      Widgets

    • B. 

      Styles

    • C. 

      Components

    • D. 

      Rulesets

  • 12. 
    What Bootstrap version should you use if you need to support IE9?
    • A. 

      Bootstrap 2

    • B. 

      Bootstrap 3

    • C. 

      Bootstrap 4

  • 13. 
    Flexbox is NOT a core CSS technology but a custom named component created by Bootstrap.
    • A. 

      True

    • B. 

      False

  • 14. 
    What are the three main elements of the Bootstrap grid listed in the proper order.
    • A. 

      CRC = .col > .row > .container

    • B. 

      GRC = .grid > .row > .col

    • C. 

      CRC = .container > .row > .col

    • D. 

      RC = .row > .col

  • 15. 
    Fill in the blank: Setting a grid tier of .col-sm-6 says ___________
    • A. 

      Make this div 6 columns wide on the sm breakpoint and everything ABOVE

    • B. 

      Make this div 6 columns wide on the sm breakpoint and everything BELOW

    • C. 

      Make this div 6 columns wide on JUST the sm breakpoint

  • 16. 
    Cards replace panels, thumbnails, and wells used in Bootstrap 3 and are essentially a contained group of content with a border and inner padding.
    • A. 

      True

    • B. 

      False

  • 17. 
    What class name would I add to this image tag in order to make it responsive?<img src="image.png" alt="image" class="" />
    • A. 

      .img-responsive

    • B. 

      .img-fluid

    • C. 

      .responsive

    • D. 

      .fluid

  • 18. 
    What do these spacing utility classes do to this headline?<h1 class="p-0 p-md-4 p-lg-0">Headline</h1> 
    • A. 

      These classes will cancel each other out

    • B. 

      Since p-0 is first it will override all of the other classes. So the heading will have 0 padding on all breakpoints.

    • C. 

      0 padding on all breakpoints, 4 padding value on md breakpoint, then stop the padding from flowing to lg and xl

  • 19. 
    In Bootstrap 4, 1rem = _____ ?
    • A. 

      14px

    • B. 

      15px

    • C. 

      16px

    • D. 

      20px

  • 20. 
    What class name would replace the asterisks in the code block below?<div class="*"> <img class="*-img-top" src="" alt="image"> <div class="*-block"> <h4 class="*-title">Card title</h4> <p class="*-text">Copy</p> <a href="#" class="btn btn-primary">Link</a> </div> </div>
Related Topics
Back to Top Back to top