Column sizing (col-1 through col-12) in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Bootstrap column sizing

In Bootstrap's grid system, what does the class col-6 mean for a column inside a row?

A The column takes up half the width of the row (6 out of 12 parts).

B The column takes up 6 pixels width.

C The column is hidden on screens smaller than 6 inches.

D The column takes up 6% of the row width.

💡 Hint

Bootstrap grid divides the row into 12 equal parts.

In Bootstrap, the grid system divides the row into 12 equal parts. The class col-6 means the column uses 6 of those 12 parts, so half the row width.

📝 Syntax

intermediate

Which Bootstrap class creates a column that is one quarter width?

You want a column that takes exactly 1/4 of the row width. Which class should you use?

A col-6

B col-4

C col-3

D col-9

💡 Hint

Remember the grid is divided into 12 parts.

Since 12 divided by 4 is 3, col-3 means the column takes 3 out of 12 parts, which is one quarter of the row.

❓ rendering

advanced

Visual layout with mixed column sizes

Given this HTML snippet, what will be the visual width distribution of the columns inside the row?

<div class="row">
  <div class="col-4">A</div>
  <div class="col-8">B</div>
</div>

A Column A takes 1/3 width, Column B takes 2/3 width.

B Column A takes 4% width, Column B takes 8% width.

C Both columns take equal width.

D Column A takes 4/12 width, Column B takes 8/12 width.

💡 Hint

Bootstrap columns add up to 12 parts per row.

The col-4 class means 4 parts out of 12, and col-8 means 8 parts out of 12. So column A is 4/12 and column B is 8/12 of the row width.

❓ selector

advanced

Selecting columns with specific width in CSS

You want to write a CSS rule that targets only Bootstrap columns that take exactly 3 parts of the grid (col-3). Which selector is correct?

A .col-3

B [class^="col-"]

C .col-3, .col-6

D .col-3 > *

💡 Hint

Bootstrap column classes are named col-1, col-2, ..., col-12.

The class .col-3 targets exactly the columns with class col-3. The other selectors are either too broad or incorrect.

❓ accessibility

expert

Ensuring accessible layout with Bootstrap columns

When using Bootstrap column classes like col-1 through col-12, what is the best practice to ensure screen readers understand the layout order correctly?

A Add aria-hidden="true" to all columns except the first.

B Use semantic HTML elements and avoid changing visual order with CSS only.

C Use tabindex="-1" on columns to skip them in keyboard navigation.

D Use inline styles to reorder columns visually without changing HTML order.

💡 Hint

Screen readers read content in the order it appears in the HTML.

Using semantic HTML and keeping the logical order in the markup ensures screen readers read content in the correct sequence. Visual reordering with CSS can confuse assistive technologies.