Bootstrap 4 Quick Start: Certification Exam

What does CSS stand for?

• Computer Style Sheets

• Cascading Style Sheets

• Creative Style Sheets

• Control Style Sheets

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.

• True

• False

What are the main differences between ID and Class

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

• 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

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

• ID's are better than Classes

What class name would you make a full width container in Bootstrap?

• .container-full

• .container-fluid

• .container-width

• .container-fw

What are the three main parts of a CSS ruleset?

• Selector {value: property}

• Selector {property: value}

• Selector {value: value}

• Property {property: property}

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.

• True

• False

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

• .col-md-3

• .col-md-4

• .col-md-7

• .col-md-12

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.

• True

• False

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

• CRC = .col > .row > .container

• GRC = .grid > .row > .col

• CRC = .container > .row > .col

• RC = .row > .col

What classes are needed to create this?

• Class="alert alert-success"

• Class="alert alert-warning"

• Class="alert alert-info"

• Class="alert alert-danger"

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

• True

• False

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

• These classes will cancel each other out

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

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

Bootstrap is a back-end web framework

• True

• False

How is the .container-fluid class different from the .container class?

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

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

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

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

• True

• False

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>

• Button Group = .btn-grp

• Button Group = .btn-group

• Button Row = .btn-row

• Button Bar = .btn-bar

In Bootstrap 4, 1rem = _____ ?

• 14px

• 15px

• 16px

• 20px

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.

• True

• False

Who created Bootstrap?

• Jacob Otto & Eric Suzanne

• Jacob Thornton & Anna Otto

• Mark Otto & Jacob Thornton

• Mark Otto & Anna Otto

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

• True

• False

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>

Which grid layout below is using Bootstrap 4 with flexbox?

For each Bootstrap 4 grid row, the  number of columns has to equal ________

What is this called?

• Nav button

• A select menu

• A dropdown

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

• Smaller screens

• Increased pixel densities with retina displays

• Ability to switch between portrait and landscape orientation

• Multi-touch gestures

• Slower data connections

• Distracted user attention (one eyeball and one thumb)

• All of the above

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

• True

• False

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>

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

• Each column will wrap the content but be auto width

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

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

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?

• Widgets

• Styles

• Components

• Rulesets

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

• .img-responsive

• .img-fluid

• .responsive

• .fluid

What Bootstrap version should you use if you need to support IE9?

• Bootstrap 2

• Bootstrap 3

• Bootstrap 4

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

• True

• False

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

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

• Automatically makes a website responsive

• Prevents browsers from scaling desktop websites on mobile

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

• Classes

• Components

• Widgets

• Code snippets

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

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

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

• Make this div 6 columns wide on JUST the sm breakpoint

In Bootstrap, content must be placed within...

• Rows

• Containers

• Columns

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

• Font Awesome

• Octicons

• Upstream version of Glyphicons

• All of the above

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>

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

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

• The .btn class should be .button

• The first two are correct

What does the .navbar-toggleable-* class do?

• This class does not exist

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

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

What was Bootstrap originally named?

• Twitter Blueprint

• Bootstrap Blueprint

• Twitter Bootstrap

• Blueprint Bootstrap Twitter

What are the two javascript library dependencies Bootstrap 4 needs to work?

• Jquery-3.1.1.js and affix.js

• Just jquery-3.1.1.js

• Jquery-3.1.1.js and tether.js

• Jquery-1.1.1.js and tether.js

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>

• .list-item

• .li

• .list-inline-item

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

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

• .center

• .center-block

• .mx-auto

• .justify-content-center

What would this class do?<p class="h1">Heading</p>

• Makes the paragraph the same STYLE as a h1 element

• Does nothing because this class is not part of Bootstrap

• Makes the paragraph the same FONT SIZE as a h1 element

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

• Linking to the CSS/JS files on GitHub

• Linking to a customized build using the Sass source files

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

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

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>

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

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

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

• Everything is as it should be

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>

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

• .float-left

• .float-xs-left

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 ________ class on the .row

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/