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
What is the purpose of the 'align-items-stretch' class in Bootstrap's flexbox grid?
Select your answer
Question 2/15
In Bootstrap 5, what is the gutter spacing between columns called?
Select your answer
Question 3/15
Which Bootstrap class would you use to make a grid column stack horizontally on extra small screens?
Select your answer
Question 4/15
When a column class in Bootstrap 5 is not declared, what happens to it in a grid layout?
Select your answer
Question 5/15
In Bootstrap 5, how would you handle responsive design changes specifically for a tablet view?
Select your answer
Question 6/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 7/15
Which breakpoint is NOT available in Bootstrap 5's responsive grid system?
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
Which Bootstrap class will help align content within a flex item to the center along the cross axis (vertically in a row)?
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
In Bootstrap 5, which class would you use to offset a column by 2 columns?
Select your answer
Question 12/15
What is the main purpose of the Bootstrap 5 flex utility classes?
Select your answer
Question 13/15
What is the utility class to hide a Bootstrap element on all screen sizes except for extra-large screens?
Select your answer
Question 14/15
Which utility class would you use to align items to the center within a Bootstrap grid container?
Select your answer
Question 15/15
What Bootstrap class do you use to change the default direction of flex items in a flex container to column?
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
What is the purpose of the 'align-items-stretch' class in Bootstrap's flexbox grid?
Available answers
'align-items-stretch' ensures that flex items grow to occupy the full height of their parent container, achieving vertical stretch.
Question 2/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 3/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which Bootstrap class would you use to make a grid column stack horizontally on extra small screens?
Available answers
The class 'col-12' ensures that a grid column will take the full width on extra small screens, exhibiting stacking behavior.
Question 4/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 5/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
In Bootstrap 5, how would you handle responsive design changes specifically for a tablet view?
Available answers
For tablet views, using 'col-md-*' classes adjusts layouts at the medium breakpoint, which commonly aligns with tablet screen sizes.
Question 6/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 7/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 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
Which Bootstrap class will help align content within a flex item to the center along the cross axis (vertically in a row)?
Available answers
The 'align-self-center' class centers flex item content along the cross axis, typically vertically aligned if default row direction is used.
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
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 12/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 13/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What is the utility class to hide a Bootstrap element on all screen sizes except for extra-large screens?
Available answers
The class 'd-none d-xl-block' will hide the element on all screen sizes except those that are extra-large, ensuring precise control over visibility.
Question 14/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 15/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.