MCQs Of Class 2 - Bootstrap Grid System Basics

 

MCQs Of  Class 2 - Bootstrap Grid System Basics

1. What is the maximum number of columns in the Bootstrap grid system?

• A) 12
• B) 6
• C) 16
• D) 10
• Answer: A) 12
  Explanation: Bootstrap uses a 12-column grid system, allowing up to 12 columns in each row.

---

2. Which class is used to define a row in Bootstrap?

• A) .container
• B) .row
• C) .col
• D) .grid
• Answer: B) .row
  Explanation: The .row class defines a horizontal group of columns in the grid system.

---

3. How many columns will col-md-4 span on medium devices?

• A) 2
• B) 3
• C) 4
• D) 1
• Answer: B) 3
  Explanation: The col-md-4 class spans 4 out of the 12 grid spaces on medium screens, meaning it takes up 1/3 of the row.

---

4. Which class will you use to create a column that takes up half of the screen on small devices?

• A) col-sm-12
• B) col-sm-6
• C) col-lg-6
• D) col-md-12
• Answer: B) col-sm-6
  Explanation: The col-sm-6 class makes a column take up 6 out of the 12 grid spaces (50% width) on small devices.

---

5. What is the purpose of the .container class in Bootstrap?

• A) Defines the width of the grid
• B) Creates rows and columns
• C) Makes elements fluid
• D) Adds padding to elements
• Answer: A) Defines the width of the grid
  Explanation: The .container class defines a fixed-width or fluid container that holds the grid system in place.

---

6. How many grid spaces does col-lg-12 span on large devices?

• A) 6
• B) 12
• C) 3
• D) 1
• Answer: B) 12
  Explanation: col-lg-12 spans the entire row, taking up all 12 grid spaces on large devices.

---

7. Which Bootstrap class would you use for a column to take up 50% of the width on extra small devices?

• A) col-xs-6
• B) col-sm-6
• C) col-md-6
• D) col-lg-6
• Answer: A) col-xs-6
  Explanation: col-xs-6 takes up half of the available width (6 out of 12 columns) on extra small devices.

---

8. What does the .col class do in Bootstrap?

• A) Adds padding to columns
• B) Defines the column width
• C) Allows columns to adjust according to screen size
• D) Adds spacing between columns
• Answer: C) Allows columns to adjust according to screen size
  Explanation: The .col class makes columns responsive, adjusting their width depending on the screen size.

---

9. Which class is used to create columns in a row?

• A) .row
• B) .column
• C) .col
• D) .container
• Answer: C) .col
  Explanation: Columns are created by adding the .col class to elements inside a .row.

---

10. What happens when the total of columns in a row exceeds 12?

• A) The extra columns will be ignored
• B) The layout will break
• C) The page will not load
• D) The extra columns will wrap to a new row
• Answer: D) The extra columns will wrap to a new row
  Explanation: If the total exceeds 12 columns, the extra columns will be moved to the next line automatically.

---

11. Which class defines the number of grid columns on large devices (screen width ≥ 992px)?

• A) col-xs-
• B) col-md-
• C) col-lg-
• D) col-sm-
• Answer: C) col-lg-
  Explanation: The col-lg- class is used for large screens (width ≥ 992px) to define the column size.

---

12. What does col-md-6 represent in the Bootstrap grid system?

• A) A column that spans 6 columns in medium-sized screens
• B) A column that spans 12 columns on medium devices
• C) A 6px margin on medium screens
• D) A column that spans 3 columns on medium screens
• Answer: A) A column that spans 6 columns in medium-sized screens
  Explanation: col-md-6 spans 6 of the 12 available columns on medium-sized screens.

---

13. Which class should you use to create a column that is responsive and takes up half the space on small screens but full space on large screens?

• A) col-sm-6 col-lg-12
• B) col-sm-12 col-lg-6
• C) col-xs-6 col-md-12
• D) col-lg-6 col-sm-12
• Answer: A) col-sm-6 col-lg-12
  Explanation: The column will take up half the space on small screens and full space on large screens.

---

14. What class should be used to create a fixed-width container in Bootstrap?

• A) .container-fluid
• B) .container
• C) .wrapper
• D) .content
• Answer: B) .container
  Explanation: The .container class creates a fixed-width container, whereas .container-fluid is used for a full-width container.

---

15. What class do you use to ensure that your columns are responsive across all screen sizes in Bootstrap?

• A) .col
• B) .responsive
• C) .col-12
• D) .container
• Answer: A) .col
  Explanation: The .col class makes columns responsive, allowing them to adapt to various screen sizes.

---

16. Which class is used to create a full-width column in Bootstrap?

• A) col-xs-12
• B) col-sm-12
• C) col-md-12
• D) All of the above
• Answer: D) All of the above
  Explanation: All the mentioned classes create a full-width column (12 grid spaces) across various screen sizes.

---

17. How do you create a two-column layout in Bootstrap?

• A) col-sm-6
• B) col-md-6
• C) col-6
• D) All of the above
• Answer: D) All of the above
  Explanation: col-sm-6, col-md-6, and col-6 all create a two-column layout by splitting the row into two equal columns.

---

18. What is the purpose of using col-auto in the grid system?

• A) To auto-size the column based on its content
• B) To create columns that take up equal width
• C) To create full-width columns
• D) To create responsive columns for small screens
• Answer: A) To auto-size the column based on its content
  Explanation: The col-auto class automatically adjusts the column size to fit the content.

---

19. Which of the following is NOT a valid Bootstrap grid class?

• A) .col-md-12
• B) .col-xs-4
• C) .col-sm-3
• D) .col-4
• Answer: B) .col-xs-4
  Explanation: The col-xs- class was removed in Bootstrap 4 and replaced with the col- class.

---

20. How do you create a three-column layout using the Bootstrap grid system?

• A) col-md-4 col-lg-3
• B) col-sm-4 col-md-3 col-lg-4
• C) col-4 col-sm-4 col-md-4
• D) col-4 col-lg-3
• Answer: C) col-4 col-sm-4 col-md-4
  Explanation: This creates a layout with three columns, each spanning 4 grid spaces.

---

21. What is the default grid system in Bootstrap?

• A) 8-column grid system
• B) 12-column grid system
• C) 6-column grid system
• D) 16-column grid system
• Answer: B) 12-column grid system
  Explanation: Bootstrap uses a 12-column grid system by default.

---

22. How can you center content horizontally in a Bootstrap grid?

• A) Use text-center class
• B) Use mx-auto class
• C) Use justify-content-center in flexbox
• D) All of the above
• Answer: D) All of the above
  Explanation: All these classes can center content horizontally depending on the context (text, block-level element, flexbox).

---

23. What happens if you do not specify a column class in Bootstrap?

• A) The column will take up the full width of the row
• B) The layout will break
• C) The content will be hidden
• D) The content will not be aligned properly
• Answer: A) The column will take up the full width of the row
  Explanation: If no column class is specified, the column will expand to take the full width available.

---

24. What does the class col-lg-6 represent?

• A) A column that spans 6 columns on large screens
• B) A column that spans 6 columns on small screens
• C) A column that spans 12 columns on large screens
• D) A column with a 6px padding on large screens
• Answer: A) A column that spans 6 columns on large screens
  Explanation: col-lg-6 spans 6 out of the 12 grid spaces on large devices.

---

25. What does the col-md-8 class do?

• A) Creates a column that spans 8 columns on medium devices
• B) Creates a column with 8px of padding on medium devices
• C) Creates a full-width column on medium devices
• D) Creates a column that spans 8 columns on extra large devices
• Answer: A) Creates a column that spans 8 columns on medium devices
  Explanation: col-md-8 spans 8 out of the 12 available columns on medium screens.

---

These 25 MCQs cover basic concepts of the Bootstrap grid system and responsive design. Would you like me to continue writing the next set of questions to complete the 50 MCQs?

You said:

yes

ChatGPT said:

Here is the continuation with 25 more MCQs to complete the set of 50 MCQs on the Bootstrap Grid System:

---

26. What does col-lg-4 do in the Bootstrap grid system?

• A) Spans 4 columns on large screens
• B) Spans 4 columns on small screens
• C) Spans 12 columns on large screens
• D) Spans 6 columns on medium screens
• Answer: A) Spans 4 columns on large screens
  Explanation: col-lg-4 spans 4 of the 12 grid columns on large devices.

---

27. In Bootstrap, which of the following is the correct syntax to specify a row with 3 equal-width columns?

• A) <div class="row col-4 col-4 col-4"></div>
• B) <div class="row col-md-4 col-md-4 col-md-4"></div>
• C) <div class="row col-3 col-3 col-3"></div>
• D) <div class="row col-md-4 col-sm-4 col-lg-4"></div>
• Answer: B) <div class="row col-md-4 col-md-4 col-md-4"></div>
  Explanation: The correct syntax for creating 3 equal-width columns with col-md-4 (each taking up 4 columns) on medium devices is to use this pattern.

---

28. How can you specify different column sizes for different screen sizes in Bootstrap?

• A) Use classes like col-xs-, col-sm-, col-md-, and col-lg-
• B) Use media queries
• C) Use col-12
• D) Use container-fluid
• Answer: A) Use classes like col-xs-, col-sm-, col-md-, and col-lg-
  Explanation: Bootstrap allows you to define different column widths based on screen sizes using the grid classes for small, medium, large, and extra-large screens.

---

29. Which of the following classes is used to create a 6-column grid in Bootstrap?

• A) col-md-6
• B) col-6
• C) col-lg-6
• D) All of the above
• Answer: D) All of the above
  Explanation: All the classes col-md-6, col-6, and col-lg-6 create columns that span 6 of the 12 grid spaces.

---

30. What is the main difference between container and container-fluid in Bootstrap?

• A) container is a fixed-width container, while container-fluid spans the full width of the viewport
• B) container-fluid is for small devices, while container is for large devices
• C) container allows padding, while container-fluid does not
• D) There is no difference
• Answer: A) container is a fixed-width container, while container-fluid spans the full width of the viewport
  Explanation: The .container class has a fixed width, while .container-fluid takes up the entire width of the screen, providing a full-width container.

---

31. Which class would you use to create a column that spans 12 grid spaces on all screen sizes?

• A) col-12
• B) col-lg-12
• C) col-sm-12
• D) col-xs-12
• Answer: A) col-12
  Explanation: col-12 spans the full width (12 columns) on all screen sizes.

---

32. What does col-sm-4 mean in Bootstrap?

• A) A column that spans 4 columns on small devices (width ≥ 576px)
• B) A column that spans 6 columns on medium devices
• C) A column with a 4px padding
• D) A column that spans 12 columns on small devices
• Answer: A) A column that spans 4 columns on small devices (width ≥ 576px)
  Explanation: col-sm-4 spans 4 of the 12 grid columns on small devices.

---

33. How do you create columns that are always the same height in a row?

• A) Use the align-items-stretch class with flexbox
• B) Use the col-auto class
• C) Use height: 100% in CSS
• D) Set col-12 for all columns
• Answer: A) Use the align-items-stretch class with flexbox
  Explanation: The align-items-stretch class, combined with flexbox, ensures that the columns stretch to the same height within the row.

---

34. Which class is used to hide an element on all screen sizes?

• A) d-none
• B) col-hidden
• C) visibility-hidden
• D) hidden
• Answer: A) d-none
  Explanation: The d-none class hides an element across all screen sizes.

---

35. What does the col-md-offset-3 class do?

• A) Offsets a column by 3 grid spaces on medium devices
• B) Adds a 3px margin on medium devices
• C) Offsets a column by 12 grid spaces
• D) Centers a column on medium devices
• Answer: A) Offsets a column by 3 grid spaces on medium devices
  Explanation: col-md-offset-3 shifts the column by 3 grid spaces on medium screens.

---

36. What is the default behavior of columns in Bootstrap if no grid size is specified?

• A) Columns will stack on top of each other
• B) Columns will automatically adjust their width to fit content
• C) Columns will take up 100% width by default
• D) Columns will align to the left
• Answer: B) Columns will automatically adjust their width to fit content
  Explanation: Without specifying grid sizes, columns will auto-adjust based on content.

---

37. How can you make columns stack vertically on small screens?

• A) Use col-12 for each column
• B) Use col-xs-12 for each column
• C) Use d-flex class for the parent row
• D) Use col-sm-12 for each column
• Answer: B) Use col-xs-12 for each column
  Explanation: col-xs-12 ensures that the columns take up the full width (12 columns) on extra small devices, stacking them vertically.

---

38. How can you change the order of columns in a row in Bootstrap?

• A) Use the order class
• B) Use flex-order
• C) Use col-reverse
• D) Columns cannot be reordered in Bootstrap
• Answer: A) Use the order class
  Explanation: The order class can be used to change the order of columns in a row when using Flexbox.

---

39. Which of the following is the correct way to make a column take up 4 grid spaces on large screens and 6 grid spaces on medium screens?

• A) col-lg-4 col-md-6
• B) col-4 col-md-6
• C) col-lg-6 col-md-4
• D) col-md-4 col-lg-6
• Answer: A) col-lg-4 col-md-6
  Explanation: col-lg-4 makes the column take up 4 spaces on large devices, while col-md-6 makes it span 6 spaces on medium devices.

---

40. How do you create a responsive grid layout that adapts to all screen sizes in Bootstrap?

• A) Use .container-fluid with .row and .col- classes
• B) Use .container and .row only
• C) Use .row and .col-12 for each column
• D) Use .row with only .col-md- classes
• Answer: A) Use .container-fluid with .row and .col- classes
  Explanation: Using .container-fluid, .row, and .col- classes creates a flexible and responsive layout across all screen sizes.

---

41. Which of the following classes is used to hide content on medium devices and larger?

• A) d-none d-md-block
• B) d-md-none
• C) hidden-md
• D) d-md-hide
• Answer: B) d-md-none
  Explanation: d-md-none hides the content on medium and larger devices.

---

42. How do you create a grid with two columns that each take up 50% of the space on small devices?

• A) col-sm-6 col-sm-6
• B) col-6 col-6
• C) col-sm-12 col-sm-6
• D) col-12 col-6
• Answer: A) col-sm-6 col-sm-6
  Explanation: Each col-sm-6 will take up 6 of the 12 grid spaces, making the columns 50% of the width on small devices.

---

43. What is the function of the col- class in Bootstrap?

• A) It defines the width of a column in the grid system.
• B) It creates a container for columns.
• C) It applies margin to columns.
• D) It centers the columns.
• Answer: A) It defines the width of a column in the grid system.
  Explanation: The col- class is used to define how much space a column should take up in the grid system.

---

44. How can you create a column that spans the full width of a row on extra-large screens?

• A) col-xl-12
• B) col-lg-12
• C) col-md-12
• D) col-xs-12
• Answer: A) col-xl-12
  Explanation: col-xl-12 makes the column span 12 of the 12 grid spaces on extra-large devices.

---

45. How does the col-auto class behave in Bootstrap?

• A) It sizes the column to fit its content
• B) It spans all available grid spaces
• C) It behaves like col-12
• D) It sets the column to a fixed width
• Answer: A) It sizes the column to fit its content
  Explanation: col-auto sizes the column based on its content rather than taking up a set portion of the grid.

---

46. Which class would you use to create a container that takes up the full width of the viewport?

• A) container-fluid
• B) container
• C) container-viewport
• D) col-fluid
• Answer: A) container-fluid
  Explanation: container-fluid creates a full-width container that takes up the entire viewport width.

---

47. What is the default behavior of the Bootstrap grid system when there are more than 12 columns in a row?

• A) It creates multiple rows automatically
• B) It overflows horizontally
• C) It resizes the columns to fit within 12 columns
• D) It hides the extra columns
• Answer: A) It creates multiple rows automatically
  Explanation: When more than 12 columns are added, the grid system will automatically wrap to the next row.

---

48. What is the recommended class to make an element responsive?

• A) img-fluid
• B) responsive-img
• C) d-responsive
• D) col-responsive
• Answer: A) img-fluid
  Explanation: img-fluid ensures images scale responsively according to the parent container.

---

49. Which Bootstrap class would you use to hide an element on extra-large screens?

• A) d-none d-xl-block
• B) d-xl-none
• C) hidden-xl
• D) d-xl-hide
• Answer: B) d-xl-none
  Explanation: d-xl-none hides the element on extra-large screens.

---

50. How do you align columns vertically within a row in Bootstrap?

• A) Use the align-items-center class on the row
• B) Use the align-vertical class
• C) Use vertical-align CSS property
• D) Use align-middle class on columns
• Answer: A) Use the align-items-center class on the row
  Explanation: align-items-center centers the content vertically in a row using Flexbox.