Lesson 2

Question 1

are created with the .alert class, followed by one of the contextual classes

Answer 1

Alert

Question 2

What are the alert classes?

Answer 2

.alert-success
.alert-info
.alert-warning
.alert-danger
.alert-primary
.alert-secondary
.alert-light
.alert-dark.

Question 3

All textual < input > and < textarea > elements with class _______ get proper form styling.

Answer 3

.form-control

Question 4

we add a __________ class to each label element to ensure correct padding.

Answer 4

.form-label

Question 5

__________ have different markup. They are wrapped around a container element with .form-check, and labels have a class of .form-check-label, while checkboxes and radio buttons use .form-check-input.

Answer 5

Checkboxes

Question 6

If you want your form elements to appear side by side, use _____ and _____

Answer 6

.row and .col

Question 7

You can change the size of .form-control inputs with .form-control-lg or .form-control-sm.

Answer 7

Form Control Size

Question 8

are used if you want to allow the user to pick from multiple options.

Answer 8

Select Menus

Question 9

To style a _______ in Bootstrap 5, add the .form-select class to the < select > element:

Answer 9

Select Menu

Question 10

Use the .form-select-lg or .form-select-sm class to change the size of the select menu:

Answer 10

Select Menu Size

Question 11

Bootstrap 5 provides different styles of buttons.

Answer 11

Bootstrap Buttons

Question 12

The button classes can be used on < a >, < button >, or < input > elements.

Answer 12

Bootstrap Buttons

Question 13

Bootstrap 5 also provides eight outline/bordered buttons.

Answer 13

Boostrap Button Outline

Question 14

Move the mouse over them to see an additional “hover” effect.

Answer 14

Boostrap Button Outline

Question 15

Use the ________ for large buttons

Answer 15

.btn-lg class

Question 16

for small buttons

Answer 16

.btn-sm class

Question 17

can be set to an active (appear pressed) or a disabled (unclickable) state.

Answer 17

Button

Question 18

The class _____ makes a button appear pressed

Answer 18

.active

Question 19

the ___________ makes a button unclickable.

Answer 19

.disabled

Question 20

Note that < a > elements do not support the _________ and must therefore use the .disabled class to make it visually appear disabled.

Answer 20

disabled attribute

Question 21

A basic Bootstrap 5 ______ has a light padding and horizontal dividers.

Answer 21

Table

Question 22

The _________ adds basic styling to a table:

Answer 22

.table class

Question 23

The _________ adds zebra-stripes to a table:

Answer 23

.table-striped class

Question 24

The __________ adds borders on all sides of the table and cells

Answer 24

.table-bordered class

Question 25

The _______ adds a hover effect (grey background color) on table rows:

Answer 25

.table-hover class

Question 26

The ________ removes borders from the table

Answer 26

.table-borderless class

Question 27

is a navigation header that is placed at the top of the page.

Answer 27

Navigation Bar

Question 28

With Bootstrap, a ________can extend or collapse, depending on the screen size.

Answer 28

Navigation Bar

Question 29

A standard _________ is created with the **.navbar class**, followed by a responsive collapsing class: **.navbar-expand-xxl | xl | lg | md | sm** (stacks the navbar vertically on xxlarge, extra large, large, medium or small screens).

Answer 29

Navigation Bar

Question 30

To add links inside the navbar, use either an _______ element (or a

) with **class="navbar-nav"**. Then add

elements with a .nav-item class followed by an **< a >** element with a **.nav-link class**

Question 31

are useful when you want to hide and show large amount of content.

Answer 31

Collapsible

Question 32

The ________ indicates a collapsible element (a **< div >** in our example); this is the content that will be shown or hidden with a click of a button.

Answer 32

.collapse class

Question 33

To control (show/hide) the ________ content, add the **data-bs-toggle="collapse"** attribute to an **< a >** or a **< button >**element. Then add the **data-bs-target="#id"** attribute to connect the button with the collapsible content **(

)**.

Answer 33

Collapsible