Bootstrap 4 Quick Start: Certification Exam

51 Questions

Settings
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

  • 26. 
    Fill in the blank with the correct .class name: Columns have horizontal padding to create the gutters between individual columns, however, you can remove the margin from rows and padding from columns with [Blank] class on the .row
  • 27. 
    What happens if your grid columns use just the .col class?<div class="container"> <div class="row"> <div class="col"> Column </div> <div class="col"> Column </div> </div> </div>
    • A. 

      Each column will be full width and expand 100% horizontally.

    • B. 

      Each column will wrap the content but be auto width

    • C. 

      Grid columns without a set breakpoint width will automatically layout with equal widths. So in this example, 50%/50%

    • D. 

      Since the Bootstrap 4 grid uses floats, each column will float left

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

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

  • 30. 
    Bootstrap is based on reusable ___________ which have base styles, sub item styles, and design variation styles.
    • A. 

      Classes

    • B. 

      Components

    • C. 

      Widgets

    • D. 

      Code snippets

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

  • 32. 
    What are the two javascript library dependencies Bootstrap 4 needs to work?
    • A. 

      Jquery-3.1.1.js and affix.js

    • B. 

      Just jquery-3.1.1.js

    • C. 

      Jquery-3.1.1.js and tether.js

    • D. 

      Jquery-1.1.1.js and tether.js

  • 33. 
    What would this class do?<p class="h1">Heading</p>
    • A. 

      Makes the paragraph the same STYLE as a h1 element

    • B. 

      Does nothing because this class is not part of Bootstrap

    • C. 

      Makes the paragraph the same FONT SIZE as a h1 element

  • 34. 
    What class would make this column centered?<div class="container"> <div class="row"> <div class="col-md-6 [class]"> Centered column </div> </div> </div>
    • A. 

      .center

    • B. 

      .center-block

    • C. 

      .mx-auto

    • D. 

      .justify-content-center

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

      14px

    • B. 

      15px

    • C. 

      16px

    • D. 

      20px

  • 36. 
    What is missing from this navbar code in order for it to work? <nav class="navbar navbar-toggleable-md navbar-inverse bg-primary"> <!-- toggle button --> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav"> <span class="navbar-toggler-icon"></span> </button> <!-- Brand --> <a class="navbar-brand" href="#">Brand</a> <!-- Navigation links --> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item"><a class="nav-link" href="#page-1">Page Link</a></li> <li class="nav-item"><a class="nav-link" href="#page-2">Page Link</a></li> </ul> </div> </nav>
    • A. 

      The .navbar-collapse div is missing data attributes to specify what needs to be toggled: data-toggle="collapse" data-target="#navbarNav"

    • B. 

      The nav element is missing data attributes to specify what needs to be toggled: data-toggle="collapse" data-target="#navbarNav"

    • C. 

      The navbar toggler is missing data attributes to specify what needs to be toggled: data-toggle="collapse" data-target="#navbarNav"

    • D. 

      Everything is as it should be

  • 37. 
    What does the .navbar-toggleable-* class do?
    • A. 

      This class does not exist

    • B. 

      It sets the breakpoint the toggle button will HIDE on the navbar

    • C. 

      It sets the breakpoint the toggle button will SHOW on the navbar

  • 38. 
    The data attribute data-ride="carousel" , is used to mark a carousel as animating starting at page load.
    • A. 

      True

    • B. 

      False

  • 39. 
    The .form-group class is the easiest way to add some structure to forms. Its only purpose is to provide margin-bottom around a label and form control pairing.
    • A. 

      True

    • B. 

      False

  • 40. 
    What is this called?
    • A. 

      Nav button

    • B. 

      A select menu

    • C. 

      A dropdown

  • 41. 
    What classes are needed to create this?
    • A. 

      Class="alert alert-success"

    • B. 

      Class="alert alert-warning"

    • C. 

      Class="alert alert-info"

    • D. 

      Class="alert alert-danger"

  • 42. 
    What is this component called and what class does it use?<div class="[class]" role="group" aria-label="Basic example"> <button type="button" class="btn btn-secondary">Left</button> <button type="button" class="btn btn-secondary">Middle</button> <button type="button" class="btn btn-secondary">Right</button> </div>
    • A. 

      Button Group = .btn-grp

    • B. 

      Button Group = .btn-group

    • C. 

      Button Row = .btn-row

    • D. 

      Button Bar = .btn-bar

  • 43. 
    The global font size was changed from 14px to 20px.
    • A. 

      True

    • B. 

      False

  • 44. 
    Since the Glyphicons have been removed from Bootstrap 4. What icon libraries would make suitable alternatives?
    • A. 

      Font Awesome

    • B. 

      Octicons

    • C. 

      Upstream version of Glyphicons

    • D. 

      All of the above

  • 45. 
    What is wrong with the classes used in this button code?<a href="#" class="btn btn-default btn-xs" role="button" aria-pressed="true">Action Link</a>
    • A. 

      .btn-default class was renamed to .btn-secondary in version 4

    • B. 

      .btn-xs class has been removed in version 4 and you can use .btn-sm instead

    • C. 

      The .btn class should be .button

    • D. 

      The first two are correct

  • 46. 
    I would like to have an inline list but the code below is not working. What required class is missing on the list items?<ul class="list-inline"> <li class="">Lorem ipsum</li> <li class="">Phasellus iaculis</li> <li class="">Nulla volutpat</li> </ul>
    • A. 

      .list-item

    • B. 

      .li

    • C. 

      .list-inline-item

    • D. 

      You actually don't need a class on the list items for it to work

  • 47. 
    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>
  • 48. 
    The code block below floats a div on the sm breakpoint and up. How would I rewrite the class if I only wanted it to float on xs? <div class="float-sm-left">Float left on viewports sized SM (small) or wider</div>
    • A. 

      There is not class combination that will work so I would need to write a custom class to get this to work.

    • B. 

      .float-left

    • C. 

      .float-xs-left

  • 49. 
    One last question, what did you think of this exam? Is there anything you would change or improve? Learn more: https://bootstrapcreative.com/shop/bootstrap-quick-start/