Bootstrap Quiz Test Online (30 random Questions) 2025

Test your Bootstrap knowledge with this 30-minute quiz! Covering fundamental to advanced concepts, this quiz features 30 multiple-choice questions that will challenge your understanding of the Bootstrap framework, including grid systems, components, utilities, and responsive design. Perfect for interview preparation and skill enhancement.

0 votes, 0 avg

You have 30 minutes to complete the quiz. The timer will start when you click the 'Start Quiz' button. Please ensure you are ready before beginning.

Time is up! Your quiz has ended. Your responses have been submitted automatically.

30 Minutes Bootstrap Quiz Test Online

Test your Bootstrap knowledge with this 30-minute quiz! Covering fundamental to advanced concepts, this quiz features 30 multiple-choice questions that will challenge your understanding of the Bootstrap framework, including grid systems, components, utilities, and responsive design. Perfect for interview preparation and skill enhancement.

1 / 30

1. How do you highlight a specific row in a table?

A) .table-hover

B) .row-active

C) .table-active

D) .table-highlight

2 / 30

2. Which Bootstrap version introduced Flexbox as the default layout model?

A) Bootstrap 4

B) Bootstrap 5

C) Bootstrap 3

D) Bootstrap 2

3 / 30

3. What is the default grid system in Bootstrap 5 based on?

A) Float-based layout

B) CSS Grid

C) Table layout

D) Flexbox

4 / 30

4. Which of the following browsers is NOT supported in Bootstrap 5?

A) Chrome

B) Edge

C) Internet Explorer

D) Firefox

5 / 30

5. What attribute is used to enable Bootstrap tooltips?

A) data-bs-toggle="tooltip"

B) data-bs-toggle="popover"

C) data-bs-tooltip="enable"

D) tooltip-enable

6 / 30

6. Bootstrap 5 uses which JavaScript library for positioning tooltips and popovers?

A) jQuery

B) None – it uses vanilla JS

C) React

D) Popper.js

7 / 30

7. Which class is used to add space only at the bottom?

A) .mb-3

B) .margin-bottom

C) .m-bot-3

D) .bottom-margin-3

8 / 30

8. What class do you use to add a shadow to an image?

A) .shadow-img

B) .shadow

C) .img-shadow

D) .box-shadow

9 / 30

9. How do you make text automatically adjust for responsiveness?

A) .text-responsive

B) Bootstrap automatically scales text

C) .text-fluid

D) .text-adapt

10 / 30

10. How do you make an accordion using Bootstrap?

A) .toggle-list

B) .panel-group

C) .collapsible

D) .accordion

11 / 30

11. How do you remove padding and margin from an element in Bootstrap?

A) .p-none m-none

B) .padding-0 margin-0

C) .spacing-none

D) .m-0 p-0

12 / 30

12. Which Bootstrap class ensures an image is aligned in the center?

A) .d-block mx-auto

B) .align-middle

C) .img-center

D) .centered-img

13 / 30

13. What Bootstrap class is used to create justified navigation?

A) .nav-justified

B) .nav-fill

C) .justify-nav

D) .nav-align

14 / 30

14. How can you make a Bootstrap toast notification auto-dismiss?

A) Use dismiss="true"

B) Use .toast-auto

C) Use data-bs-autohide="true"

D) Use .toast-hide

15 / 30

15. Which method manually hides a popover?

A) disablePopover()

B) dismissPopover()

C) popover.hide()

D) closePopover()

16 / 30

16. Which Bootstrap component collapses sections dynamically?

A) Modal

B) Alert

C) Tooltip

D) Accordion

17 / 30

17. What is the purpose of the .col class in Bootstrap 5?

A) To create a fixed-width column

B) To define custom breakpoints

C) To automatically adjust column width

D) To add padding

18 / 30

18. What Bootstrap class is used to make an input field required?

A) .form-mandatory

B) .form-required

C) required attribute

D) .input-required

19 / 30

19. How do you change the primary color in Bootstrap 5?

A) Use JavaScript to set a new primary color

B) Override $primary in a custom SCSS file

C) Modify _colors.scss

D) Add a new .primary class in CSS

20 / 30

20. Which class adds a shadow to an element?

A) .shadow

B) .shadow-effect

C) .shadow-lg

D) .box-shadow

21 / 30

21. Which method prevents unnecessary reflows in Bootstrap layouts?

A) Using JavaScript to adjust element sizes

B) Removing all margin and padding

C) Avoiding Bootstrap classes

D) Using Flexbox instead of inline-block elements

22 / 30

22. What is the correct way to dismiss a Bootstrap alert?

A) data-bs-dismiss="alert"

B) close="alert"

C) dismiss="true"

D) remove="alert"

23 / 30

23. How do you initialize a Bootstrap modal using JavaScript?

A) new bootstrap.Modal('#myModal')

B) initialize.Modal('#myModal')

C) Modal.init('#myModal')

D) activate.Modal('#myModal')

24 / 30

24. What Bootstrap class adds borders to a table?

A) .bordered-table

B) .table-border

C) .table-bordered

D) .table-line

25 / 30

25. What Bootstrap class is used to center an image?

A) .mx-auto

B) .img-center

C) .image-align

D) .text-center

26 / 30

26. What is the role of the .navbar-toggler class?

A) Adds animations to navbar

B) Expands the navbar content

C) Changes the navbar color

D) Toggles the navigation bar in mobile view

27 / 30

27. What Bootstrap component provides dynamic sidebar functionality?

A) Popover

B) Dropdown

C) Alert

D) Offcanvas

28 / 30

28. What Bootstrap class is used to create a carousel slider?

A) .carousel

B) .slider

C) .carousel-slider

D) .image-slider

29 / 30

29. What is a common performance issue when using Bootstrap carousels?

A) They load all images at once

B) They cannot be customized

C) They do not work on mobile

D) They reduce JavaScript execution speed

30 / 30

30. Which class removes the horizontal gutters between columns?

A) .gap-0

B) .row-gutter-0

C) .no-gutter

D) .g-0

Your score is

The average score is 28%

Rate Your Experience!

Anonymous feedback

Thank you for your feedback! We appreciate your input.

JSON Quiz Test Online (30 random Questions)

10 Minutes SQL Quiz Test Online

10 Minutes CSS Quiz Test Online

10 Minutes Docker Quiz Test Online

Angular Quiz Test Online (30 random Questions)

MongoDB Quiz Test Online (30 random Questions)

Related