Bootstrap Quiz Test Online (30 random Questions) 2026

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. Which Bootstrap class ensures an image is aligned in the center?

A) .align-middle

B) .centered-img

C) .d-block mx-auto

D) .img-center

2 / 30

2. What Bootstrap component is used for navigation between pages in a web application?

A) All of the above

B) Pagination

C) Navbar

D) Breadcrumbs

3 / 30

3. What happens if Bootstrap’s CSS file is missing?

A) JavaScript components still work

B) Styles and layout break

C) Nothing happens

D) The website loads normally

4 / 30

4. Which class is used to create a tab-based navigation in Bootstrap?

A) .tab-nav

B) .tabs-group

C) .navbar-tabs

D) .nav-tabs

5 / 30

5. What must be added to enable Bootstrap tooltips in React?

A) enableTooltips();

B) import 'bootstrap/dist/js/bootstrap.bundle.min.js'

C) addBootstrapTooltips();

D) require('bootstrap-tooltips')

6 / 30

6. What is the default font size in Bootstrap 5?

A) 18px

B) 14px

C) 16px

D) 24px

7 / 30

7. Which version of Bootstrap was the first to adopt a mobile-first approach?

A) Bootstrap 1

B) Bootstrap 3

C) Bootstrap 2

D) Bootstrap 4

8 / 30

8. How do you install Bootstrap in a React project using npm?

A) npm install bootstrap

B) react-bootstrap install

C) install bootstrap --react

D) bootstrap add react

9 / 30

9. How do you center a column in Bootstrap 5?

A) .mx-auto

B) .text-center

C) .row-center

D) .col-center

10 / 30

10. Which Bootstrap class is used to align navigation items in a navbar?

A) .nav-align

B) .navbar-list

C) .navbar-items

D) .navbar-nav

11 / 30

11. Which method manually shows a tooltip?

A) showTooltip()

B) tooltip.show()

C) enableTooltip()

D) tooltip.init()

12 / 30

12. Which method manually hides a popover?

A) disablePopover()

B) dismissPopover()

C) popover.hide()

D) closePopover()

13 / 30

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

A) Firefox

B) Internet Explorer

C) Chrome

D) Edge

14 / 30

14. Which class is used to create a spinner/loading animation?

A) .progress-spinner

B) .loader

C) .loading-circle

D) .spinner-border

15 / 30

15. How do you make text in a table cell bold using Bootstrap?

A) .table-bold

B) .bold-text

C) .fw-bold

D) .text-bold

16 / 30

16. What Bootstrap class applies a light-colored header to a table?

A) .table-header-light

B) .table-light-header

C) .thead-primary

D) .thead-light

17 / 30

17. What is required for Bootstrap JavaScript components to work?

A) React.js

B) jQuery only

C) Bootstrap JS & Popper.js

D) Only Bootstrap JS

18 / 30

18. How do you align text in table cells?

A) .table-align

B) .text-left, .text-center, or .text-right

C) .cell-align

D) .align-left, .align-center, .align-right

19 / 30

19. Which Bootstrap-Vue component is used for tables?

A) <v-table>

B) <b-table>

C) <table-b>

D) <table-bootstrap>

20 / 30

20. How can you align text to the right using Bootstrap?

A) .float-end

B) .text-right

C) .align-right

D) .text-end

21 / 30

21. Which Bootstrap 5 class allows columns to have equal width?

A) .col

B) .col-equal

C) .col-auto

D) .col-full

22 / 30

22. What is the correct class to make a form input read-only?

A) .form-readonly

B) readonly attribute

C) .form-static

D) .form-disable

23 / 30

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

A) .box-shadow

B) .img-shadow

C) .shadow

D) .shadow-img

24 / 30

24. How can you trigger a Bootstrap toast manually using JavaScript?

A) toast.activate()

B) bootstrap.Toast('#myToast').show()

C) new bootstrap.Toast('#myToast').show()

D) toast.start('#myToast')

25 / 30

25. How do you enable dark mode in Bootstrap 5?

A) Bootstrap 5 does not support dark mode

B) Manually override CSS

C) Add data-theme="dark" to <html>

D) Use the .bg-dark class

26 / 30

26. How do you include only specific Bootstrap components in a project?

A) Import only required SCSS components

B) Remove unused classes from bootstrap.css

C) Use Bootstrap CDN with selective loading

D) Manually delete CSS from Bootstrap files

27 / 30

27. How do you disable a form input in Bootstrap?

A) disabled attribute

B) .form-readonly

C) .form-disable

D) .input-disabled

28 / 30

28. Which Bootstrap class is used to style input fields?

A) .input-control

B) .bootstrap-input

C) .form-control

D) .input-style

29 / 30

29. How can you make text appear in a monospace font?

A) .text-monospace

B) .monospace-font

C) .font-monospace

D) .text-code

30 / 30

30. Which Bootstrap class is used to create a pagination component?

A) .page-links

B) .paginate-list

C) .pagination

D) .nav-pagination

Your score is

The average score is 25%

Rate Your Experience!

Anonymous feedback

Thank you for your feedback! We appreciate your input.

MongoDB Quiz Test Online (30 random Questions)

JavaScript Quiz Test Online (30 random Questions)

10 Minutes MongoDB Quiz Test Online

10 Minutes Bootstrap Quiz Test Online

SQL Quiz Test Online (30 random Questions)

HTML Quiz Test Online

Related