Bootstrap MCQs – Bootstrap Tables

Bootstrap Tables are an essential component in web development, and Bootstrap provides a powerful set of table classes to style and enhance them. Whether you need striped rows, hover effects, or responsive tables, Bootstrap simplifies the process. The following Multiple-choice questions (MCQs) will help you prepare for interviews and boost your Bootstrap skills.

1.) What is the default class to create a basic table in Bootstrap?

A) .table
B) .table-default
C) .bootstrap-table
D) .tb-basic

Answer: Option A

Explanation: The .table class is the core class for creating Bootstrap-styled tables.

2.) How do you add striped rows in a Bootstrap table?

A) .table-hover
B) .table-line
C) .table-striped
D) .table-rows

Answer: Option C

Explanation: The .table-striped class alternates row colors for better readability.

3.) Which class applies a red background to a table row?

A) .row-red
B) .table-danger
C) .table-alert
D) .table-error

Answer: Option B

Explanation: The .table-danger class applies a red background, indicating danger or error.

4.) What class makes a table borderless?

A) .no-border
B) .table-empty
C) .table-borderless
D) .table-clean

Answer: Option C

Explanation: The .table-borderless class removes borders from a table.

5.) Which class is used to change the table background color?

A) .table-primary
B) .table-dark
C) .table-color
D) .table-bg

Answer: Option B

Explanation: The .table-dark class applies a dark theme to the table.

6.) Which Bootstrap class applies a warning (yellow) background to a table row?

A) .table-warning
B) .table-danger
C) .table-caution
D) .table-yellow

Answer: Option A

Explanation: The .table-warning class applies a yellow background, indicating caution.

7.) What Bootstrap class adds borders to a table?

A) .table-bordered
B) .bordered-table
C) .table-line
D) .table-border

Answer: Option A

Explanation: The .table-bordered class adds borders around the table and cells.

8.) Which class would you use to apply a green background to a table row?

A) .table-green
B) .table-info
C) .table-success
D) .row-success

Answer: Option C

Explanation: The .table-success class applies a green background, indicating success.

9.) How do you align text in table cells?

A) .table-align
B) .text-left, .text-center, or .text-right
C) .align-left, .align-center, .align-right
D) .cell-align

Answer: Option B

Explanation: Bootstrap’s text alignment utilities control text position in table cells.

10.) How do you create a small table in Bootstrap?

A) .table-small
B) .table-condensed
C) .small-table
D) .table-sm

Answer: Option D

Explanation: The .table-sm class reduces the padding and spacing in a table.

Leave a Reply

Your email address will not be published. Required fields are marked *