You can test your Bootstrap 5 skills with the exercises divided into sections below. Solve the exercises by filling in the missing code. You will receive 1 point for each correct answer.

 

Containers in Bootstrap 5

Lesson 1: Add a Bootstrap class to the element to create a container with a compatible width:

Hello World!

Answer: container

Exercise 2: Add the Bootstrap class to the element to create a full-width container that spans the entire screen width:

Hello World!

Answer: container-fluid

Typography in Bootstrap 5

Exercise 1: Use Bootstrap classes to center the following text:

Hello World!

Answer: text-center

Lesson 2: Using display classes as elements

 

More prominent than a normal title (larger font size and thinner font thickness):

My Heading

 

Answer: display-1

Exercise 3: Use a Bootstrap class to capitalize the following text:

Hello World!

Answer: text-uppercase

Colors in Bootstrap 5

Lesson 1: Using contextual classes to color the text of an element.

switch to "orange":

Hello World!

Answer: text-warning

Lesson 2: Using contextual classes to set the background color of an element.

turned light gray:

Hello World!

Answer: bg-light

Images in Bootstrap 5

Lesson 1: Use a Bootstrap class to make an image a circle.

Answer: rounded-circle

Lesson 2: Use a Bootstrap class to add rounded corners to images.

Answer: rounded

Lesson 3: Using Bootstrap classes to arrange images as 'thumbnails'

Answer: img-thumbnail

Lesson 4: Using Bootstrap classes to create responsive images.

Answer: img-fluid

Tables in Bootstrap 5

Lesson 1: Add a class attribute to style the table in a basic Bootstrap table format:

John	Doe	john@example.com
Mary	Moe	mary@example.com
July	Dooley	july@example.com

Answer: class="table"

Exercise 2: Add zebra stripes to the correct positions in this table:

John	Doe	john@example.com
Mary	Moe	mary@example.com
July	Dooley	july@example.com

 

Answer:

John

Doe

Exercise 3: Add a class that adds borders to all sides of the table and cells:

John	Doe	john@example.com
Mary	Moe	mary@example.com
July	Dooley	july@example.com

Answer: table-bordered

Lesson 4: Add a class to display the mouse cursor state on the rows in the table:

John	Doe	john@example.com
Mary	Moe	mary@example.com
July	Dooley	july@example.com

Answer: table-hover

Lesson 5: Use contextual classes to add the following colors to the rows:

1. The first row is green.
2. The second row is red.
3. The last row is blue.

John	Doe	john@example.com
Mary	Moe	mary@example.com
July	Dooley	july@example.com

Answer: table-success/table-danger/table-primary (in order from top to bottom)

Alerts in Bootstrap 5

Exercise 1: Add a class 'alert' to display the result of a successful task.

 Success! 

Answer: alert alert-success

Exercise 2: Read the following code, then add the appropriate 'alert' class:

 This alert box could indicate a successful or positive action. This alert box could indicate a neutral informative change or action. This alert box could indicate a warning that might need attention. This alert box could indicate a dangerous or potentially negative action. 

 

Answer:

1. alert alert-success
2. alert alert-info
3. alert alert-warning
4. alert alert-danger

Lesson 3: Add appropriate Bootstrap classes to create closeable messages.

  Blah blah blah. 

Answer: alert-dismissible

Buttons in Bootstrap 5

Lesson 1: Add a Bootstrap class to style the button appropriately as a 'danger' button.

Danger

Answer: btn btn-danger

Exercise 2: Add a Bootstrap class to set the size of the first button to 'large' and the last button to 'small'.

Button Button

Answer:

1. btn-lg
2. btn-sm

Image in BS5

Lesson 1:

Add the Bootstrap class to the element to create a responsive, fixed-width container:

Answer: container

Lesson 2: Use a Bootstrap class to add rounded corners to images.

Answer: rounded

Lesson 3: Use a Bootstrap class to create images as thumbnails.

Answer: img-thumbnail

Lesson 4: Using Bootstrap classes to create responsive images

Answer: img-fluid

Tables in Bootstrap 5

Lesson 1: Add the `class` attribute to style a table as a basic Bootstrap table:

John	Doe	john@example.com
Mary	Moe	mary@example.com
July	Dooley	july@example.com

Answer: class="table"

Exercise 2: Add zebra stripes to the table.

John	Doe	john@example.com
Mary	Moe	mary@example.com
July	Dooley	july@example.com

Answer: table-striped

Exercise 3: Adding a class will add borders to all edges of the table and cells.

John	Doe	john@example.com
Mary	Moe	mary@example.com
July	Dooley	july@example.com

Answer: table-bordered

(To be continued)