Row and column structure in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Bootstrap Grid Rows

In Bootstrap, what is the main purpose of a .row class inside a container?

A It defines the width of the container to be fixed and centered.

B It adds padding around the container to create space outside the grid.

C It creates a horizontal group of columns and clears the floats to align columns properly.

D It styles text inside columns to be bold and centered.

💡 Hint

Think about how columns are arranged horizontally in Bootstrap.

The .row class groups columns horizontally and uses negative margins to offset the padding of columns, ensuring columns align correctly without extra space.

📝 Syntax

intermediate

Correct Column Class Usage

Which option correctly creates three equal-width columns inside a Bootstrap row for medium screens and above?

Bootsrap

<div class="container">
  <div class="row">
    <!-- Columns here -->
  </div>
</div>

A <div class="col-md-4">Column 1</div><div class="col-md-4">Column 2</div><div class="col-md-4">Column 3</div>

B <div class="col-3">Column 1</div><div class="col-3">Column 2</div><div class="col-3">Column 3</div>

C <div class="col-md-3">Column 1</div><div class="col-md-3">Column 2</div><div class="col-md-3">Column 3</div>

D <div class="col-md-6">Column 1</div><div class="col-md-6">Column 2</div><div class="col-md-6">Column 3</div>

💡 Hint

Bootstrap grid columns add up to 12 units per row.

Each column should take 4 units (4 + 4 + 4 = 12) to create three equal columns on medium screens and larger.

❓ layout

advanced

Responsive Column Behavior

Given this Bootstrap code, how will the columns behave on small (sm) and large (lg) screens?

A

B

C

D

A On small screens, four columns per row; on large screens, two columns per row.

B On small screens, columns take full width; on large screens, two columns per row.

C On all screen sizes, columns stack vertically one by one.

D On small screens, two columns per row; on large screens, four columns per row.

💡 Hint

Remember Bootstrap grid uses 12 units per row and classes define column width per breakpoint.

col-sm-6 means each column takes 6 units (half width) on small screens, so two columns fit per row. col-lg-3 means each column takes 3 units (quarter width) on large screens, so four columns fit per row.

❓ selector

advanced

CSS Selector for Bootstrap Columns

Which CSS selector correctly targets all Bootstrap columns inside a row regardless of their size classes?

A .container .col

B .row > [class*='col-']

C .row .col

D .row > .col-md-4

💡 Hint

Bootstrap column classes always start with 'col-' followed by breakpoint and number.

The selector .row > [class*='col-'] selects all direct children of .row whose class attribute contains 'col-', matching all column sizes.

❓ accessibility

expert

Improving Accessibility in Bootstrap Grid

Which practice best improves keyboard navigation and screen reader clarity in a Bootstrap grid layout?

A Add <code>role="region"</code> and <code>aria-label</code> to each <code>.row</code> to describe the section purpose.

B Add <code>tabindex="-1"</code> to all columns to prevent keyboard focus.

C Use only <code>div</code> elements without roles or labels to keep code simple.

D Use inline styles to highlight columns visually without ARIA attributes.

💡 Hint

Think about how screen readers identify page sections and how keyboard users navigate.

Adding role="region" and descriptive aria-label to rows helps screen readers understand the purpose of each section and improves keyboard navigation by defining landmarks.