Table color variants in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of table color variants in Bootstrap?

Table color variants help visually distinguish rows or cells by applying different background colors, improving readability and user experience.

beginner

Which Bootstrap class adds a light gray background to a table row?

The class .table-secondary adds a light gray background color to a table row or cell.

beginner

How do you apply a green background to a table row using Bootstrap?

Add the class .table-success to the <tr> element to give it a green background.

intermediate

Name three Bootstrap table color variant classes for different semantic meanings.

Three classes are: .table-primary (blue), .table-warning (yellow), and .table-danger (red).

intermediate

Can Bootstrap table color variants be applied to individual cells? How?

Yes, by adding the color variant class (like .table-info) directly to a <td> or <th> element.

Which class would you use to make a table row have a red background in Bootstrap?

A .table-success

B .table-danger

C .table-info

D .table-primary

The class .table-danger applies a red background to table rows or cells.

How do you apply a yellow background to a table row in Bootstrap?

A .table-light

B .table-secondary

C .table-warning

D .table-dark

The class .table-warning adds a yellow background color to table rows or cells.

Which Bootstrap class gives a blue background to a table row?

A .table-primary

B .table-info

C .table-danger

D .table-success

.table-primary applies a blue background color.

Can you apply Bootstrap table color variants to individual table cells?

A Yes, by adding the variant class to <td> or <th>

B No, only rows can have color variants

C Only header cells can have color variants

D Only the entire table can have one color variant

You can add color variant classes directly to <td> or <th> elements.

What is the effect of adding .table-light to a table row?

A Makes the row background green

B Makes the row background dark

C Makes the row background yellow

D Makes the row background light gray

.table-light applies a light gray background to the row.

Explain how to use Bootstrap table color variants to improve table readability.

Think about how colors can highlight or separate rows.

List and describe at least four Bootstrap table color variant classes and their typical color meanings.

Remember the semantic color meanings used in Bootstrap.