Bootstrap MCQs – Grid System

The Bootstrap 5 Grid System is a powerful layout mechanism that enables developers to create responsive, flexible, and mobile-friendly web pages. It is based on a 12-column layout with different breakpoints to support various screen sizes, ensuring a seamless user experience across all devices.

Mastering the Bootstrap Grid System is crucial for technical interviews, as it forms the foundation of modern web design. These top multiple-choice questions (MCQs) will help you prepare for interviews by covering essential topics like grid classes, breakpoints, column sizing, gutters, nesting, alignment, and responsiveness.

1.) What is the default column count in Bootstrap 5’s grid system?

A) 6
B) 10
C) 12
D) 16

Answer: Option C

Explanation: Bootstrap 5’s grid system is based on a 12-column layout, allowing flexible and responsive designs.

2.) Which Bootstrap 5 class makes a container responsive based on screen size?

A) .container-responsive
B) .container
C) .container-fluid
D) .container-full

Answer: Option B

Explanation: The .container class provides a fixed-width layout that adapts to screen sizes using breakpoints.

3.) What is the smallest grid breakpoint in Bootstrap 5?

A) xs
B) sm
C) md
D) lg

Answer: Option A

Explanation: The xs breakpoint is used for extra-small screens (<576px).

4.) What does the .g-4 class do?

A) Adds 4px margin
B) Sets 4px column width
C) Adds 4px padding (gutter) between columns
D) Sets a 4-column layout

Answer: Option C

Explanation: The .g-* classes define gutter spacing between columns.

5.) Which class is used to define a Bootstrap row?

A) .column
B) .grid
C) .row
D) .container-row

Answer: Option C

Explanation: The .row class is used to group columns inside a Bootstrap grid system.

6.) Which Bootstrap 5 class is used to create a column that spans the full width?

A) .col-12
B) .col-6
C) .col-auto
D) .col-full

Answer: Option A

Explanation: .col-12 makes a column span all 12 grid columns, taking the full width.

7.) What is the purpose of the .col class in Bootstrap 5?

A) To create a fixed-width column
B) To automatically adjust column width
C) To define custom breakpoints
D) To add padding

Answer: Option B

Explanation: The .col class allows a column to adjust dynamically based on available space.

8.) Which class ensures a column spans 6 grid columns on medium devices and full-width on smaller screens?

A) .col-6-md
B) .col-md-6
C) .col-xs-12 .col-md-6
D) .col-sm-12 .col-md-6

Answer: Option D

Explanation: .col-sm-12 makes the column full-width on small screens, and .col-md-6 limits it to 6 columns on medium screens.

9.) How do you center a column in Bootstrap 5?

A) .text-center
B) .mx-auto
C) .col-center
D) .row-center

Answer: Option B

Explanation: The .mx-auto class centers a column horizontally within its row.

10.) Which class removes the horizontal gutters between columns?

A) .no-gutter
B) .row-gutter-0
C) .g-0
D) .gap-0

Answer: Option C

Explanation: .g-0 removes gaps between columns, creating a seamless layout.

Leave a Reply

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