Bootstrap 5 Grid System Quiz
Want to learn more than this quiz offers you? Have a look at my Frontend web
development courses.
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.