Responsive column classes in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What are responsive column classes in Bootstrap?

Responsive column classes in Bootstrap are special class names that let you control how many columns an element takes up on different screen sizes, making your layout adjust smoothly on phones, tablets, and desktops.

beginner

What does the class col-md-6 mean in Bootstrap?

The class col-md-6 means the element will take up 6 out of 12 columns (half the width) on medium-sized screens and larger. On smaller screens, it will stack full width by default.

intermediate

Name the Bootstrap breakpoint prefixes for responsive columns from smallest to largest.

The prefixes are: col- (extra small), col-sm- (small), col-md- (medium), col-lg- (large), col-xl- (extra large), and col-xxl- (extra extra large).

intermediate

How does Bootstrap handle column widths if you only use col without a number?

Using col without a number makes the column automatically share equal width with other col siblings in the same row, adjusting fluidly to the container size.

beginner

Why is it important to use responsive column classes in web design?

Responsive column classes help your website look good and work well on all devices by adjusting the layout automatically, improving user experience and accessibility.

What does col-sm-4 do in Bootstrap?

A Makes the column full width on all screens

B Makes the column 4 units wide on extra small screens only

C Makes the column 4 units wide on small screens and larger

D Hides the column on small screens

col-sm-4 sets the column width to 4 out of 12 on small screens (≥576px) and larger.

Which class makes a column take full width on extra small screens but half width on medium screens?

A col-12 col-md-6

B col-md-12 col-6

C col-sm-6 col-lg-12

D col-6 col-sm-12

col-12 makes full width on extra small, col-md-6 makes half width on medium and up.

If you want three equal columns on large screens but stacked on smaller, which classes would you use?

A col-md-4

B col-lg-4

C col-sm-4

D col-4

col-lg-4 sets 3 equal columns on large screens (≥992px), stacking on smaller.

What is the total number of columns in Bootstrap's grid system?

A 12

B 6

C 24

D 10

Bootstrap grid is based on 12 columns for easy division.

Which class would you use to make a column automatically share equal width with siblings?

A col-auto

B col-6

C col-12

D col

col without a number shares equal width with other col siblings.

Explain how Bootstrap's responsive column classes help create layouts that work on different screen sizes.

Think about how columns change from full width on phones to side-by-side on desktops.

Describe the difference between col-, col-sm-, and col-md- classes in Bootstrap.

Remember the smallest to medium screen sizes and how columns behave.