Bootstrap 5 Grid System Quiz

Create an account and save your quiz results

Login and save your results

OR

Question 1/15

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

Select your answer

Question 2/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

Question 3/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 4/15

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

Select your answer

Question 5/15

What is the default number of columns in the Bootstrap 5 grid system?

Select your answer

Question 6/15

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

Select your answer

Question 7/15

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

Select your answer

Question 8/15

Which utility class is used to offset columns on small screens by two columns in Bootstrap 5?

Select your answer

Question 9/15

What Bootstrap class do you use to change the default direction of flex items in a flex container to column?

Select your answer

Question 10/15

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

Select your answer

Question 11/15

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

Select your answer

Question 12/15

What class in Bootstrap 5 would you use to hide content for screen readers only and not visually?

Select your answer

Question 13/15

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

Select your answer

Question 14/15

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

Select your answer

Question 15/15

In Bootstrap 5, how would you apply a background color to a specific grid cell without affecting others?

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
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 2/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.
Question 3/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 4/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 5/15
😊 Your answer was correct 🙁 Your answer was incorrect
What is the default number of columns in the Bootstrap 5 grid system?

Available answers

Bootstrap 5 uses a 12-column grid system, allowing for flexibility and a variety of layouts by spanning columns across this grid.
Question 6/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 7/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 8/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which utility class is used to offset columns on small screens by two columns in Bootstrap 5?

Available answers

Using 'offset-sm-2', a column is moved two columns to the right, creating space on the left side for small screens.
Question 9/15
😊 Your answer was correct 🙁 Your answer was incorrect
What Bootstrap class do you use to change the default direction of flex items in a flex container to column?

Available answers

The 'flex-column' class sets the flex direction of a container to resemble a vertical stack, aligning items in a columnar fashion.
Question 10/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 11/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 12/15
😊 Your answer was correct 🙁 Your answer was incorrect
What class in Bootstrap 5 would you use to hide content for screen readers only and not visually?

Available answers

The 'sr-only' class keeps content visible to screen readers but visually hides it, ensuring accessibility without affecting the site's design.
Question 13/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 14/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 15/15
😊 Your answer was correct 🙁 Your answer was incorrect
In Bootstrap 5, how would you apply a background color to a specific grid cell without affecting others?

Available answers

Attaching a class with CSS specificity directly to the desired cell allows for individualized styling without interfering with other cells' styles.