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. What does .p-0 do in Bootstrap?

A) Sets padding to default

B) Adds 0px padding only at the top

C) Removes padding from all sides

D) Adds 0.5rem padding

2 / 30

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

A) Float-based layout

B) Table layout

C) Flexbox

D) CSS Grid

3 / 30

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

A) remove="alert"

B) dismiss="true"

C) data-bs-dismiss="alert"

D) close="alert"

4 / 30

4. How can you change text color to blue?

A) .text-blue

B) .text-info

C) .text-primary

D) .text-color-blue

5 / 30

5. What is the default position of a tooltip?

A) Top

B) Left

C) Right

D) Bottom

6 / 30

6. Which Bootstrap class is used to create a button?

A) .btn

B) .btn-style

C) .button-control

D) .button

7 / 30

7. Which class makes an image’s edges fully rounded?

A) .rounded-circle

B) .img-rounded

C) .border-circle

D) .rounded-full

8 / 30

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

A) toast.start('#myToast')

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

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

D) toast.activate()

9 / 30

9. Which Bootstrap class is used to center a container?

A) .center-container

B) .mx-auto

C) .text-center

D) .align-center

10 / 30

10. Which Bootstrap class rounds only the top corners of an image?

A) .rounded-sm

B) .rounded-only-top

C) .top-rounded

D) .rounded-top

11 / 30

11. How do you align the table text to the left in Bootstrap?

A) .table-text-left

B) .text-left

C) .left-align

D) .align-left

12 / 30

12. How do you make an image appear as a thumbnail?

A) .img-thumbnail

B) .thumbnail-img

C) .border-img

D) .img-border

13 / 30

13. What does the .fw-light class do?

A) Increases text size

B) Italicizes text

C) Reduces text weight

D) Makes text bold

14 / 30

14. What Bootstrap class adds a help text under an input field?

A) .input-help

B) .help-text

C) .form-tooltip

D) .form-text

15 / 30

15. How can Bootstrap tables be optimized for better performance?

A) Use multiple smaller tables

B) Remove borders from tables

C) Convert tables into images

D) Use pagination instead of displaying large datasets

16 / 30

16. What is the Bootstrap class for responsive tables?

A) .responsive-table

B) .table-fixed

C) .table-auto

D) .table-responsive

17 / 30

17. How do you check the installed Bootstrap version using npm?

A) npm bootstrap --version

B) npm list bootstrap

C) npm check bootstrap

D) bootstrap -v

18 / 30

18. How do you apply different icon colors in Bootstrap?

A) .bi-{color}

B) .text-{color} classes

C) .icon-text

D) .icon-color

19 / 30

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

A) data-bs-sticky="true"

B) data-bs-modal="lock"

C) data-bs-backdrop="static"

D) prevent-close

20 / 30

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

A) Remove unused classes from bootstrap.css

B) Use Bootstrap CDN with selective loading

C) Manually delete CSS from Bootstrap files

D) Import only required SCSS components

21 / 30

21. Which Bootstrap component automatically dismisses content when clicked outside?

A) Alert

B) Tooltip

C) Button

D) Modal

22 / 30

22. Which Bootstrap class can be used to add an inline help message below an input field?

A) .input-tooltip

B) .form-text

C) .form-help

D) .help-message

23 / 30

23. Which Bootstrap class is used to create a textarea input field?

A) .text-field

B) .textarea-control

C) .form-textarea

D) .form-control

24 / 30

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

A) Expands the navbar content

B) Toggles the navigation bar in mobile view

C) Adds animations to navbar

D) Changes the navbar color

25 / 30

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

A) .dark-mode {}

B) data-theme="dark"

C) $enable-dark-mode: true;

D) @use dark-theme;

26 / 30

26. Which class is used to create a Bootstrap button group?

A) .button-cluster

B) .btn-set

C) .btn-group

D) .group-buttons

27 / 30

27. Which class is used to create a form label in Bootstrap?

A) .form-input-label

B) .form-label

C) .label-form

D) .label-control

28 / 30

28. What variable controls the default font size in Bootstrap?

A) $font-size-base

B) $primary-font-size

C) $text-size

D) $default-font

29 / 30

29. Which class adds a shadow to an element?

A) .shadow-effect

B) .box-shadow

C) .shadow

D) .shadow-lg

30 / 30

30. Which JavaScript method is used to dispose of a Bootstrap component?

A) destroy()

B) delete()

C) remove()

D) dispose()

Your score is

The average score is 40%

Rate Your Experience!

Anonymous feedback

Thank you for your feedback! We appreciate your input.

10 Minutes CSS Quiz Test Online

10 Minutes MongoDB Quiz Test Online

10 Minutes Bootstrap Quiz Test Online

Docker Quiz Test Online (30 random Questions)

10 Minutes JavaScript Quiz Test Online

JSON Quiz Test Online (30 random Questions)

Related