Bootstrap Grid System Responsive Layouts Quiz Quiz

1. Understanding Columns on Small Screens

   In Bootstrap’s grid system, which class would you use to make a column take up half the width on small screens (width ≥576px)?

   1. col-sm-6
   2. col-6
   3. col-md-6
   4. col-lg-6
   5. col-12

2. Using Offsets

   If you want a column to be offset by 3 columns on medium screens, which Bootstrap class should you use?

   1. offset-md-3
   2. off-md-3
   3. col-md-offset-3
   4. md-offset-3
   5. offset-col-md-3

3. Fluid Container

   Which class makes a container span the entire width of the viewport in Bootstrap 4 and above?

   1. container-fluid
   2. container-wide
   3. fluid-container
   4. container-full
   5. conatiner-fliud

4. Nested Grids

   How would you properly nest a row and columns within an existing column in Bootstrap’s grid system?

   1. Add a .row inside the column, then add .col classes inside that row
   2. Place .col classes directly inside the existing column
   3. Only use .container for nesting
   4. Use .offset inside the column
   5. Place .col-row inside the column

5. Responsive Column Stacking

   What happens if you use only the .col class for multiple columns inside a row?

   1. Columns are automatically sized and will stack on extra-small screens
   2. All columns will collapse to a single column on all devices
   3. The last column will fill all available space
   4. You must specify width or they won’t display
   5. Columns will overlap each other

6. Grid Breakpoints

   Which Bootstrap breakpoint class would apply styles at screens wider than or equal to 992px?

   1. col-lg-
   2. col-md-
   3. col-xl-
   4. col-sm-
   5. col-992-

7. Alignment in Rows

   To vertically align all columns in a row to the center, what Bootstrap class is used on the row?

   1. align-items-center
   2. align-self-center
   3. justify-content-center
   4. center-align-items
   5. item-align-center

8. Column Order

   If you want a column to appear first on small screens and last on larger screens, which set of classes should you use?

   1. order-sm-first order-lg-last
   2. order-last-sm order-first-lg
   3. order-xs-1 order-lg-5
   4. first-sm last-lg
   5. order-first-lg order-last-sm

9. Equal-Height Columns

   What class combination ensures columns in a row always have equal height in Bootstrap?

   1. row d-flex
   2. row-equal d-row
   3. row equal-cols
   4. d-row-flex
   5. row-eq-height

10. Auto Layout Columns

    Which of these allows columns to automatically size themselves based on their content in Bootstrap’s grid?

    1. col
    2. col-auto
    3. col-size
    4. auto-col
    5. col-fit