Bootstrap 4 Quick Start: Certification Exam

51 Questions | Total Attempts: 131

SettingsSettingsSettings
Please wait...
Bootstrap 4 Quick Start: Certification Exam

Want to test your knowledge of Bootstrap 4 and responsive design basics? In this 50 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? Learn more about Bootstrap: https://bootstrapcreative. Com/shop/bootstrap-quick-start/


Related Topics
Questions and Answers
  • 1. 
    The Bootstrap grid system is based on how many columns?
    • A. 

      6

    • B. 

      12

    • C. 

      9

    • D. 

      14

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

      Rows

    • B. 

      Containers

    • C. 

      Columns

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

      .container-full

    • B. 

      .container-fluid

    • C. 

      .container-width

    • D. 

      .container-fw

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

  • 5. 
    What was Bootstrap originally named?
    • A. 

      Twitter Blueprint

    • B. 

      Bootstrap Blueprint

    • C. 

      Twitter Bootstrap

    • D. 

      Blueprint Bootstrap Twitter

  • 6. 
    Who created Bootstrap?
    • A. 

      Jacob Otto & Eric Suzanne

    • B. 

      Jacob Thornton & Anna Otto

    • C. 

      Mark Otto & Jacob Thornton

    • D. 

      Mark Otto & Anna Otto

  • 7. 
    Bootstrap is a back-end web framework
    • A. 

      True

    • B. 

      False

  • 8. 
    What does CSS stand for?
    • A. 

      Computer Style Sheets

    • B. 

      Cascading Style Sheets

    • C. 

      Creative Style Sheets

    • D. 

      Control Style Sheets

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

  • 10. 
    What are the three main parts of a CSS ruleset?
    • A. 

      Selector {value: property}

    • B. 

      Selector {property: value}

    • C. 

      Selector {value: value}

    • D. 

      Property {property: property}

  • 11. 
    Which of the following constraints do web designers and developers have to work with in responsive design?
    • A. 

      Smaller screens

    • B. 

      Increased pixel densities with retina displays

    • C. 

      Ability to switch between portrait and landscape orientation

    • D. 

      Multi-touch gestures

    • E. 

      Slower data connections

    • F. 

      Distracted user attention (one eyeball and one thumb)

    • G. 

      All of the above

  • 12. 
    In Adaptive Design, you build multiple versions of a website and use server side detection to then present custom code for that device or viewport size. Often having another domain just for your mobile experience like, m.domain.com
    • A. 

      True

    • B. 

      False

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

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

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

  • 16. 
    The initial intent of Bootstrap was to be a living style guide documentation for a team of Twitter developers to code in the same way following a set of pre-defined rules and components.
    • A. 

      True

    • B. 

      False

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

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

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

      Bootstrap 2

    • B. 

      Bootstrap 3

    • C. 

      Bootstrap 4

  • 20. 
    Which grid layout below is using Bootstrap 4 with flexbox?
    • A. 
    • B. 
  • 21. 
    Flexbox is NOT a core CSS technology but a custom named component created by Bootstrap.
    • A. 

      True

    • B. 

      False

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

  • 23. 
    How is the .container-fluid class different from the .container class?
    • A. 

      The .container-fluid class makes the container expand the full width of the browser

    • B. 

      The .container-fluid class clears all floats and starts a new row

    • C. 

      The .container-fluid class removes all horizontal padding so it touches the left and right edge of the browser window

  • 24. 
    For each Bootstrap 4 grid row, the  number of columns has to equal [Blank]
  • 25. 
    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