Bootstrap Quiz Test Online (30 random Questions) 2025

Test your Bootstrap knowledge with this 45-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 45 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.

45 Minutes Bootstrap Quiz Test Online

Test your Bootstrap knowledge with this 45-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 component allows auto-sliding images?

A) Tooltip

B) Accordion

C) Carousel

D) Modal

2 / 30

2. What is the correct way to create a floating label for an input field in Bootstrap?

A) Use .floating-label

B) Use .float-label

C) Use .form-floating with <label>

D) Use .form-label-top

3 / 30

3. What class makes a table borderless?

A) .table-borderless

B) .table-empty

C) .no-border

D) .table-clean

4 / 30

4. Which class is used to align items vertically in the center?

A) .align-center

B) .align-items-middle

C) .align-items-center

D) .justify-center

5 / 30

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

A) .fw-bold

B) .bold-text

C) .table-bold

D) .text-bold

6 / 30

6. How do you add a Bootstrap tooltip manually with JavaScript?

A) activateTooltip(element)

B) element.enableTooltip()

C) tooltip.init(element)

D) new bootstrap.Tooltip(element)

7 / 30

7. Which class aligns text to be fully justified?

A) .justify-text

B) .text-justify

C) Bootstrap does not support justified text

D) .text-block

8 / 30

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

A) Flexbox

B) CSS Grid

C) Table layout

D) Float-based layout

9 / 30

9. Which Bootstrap 5 class is used to create a column that spans the full width?

A) .col-full

B) .col-6

C) .col-12

D) .col-auto

10 / 30

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

A) .centered-img

B) .align-middle

C) .d-block mx-auto

D) .img-center

11 / 30

11. Which command installs Bootstrap 5 using Yarn?

A) yarn get bootstrap

B) yarn bootstrap install

C) yarn add bootstrap

D) yarn download bootstrap

12 / 30

12. How do you prevent Flexbox items from wrapping to the next line?

A) .flex-no-wrap

B) .d-inline-flex

C) .flex-nowrap

D) .no-wrap

13 / 30

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

A) React.js

B) jQuery only

C) Only Bootstrap JS

D) Bootstrap JS & Popper.js

14 / 30

14. What attribute is required to enable Bootstrap tabs?

A) enable-tabs

B) data-bs-toggle="tab"

C) data-bs-tabs="true"

D) tab-activate

15 / 30

15. Which class is used to create a full-width container in Bootstrap 5?

A) .container-wide

B) .full-width-container

C) .container-fluid

D) .container-fixed

16 / 30

16. How do you center a div horizontally in Bootstrap?

A) .align-center

B) .m-center

C) .mx-auto

D) .justify-center

17 / 30

17. Which Bootstrap function is used to create responsive font sizes?

A) scale-font-size()

B) responsive-font-size()

C) rfs()

D) dynamic-font()

18 / 30

18. What attribute prevents a modal from closing when clicking outside?

A) prevent-close

B) data-bs-sticky="true"

C) data-bs-backdrop="static"

D) data-bs-modal="lock"

19 / 30

19. What method toggles a modal in React Bootstrap?

A) toggleModal()

B) setShow(true)

C) openModal()

D) showModal()

20 / 30

20. Which Bootstrap method manually hides a dropdown?

A) dropdown.hide()

B) hide.bs.dropdown

C) dropdown.close()

D) dropdown.dismiss()

21 / 30

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

A) Bootstrap 3

B) Bootstrap 4

C) Bootstrap 2

D) Bootstrap 5

22 / 30

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

A) 14px

B) 16px

C) 18px

D) 24px

23 / 30

23. How do you create a Bootstrap breadcrumb navigation?

A) .breadcrumb

B) .nav-breadcrumb

C) .nav-path

D) .bread-nav

24 / 30

24. How do you make text bold using Bootstrap utilities?

A) .text-bold

B) .fw-bold

C) .strong-text

D) .font-bold

25 / 30

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

A) .m-0 p-0

B) .padding-0 margin-0

C) .p-none m-none

D) .spacing-none

26 / 30

26. How can you make a column invisible on small screens?

A) .hide-sm

B) .col-hidden-sm

C) .d-none d-sm-block

D) .d-hide

27 / 30

27. How can you override Bootstrap’s default styles?

A) It is not possible

B) By modifying the HTML structure

C) By editing bootstrap.min.css

D) By using CSS rules in a separate stylesheet

28 / 30

28. Which class applies a red background to a table row?

A) .table-alert

B) .table-danger

C) .row-red

D) .table-error

29 / 30

29. How do you initialize a popover?

A) activatePopover()

B) new bootstrap.Popover()

C) $(‘[data-bs-toggle="popover"]’).popover()

D) popover.show()

30 / 30

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

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

B) Use .toast-auto

C) Use .toast-hide

D) Use dismiss="true"

Your score is

The average score is 0%

Rate Your Experience!

Anonymous feedback

Thank you for your feedback! We appreciate your input.

10 Minutes HTML Quiz Test Online

Docker Quiz Test Online (30 random Questions)

10 Minutes JSON Quiz Test Online

CSS Quiz Test Online (30 Questions)

JavaScript Quiz Test Online (30 Questions)

Online Quiz Test (with time limit)

Related