Debug School

Akanksha
Akanksha

Posted on

Top 30 Bootstrap Interview Questions with Answers multiple choice style

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)