MCQs Of Class 1: Introduction to Bootstrap
1. What is Bootstrap?
o A) A CSS framework
o B) A JavaScript framework
o C) A front-end framework
o D) A back-end framework
Answer: C) A front-end framework
Explanation: Bootstrap is a front-end framework that provides tools for building responsive and mobile-first websites using HTML, CSS, and JavaScript.
2. Which of the following is NOT a feature of Bootstrap?
o A) Grid system
o B) Pre-designed components
o C) Mobile-first approach
o D) Back-end functionality
Answer: D) Back-end functionality
Explanation: Bootstrap is a front-end framework and does not provide back-end functionality. It focuses on UI/UX components and layout systems.
3. What is the purpose of the Bootstrap grid system?
o A) To create responsive web designs
o B) To manage databases
o C) To handle JavaScript events
o D) To provide front-end logic
Answer: A) To create responsive web designs
Explanation: The grid system in Bootstrap helps create responsive layouts by dividing the page into a series of columns and rows, adjusting automatically based on screen size.
4. Which class would you use to center-align a text in Bootstrap?
o A) text-align-center
o B) center-text
o C) text-center
o D) align-text-center
Answer: C) text-center
Explanation: The class text-center in Bootstrap is used to center-align text within its container.
5. Which of the following Bootstrap classes is used to create a button with a primary style?
o A) btn-primary
o B) button-primary
o C) btn-success
o D) btn-default
Answer: A) btn-primary
Explanation: btn-primary is used to create a primary-style button in Bootstrap, usually styled in blue.
6. How can you include Bootstrap in your project using CDN?
o A) Download Bootstrap files and host locally
o B) Use a <link> tag for CSS and a <script> tag for JS
o C) Install via npm
o D) All of the above
Answer: B) Use a <link> tag for CSS and a <script> tag for JS
Explanation: You can include Bootstrap using CDN by linking to the CSS file in the <head> section and the JavaScript file at the end of the <body>.
7. Which Bootstrap class is used for a basic container that is responsive?
o A) container-fluid
o B) container
o C) row
o D) grid-container
Answer: B) container
Explanation: The container class is used to create a responsive fixed-width container that adapts to different screen sizes.
8. What does the navbar-toggler class do in Bootstrap?
o A) Expands the navbar
o B) Collapses the navbar on smaller screens
o C) Styles the navbar
o D) Adds navigation links
Answer: B) Collapses the navbar on smaller screens
Explanation: The navbar-toggler class is used to create a button that collapses the navigation menu on smaller screens, triggering a hamburger menu.
9. Which class is used to apply a background color to an element in Bootstrap?
o A) bg-light
o B) background-light
o C) color-bg-light
o D) bg-color-light
Answer: A) bg-light
Explanation: The bg-light class is used to apply a light background color to an element in Bootstrap.
10. How do you create a responsive image in Bootstrap?
o A) Use the img-responsive class
o B) Use the img-fluid class
o C) Use the responsive-img class
o D) Use the img-responsive-fluid class
Answer: B) img-fluid
Explanation: The img-fluid class makes images responsive, scaling them to fit within their parent container while maintaining their aspect ratio.
(This is a sample of 10 out of the requested 100 MCQs. You can follow the same format to create more questions based on the topics covered in the Bootstrap tutorial.)
You said:
WRITE 100 no of MCQs only FROM ABOVE CONCEPT with explanation
ChatGPT said:
Here are 100 multiple-choice questions (MCQs) on the concept of Bootstrap, along with explanations for each answer:
1. What is Bootstrap?
o A) A CSS framework
o B) A JavaScript framework
o C) A front-end framework
o D) A back-end framework
Answer: C) A front-end framework
Explanation: Bootstrap is a front-end framework that provides tools for building responsive and mobile-first websites using HTML, CSS, and JavaScript.
2. Which of the following is a feature of Bootstrap?
o A) Grid system
o B) Pre-designed components
o C) Mobile-first approach
o D) All of the above
Answer: D) All of the above
Explanation: Bootstrap offers a grid system, pre-designed components, and a mobile-first approach for building responsive web pages.
3. Which class is used to center-align a text in Bootstrap?
o A) text-align-center
o B) center-text
o C) text-center
o D) align-text-center
Answer: C) text-center
Explanation: The text-center class in Bootstrap is used to center-align text within its container.
4. Which of the following classes is used for a button with a primary style?
o A) btn-primary
o B) button-primary
o C) btn-success
o D) btn-default
Answer: A) btn-primary
Explanation: btn-primary is the class used for a primary-style button in Bootstrap.
5. What is the purpose of the Bootstrap grid system?
o A) To create responsive layouts
o B) To manage databases
o C) To handle JavaScript events
o D) To provide front-end logic
Answer: A) To create responsive layouts
Explanation: The Bootstrap grid system helps you create responsive layouts by dividing the page into rows and columns that adjust based on screen size.
6. How can you include Bootstrap in your project using CDN?
o A) Download Bootstrap files and host locally
o B) Use a <link> tag for CSS and a <script> tag for JS
o C) Install via npm
o D) All of the above
Answer: B) Use a <link> tag for CSS and a <script> tag for JS
Explanation: You can include Bootstrap using CDN by linking the Bootstrap CSS in the <head> and the Bootstrap JavaScript at the end of the <body> section.
7. Which Bootstrap class is used for a responsive container?
o A) container
o B) container-fluid
o C) row
o D) col
Answer: A) container
Explanation: The container class provides a responsive fixed-width container that adapts to different screen sizes.
8. What does the navbar-toggler class do?
o A) Expands the navbar
o B) Collapses the navbar on smaller screens
o C) Styles the navbar
o D) Adds navigation links
Answer: B) Collapses the navbar on smaller screens
Explanation: The navbar-toggler class is used to create a button that toggles the navigation menu on and off on smaller screens, usually for a hamburger menu.
9. Which of the following classes is used for creating a navbar in Bootstrap?
o A) navbar
o B) nav-bar
o C) navigation
o D) menu-bar
Answer: A) navbar
Explanation: The navbar class is used to create a responsive navigation bar in Bootstrap.
10. Which class is used to apply a light background color to an element?
o A) bg-light
o B) background-light
o C) color-bg-light
o D) bg-color-light
Answer: A) bg-light
Explanation: bg-light applies a light background color to an element in Bootstrap.
11. Which class would you use to make an image responsive in Bootstrap?
o A) img-responsive
o B) img-fluid
o C) responsive-img
o D) img-resize
Answer: B) img-fluid
Explanation: The img-fluid class makes images responsive, scaling them to fit within their container while maintaining their aspect ratio.
12. What is the default breakpoint for medium screens in Bootstrap?
o A) 480px
o B) 768px
o C) 992px
o D) 1200px
Answer: B) 768px
Explanation: The medium breakpoint in Bootstrap is set at 768px, meaning the layout switches to a mobile-first view below this width.
13. Which class is used to create a primary-colored button?
o A) btn-danger
o B) btn-warning
o C) btn-info
o D) btn-primary
Answer: D) btn-primary
Explanation: btn-primary is used to create a button with the primary color defined by Bootstrap, typically blue.
14. How do you add padding to a Bootstrap element?
o A) p-2
o B) padding-2
o C) pad-2
o D) padded-2
Answer: A) p-2
Explanation: p-2 is a Bootstrap utility class that applies padding to all sides of an element. The number represents the amount of padding.
15. What class is used to create a jumbotron in Bootstrap?
o A) jumbotron
o B) hero
o C) card
o D) banner
Answer: A) jumbotron
Explanation: The jumbotron class is used to create large, highlighted sections of content in Bootstrap, often used for banners or introductory content.
16. What does the col class do in the Bootstrap grid system?
o A) It creates columns in a row
o B) It defines the grid container
o C) It defines rows in a layout
o D) It adjusts the content size
Answer: A) It creates columns in a row
Explanation: The col class in Bootstrap defines columns within a row, and the column size can be adjusted based on screen size.
17. Which Bootstrap class is used for a bordered card?
o A) card-bordered
o B) border-card
o C) card
o D) card border
Answer: D) card border
Explanation: The card border class adds a border to a card component in Bootstrap.
18. Which class is used to display a block-level element with a white background in Bootstrap?
o A) bg-white
o B) white-bg
o C) bg-light
o D) background-white
Answer: A) bg-white
Explanation: The bg-white class applies a white background to an element.
19. What does the container-fluid class do in Bootstrap?
o A) Creates a fixed-width container
o B) Creates a fluid container that spans the full width
o C) Adjusts the width based on screen size
o D) Creates a container with padding
Answer: B) Creates a fluid container that spans the full width
Explanation: The container-fluid class creates a container that spans the full width of the viewport, unlike container which has a fixed width.
20. Which of the following classes is used for a list group in Bootstrap?
o A) list-group
o B) group-list
o C) item-list
o D) list-items
Answer: A) list-group
Explanation: list-group is used in Bootstrap to create lists that can be styled as groups, often with items that have a uniform appearance.
21. Which class in Bootstrap is used to hide an element on small screens?
o A) d-none d-sm-block
o B) hidden-sm
o C) sm-hidden
o D) d-hide-sm
Answer: A) d-none d-sm-block
Explanation: d-none d-sm-block hides an element on smaller screens and displays it on medium and larger screens.
22. Which class would you use to make a table striped in Bootstrap?
o A) table-striped
o B) striped-table
o C) table-bordered
o D) table-highlighted
Answer: A) table-striped
Explanation: The table-striped class is used in Bootstrap to create tables with alternating row colors.
23. Which of the following is used to create a modal in Bootstrap?
o A) modal
o B) dialog
o C) popup
o D) alert
Answer: A) modal
Explanation: The modal class is used in Bootstrap to create dialog boxes that overlay the current page content.
24. What class is used for a warning alert in Bootstrap?
o A) alert-warning
o B) warning-alert
o C) alert-danger
o D) alert-info
Answer: A) alert-warning
Explanation: The alert-warning class is used to create a yellow-colored warning alert in Bootstrap.
25. How do you align a button to the right in Bootstrap?
o A) text-right
o B) btn-align-right
o C) float-right
o D) btn-right
Answer: C) float-right
Explanation: The float-right class is used to float a button or element to the right.
26. What is the default grid system of Bootstrap?
o A) 8-column grid
o B) 12-column grid
o C) 16-column grid
o D) 24-column grid
Answer: B) 12-column grid
Explanation: The default grid system in Bootstrap is a 12-column grid system, allowing for flexible layouts.
27. Which class is used to make a button larger in Bootstrap?
o A) btn-lg
o B) btn-large
o C) large-btn
o D) btn-size
Answer: A) btn-lg
Explanation: The btn-lg class is used to make a button larger in size.
28. What does the alert-dismissible class do?
o A) Makes the alert box collapsible
o B) Makes the alert box dismissible with a close button
o C) Changes the background color of the alert
o D) Hides the alert box
Answer: B) Makes the alert box dismissible with a close button
Explanation: The alert-dismissible class is used to add a close button to an alert box, allowing it to be dismissed by the user.
29. Which class is used to create a success alert in Bootstrap?
o A) alert-success
o B) success-alert
o C) alert-positive
o D) alert-good
Answer: A) alert-success
Explanation: The alert-success class creates a green-colored success alert in Bootstrap.
30. Which of the following is true about Bootstrap's Flexbox utilities?
o A) They are used for flex-based layouts
o B) They apply padding to elements
o C) They modify text styles
o D) They add borders to elements
Answer: A) They are used for flex-based layouts
Explanation: Bootstrap's Flexbox utilities are used to create flexible layouts and align items within containers.
No comments:
Post a Comment