Bootstrap 5 Grid System Quiz

Create an account and save your quiz results

Login and save your results

OR

Question 1/15

In Bootstrap 5, which class would you use to offset a column by 2 columns?

Select your answer

Question 2/15

What is the main purpose of the Bootstrap 5 flex utility classes?

Select your answer

Question 3/15

Which utility class would you use to align items to the center within a Bootstrap grid container?

Select your answer

Question 4/15

Which class makes a Bootstrap column start from column 3 and span to column 5 on a medium device or larger?

Select your answer

Question 5/15

In Bootstrap 5, what is the gutter spacing between columns called?

Select your answer

Question 6/15

Which of the following classes apply to media query breakpoints specific to large devices in Bootstrap 5?

Select your answer

Question 7/15

How many columns can a grid layout have in Bootstrap 5 for a small screen using standard classes?

Select your answer

Question 8/15

Which method is best to center a column within a row in Bootstrap 5?

Select your answer

Question 9/15

Which breakpoint is NOT available in Bootstrap 5's responsive grid system?

Select your answer

Question 10/15

Which class will make a row take full width but only apply in devices larger than the large breakpoint?

Select your answer

Question 11/15

When a column class in Bootstrap 5 is not declared, what happens to it in a grid layout?

Select your answer

Question 12/15

Which class would you use to ensure a column remains visible and takes at least a minimum width on all viewport sizes?

Select your answer

Question 13/15

How does Bootstrap determine placement of grid items when using col-* classes?

Select your answer

Question 14/15

For a Bootstrap column to occupy four columns of space on small devices but eight on larger screens, which class should you use?

Select your answer

Question 15/15

If you want an image to be responsive and scale according to the grid column size, which class should you apply?

Select your answer

Your Results

You did not answer any questions correctly.

Your Answers

Question 1/15
😊 Your answer was correct 🙁 Your answer was incorrect
In Bootstrap 5, which class would you use to offset a column by 2 columns?

Available answers

The 'offset-2' class moves a column two column spots from the left, effectively providing a margin on the left side.
Question 2/15
😊 Your answer was correct 🙁 Your answer was incorrect
What is the main purpose of the Bootstrap 5 flex utility classes?

Available answers

Flex utility classes are intended to facilitate layout designs using the flexbox model, enhancing the adaptability of grid items.
Question 3/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which utility class would you use to align items to the center within a Bootstrap grid container?

Available answers

The 'align-items-center' class aligns items vertically at the center of the designated space within a container.
Question 4/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which class makes a Bootstrap column start from column 3 and span to column 5 on a medium device or larger?

Available answers

The class 'col-md-4' means the column takes four columns worth of space, starting from the third column position on medium devices.
Question 5/15
😊 Your answer was correct 🙁 Your answer was incorrect
In Bootstrap 5, what is the gutter spacing between columns called?

Available answers

Column spacing in Bootstrap's grid system is termed 'gutter', which is the space created by padding and margin between columns.
Question 6/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which of the following classes apply to media query breakpoints specific to large devices in Bootstrap 5?

Available answers

The 'col-lg-*' class is targeted specifically at large devices, using media queries to adjust layouts as screens expand in size.
Question 7/15
😊 Your answer was correct 🙁 Your answer was incorrect
How many columns can a grid layout have in Bootstrap 5 for a small screen using standard classes?

Available answers

A small screen in Bootstrap still utilizes the 12-column layout system, granting design flexibility with the same column structure across device sizes.
Question 8/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which method is best to center a column within a row in Bootstrap 5?

Available answers

Applying 'margin: auto' to a column will horizontally center it within its parent row container given both left and right margins are set to auto.
Question 9/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which breakpoint is NOT available in Bootstrap 5's responsive grid system?

Available answers

Bootstrap 5 does not include an 'xs' breakpoint; it implicitly manages extra small devices via the base styles.
Question 10/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which class will make a row take full width but only apply in devices larger than the large breakpoint?

Available answers

The 'mx-lg-0' class, affecting the margin, ensures full-width spacing only takes effect for large or larger screens.
Question 11/15
😊 Your answer was correct 🙁 Your answer was incorrect
When a column class in Bootstrap 5 is not declared, what happens to it in a grid layout?

Available answers

Omitting column class assignments leads to equal space distribution among the columns because of the flexible and automatic layout distribution.
Question 12/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which class would you use to ensure a column remains visible and takes at least a minimum width on all viewport sizes?

Available answers

The 'col-auto' class makes a column shrink or grow as needed, keeping it responsive without occupying more space than its content needs.
Question 13/15
😊 Your answer was correct 🙁 Your answer was incorrect
How does Bootstrap determine placement of grid items when using col-* classes?

Available answers

Grid placement is primarily dictated by the 'col-*' class's numeric value, designating how many columns a grid item should span.
Question 14/15
😊 Your answer was correct 🙁 Your answer was incorrect
For a Bootstrap column to occupy four columns of space on small devices but eight on larger screens, which class should you use?

Available answers

The 'col-8 col-md-4' class allows a column to occupy eight spaces by default and switches to four spaces when the medium breakpoint is reached.
Question 15/15
😊 Your answer was correct 🙁 Your answer was incorrect
If you want an image to be responsive and scale according to the grid column size, which class should you apply?

Available answers

Applying the 'img-fluid' class ensures that an image adjusts responsively to fit the grid column in which it resides.