1. What is Bootstrap?
a) A type of footwear
b) A front-end framework
c) A programming language
d) A database system
Answer: b) A front-end framework
2. Which version of Bootstrap introduced the Flexbox-based grid system?
a) Bootstrap 3
b) Bootstrap 4
c) Bootstrap 5
d) Bootstrap 6
Answer: c) Bootstrap 5
3. What is the primary programming language used in Bootstrap?
a) Java
b) Python
c) JavaScript
d) PHP
Answer: c) JavaScript
4. What is the purpose of the Bootstrap grid system?
a) Creating server-side logic
b) Defining color schemes
c) Structuring and arranging content
d) Managing server databases
Answer: c) Structuring and arranging content
5. Which CSS preprocessor is commonly used with Bootstrap?
a) Sass
b) Less
c) Stylus
d) CSS-in-JS
Answer: b) Less
6. In Bootstrap, what class is used to create a responsive navigation bar?
a) .navbar-static
b) .navbar-collapse
c) .navbar-header
d) .navbar
Answer: d) .navbar
7. Which class is used to create a responsive, two-level navigation bar in Bootstrap?
a) .navbar-expand
b) .navbar-toggle
c) .navbar-nav
d) .dropdown
Answer: d) .dropdown
8. What utility class is used to hide an element visually but keep it accessible to screen readers in Bootstrap?
a) .d-none
b) .invisible
c) .sr-only
d) .hidden-xs
Answer: c) .sr-only
9. In Bootstrap, which class is used to create a basic container with fixed-width content?
a) .container-fluid
b) .container-fixed
c) .container
d) .container-basic
Answer: c) .container
10. How do you create a responsive, full-width container in Bootstrap?
a) Add the class .container-full
b) Add the class .container-fluid
c) Use CSS to set width to 100%
d) Use the .container-responsive class
Answer: b) Add the class .container-fluid
11. Which class is used to create a button group in Bootstrap?
a) .btn-group
b) .button-group
c) .btn-toolbar
d) .button-toolbar
Answer: a) .btn-group
12. What class is used to create a responsive, horizontal list of menu items in Bootstrap?
a) .nav
b) .list-group
c) .navbar
d) .menu-list
Answer: a) .nav
13. In Bootstrap, what class is used to create a card component with a title, content, and footer?
a) .panel
b) .card
c) .box
d) .container
Answer: b) .card
14. What is the purpose of the "carousel" component in Bootstrap?
a) Creating forms
b) Displaying images or content in a rotating fashion
c) Styling navigation bars
d) Managing database connections
Answer: b) Displaying images or content in a rotating fashion
15. Which class is used to create a responsive table in Bootstrap?
a) .table-responsive
b) .responsive-table
c) .table-fluid
d) .table-responsive-sm
Answer: a) .table-responsive
16. How can you add a tooltip to an element in Bootstrap?
a) Use the .tooltip class
b) Use the data-toggle attribute
c) Apply the .popover class
d) Insert a tag
Answer: b) Use the data-toggle attribute
17. Which class is used to create a pagination component in Bootstrap?
a) .pagination
b) .pager
c) .page
d) .paging
Answer: a) .pagination
18. In Bootstrap, what class is used to create a modal dialog?
a) .modal-dialog
b) .dialog-box
c) .popup-modal
d) .modal-popup
Answer: a) .modal-dialog
19. What class is used to create a progress bar in Bootstrap?
a) .progress-bar
b) .loading-bar
c) .status-bar
d) .progress
Answer: a) .progress-bar
20. Which class is used to align text to the right within a Bootstrap element?
a) .text-left
b) .text-center
c) .text-right
d) .text-justify
Answer: c) .text-right
21. How can you make an image responsive in Bootstrap?
a) Set the max-width to 100%
b) Add the .img-responsive class
c) Use the data-image attribute
d) Apply the .image-fluid class
Answer: a) Set the max-width to 100%
22. What class is used to create a close button for dismissing alerts in Bootstrap?
a) .close-button
b) .dismiss
c) .alert-close
d) .close
Answer: d) .close
23. Which class is used to add spacing between columns in a Bootstrap grid?
a) .column-gap
b) .col-gap
c) .col-margin
d) .col
Answer: b) .col-gap
24. What is the purpose of the "navbar-toggle" button in Bootstrap?
a) To toggle the visibility of the footer
b) To toggle the visibility of the navigation menu on small screens
c) To toggle the background color of the header
d) To toggle the visibility of a modal dialog
Answer: b) To toggle the visibility of the navigation menu on small screens
25. Which class is used to add a jumbotron-style container in Bootstrap?
a) .jumbotron
b) .header
c) .hero
d) .container-jumbo
Answer: a) .jumbotron
26. In Bootstrap, what class is used to create a responsive form layout?
a) .form-responsive
b) .form-horizontal
c) .form-flex
d) .form-layout
Answer: b) .form-horizontal
27. How can you create a responsive image gallery in Bootstrap?
a) Use the .image-gallery class
b) Apply the .gallery component
c) Use the .carousel component
d) Create a custom CSS for the gallery
Answer: c) Use the .carousel component
28. Which class is used to create a badge in Bootstrap?
a) .badge
b) .label
c) .tag
d) .notification
Answer: a) .badge
29. What is the purpose of the "media" object in Bootstrap?
a) To control media player settings
b) To apply media queries to styles
c) To display images and videos
d) To manage social media links
Answer: c) To display images and videos
30. In Bootstrap, what class is used to create a list group?
a) .list-group
b) .group-list
c) .list-item
d) .item-list
Answer: a) .list-group
Top comments (0)