wayground logo

Free Printable Worksheets

Font size

S
M
L
XL
Worksheets

Bootstrap Grid

Total questions: 10

Worksheet time: 10mins

Name
Class
Date
1.

Bootstrap's grid system is built with

a)

magic

b)

boots

c)

flexbox

d)

flexgrid

2.

Bootstrap's grid has ______ columns across the page

a)

1

b)

12

c)

4

d)

8

3.

You're columns should add up to ________

a)

1 or more

b)

10 or fewer

c)

12 or more

d)

12 or fewer

4.

What are the Bootstrap classes for creating columns?

a)

.col-# .col-sm-# .col-md-# .col-lg-# .col-xl-#

b)

.#-col .sm-#-col .md-#-col .lg-#-col .xl-#-col

c)

.large .medium ,small .extrasmall

d)

.col-1 .col-2 .col-3 .col-4

5.

sm, md, lg, and xl represent ___________

a)

Size of the column

b)

Size of the device's screen

c)

Size of the row

d)

Nothing

6.

While building a Bootstrap grid we use ________

a)

spans

b)

headers

c)

divs

d)

buttons

7.

If I want multiple columns in a single horizontal line I need to wrap the columns in

a)

a row class

b)

a blanket class

c)

another column

d)

a col-lg-3 class

8.

In the following code, what does the number 4 represent?

<div class="col-md-4">

a)

the span of the column

b)

the height of the column

c)

the responsiveness

d)

how many columns are in a row

9.

To create three equal-width columns on ALL devices and screen widths, I would use the following code

<div class="row">

___<div class="col">

______Column number one

___</div>

___<div class="col">

______Column number two

___</div>

___<div class="col">

______Column number three

___</div>

</div>

a)

True

b)

False

10.

If I want my grid to have 4 columns on a large screen, which column class would I use? (remember, all columns in a row should add up to 12!)

a)

col-2

b)

col-lg-12

c)

col-sm-4

d)

col-lg-3