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 of the following is NOT a valid Bootstrap breakpoint?

A) sm

B) md

C) xxs

D) xl

2 / 30

2. What class is used to make a full-width container in Bootstrap?

A) .container-fluid

B) .fluid-box

C) .full-container

D) .container-wide

3 / 30

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

A) .p-none m-none

B) .spacing-none

C) .padding-0 margin-0

D) .m-0 p-0

4 / 30

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

A) .centered-img

B) .align-middle

C) .img-center

D) .d-block mx-auto

5 / 30

5. How does Bootstrap handle performance in dark mode?

A) Dark mode does not affect performance significantly

B) Requires extra JavaScript processing

C) Reduces HTML file size

D) Uses less CSS

6 / 30

6. What class is used to add spacing between navbar items?

A) .p-2

B) .mb-3

C) .nav-space

D) .me-2

7 / 30

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

A) npm list bootstrap

B) bootstrap -v

C) npm check bootstrap

D) npm bootstrap --version

8 / 30

8. What does .p-0 do in Bootstrap?

A) Adds 0.5rem padding

B) Sets padding to default

C) Removes padding from all sides

D) Adds 0px padding only at the top

9 / 30

9. How do you create a Bootstrap breadcrumb navigation?

A) .bread-nav

B) .breadcrumb

C) .nav-breadcrumb

D) .nav-path

10 / 30

10. What does the "defer" attribute do when loading Bootstrap JavaScript?

A) Prevents the script from loading

B) Removes unused JavaScript

C) Loads the script after the page has fully loaded

D) Ensures the script executes immediately

11 / 30

11. Which SASS variable controls the default Bootstrap border radius?

A) $corner-radius

B) $radius-base

C) $border-radius

D) $border

12 / 30

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

A) .shadow

B) .shadow-img

C) .img-shadow

D) .box-shadow

13 / 30

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

A) Pagination

B) Breadcrumbs

C) Navbar

D) All of the above

14 / 30

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

A) Manually override CSS

B) Bootstrap 5 does not support dark mode

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

D) Use the .bg-dark class

15 / 30

15. How do you create a circular image in Bootstrap?

A) .rounded-circle

B) .img-circle

C) .circle-img

D) .img-rounded

16 / 30

16. How do you evenly distribute items along the main axis?

A) .justify-content-center

B) .justify-content-evenly

C) .align-items-evenly

D) .align-content-around

17 / 30

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

A) Bootstrap 2

B) Bootstrap 4

C) Bootstrap 1

D) Bootstrap 3

18 / 30

18. Which command installs Bootstrap 5 using npm?

A) npm download bootstrap

B) npm add bootstrap

C) npm get bootstrap

D) npm install bootstrap

19 / 30

19. Which Bootstrap class is used to create a file upload input field?

A) .file-control

B) .form-control with type="file"

C) .form-file

D) .form-upload

20 / 30

20. Which directive is used for Bootstrap tooltips in Angular?

A) tooltip

B) bs-tooltip

C) ngTooltip

D) data-bs-toggle="tooltip"

21 / 30

21. What happens when you use .text-nowrap in Bootstrap?

A) Forces text to wrap

B) Increases font weight

C) Prevents text from wrapping

D) Changes text to uppercase

22 / 30

22. Which directive is used for Bootstrap dropdowns in Vue?

A) v-dropdown

B) b-dropdown

C) v-b-dropdown

D) vue-dropdown

23 / 30

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

A) <v-table>

B) <b-table>

C) <table-bootstrap>

D) <table-b>

24 / 30

24. How can you make a Bootstrap button disabled?

A) Use .btn-disabled

B) Add disabled attribute

C) Use .btn-off

D) Use .disable-btn

25 / 30

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

A) Use .toast-auto

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

C) Use .toast-hide

D) Use dismiss="true"

26 / 30

26. How do you change the hover effect of Bootstrap buttons globally?

A) Override $btn-hover-bg in _variables.scss

B) Add a .btn:hover class in custom CSS

C) Modify Bootstrap's bootstrap.css file

D) Use JavaScript to change the hover style

27 / 30

27. Does Bootstrap 5 require jQuery?

A) Yes

B) No

C) Only for dropdowns

D) Only for modals

28 / 30

28. Which class is used for radio buttons in Bootstrap?

A) .form-check-input

B) .form-radio

C) .radio-input

D) .radio-button

29 / 30

29. How do you add a footer to a Bootstrap card?

A) .card-footer

B) .card-foot

C) .footer-card

D) .card-bottom

30 / 30

30. How can you change the background color of a Bootstrap navbar?

A) Using .navbar-style class

B) Using .nav-background class

C) Using .navbar-color class

D) Using .bg-* classes like .bg-primary

Your score is

The average score is 25%

Rate Your Experience!

Anonymous feedback

Thank you for your feedback! We appreciate your input.

HTML Quiz Test Online

10 Minutes JSON Quiz Test Online

Angular Quiz Test Online (30 random Questions)

CSS Quiz Test Online (30 random Questions)

JavaScript Quiz Test Online (30 random Questions)

10 Minutes Angular Quiz Test Online

Related