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. How do you nest Bootstrap columns inside another column?

A) Nesting is not supported

B) Use .col-nest class

C) Use .container-nest

D) Wrap columns inside another .col-*

2 / 30

2. How do you import Bootstrap 5 in a Sass file?

A) @import "~bootstrap/scss/bootstrap";

B) @import "bootstrap.min.css";

C) @import "bootstrap";

D) @import "https://bootstrapcdn.com/bootstrap.css";

3 / 30

3. How do you make a Bootstrap input field display a placeholder?

A) .input-text="Text"

B) placeholder="Text" attribute

C) .placeholder="Text"

D) .form-placeholder="Text"

4 / 30

4. Which class adds a line-through effect to text?

A) .text-delete

B) .text-line-through

C) .text-strike

D) .text-decoration-line-through

5 / 30

5. How does using Bootstrap’s grid system improve performance?

A) Makes pages heavier

B) Requires additional JavaScript

C) Reduces the need for custom layouts

D) Loads images automatically

6 / 30

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

A) .container-fluid

B) .fluid-box

C) .full-container

D) .container-wide

7 / 30

7. What class is required for a modal to fade in with animation?

A) bs-animation

B) modal-animate

C) animated-modal

D) fade

8 / 30

8. How do you apply different colors to alerts in Bootstrap?

A) Use .bg-alert classes

B) Use .alert-color classes

C) Use .alert-primary, .alert-success, .alert-danger, etc.

D) Use .color-alert classes

9 / 30

9. What is the recommended way to override Bootstrap's default spacing (margins & paddings)?

A) Modify Bootstrap’s core CSS file

B) Write custom CSS classes

C) Modify $spacer variables in _variables.scss

D) Use inline styles in HTML

10 / 30

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

A) Pagination

B) All of the above

C) Navbar

D) Breadcrumbs

11 / 30

11. Which preprocessor does Bootstrap 5 use for customizing styles?

A) SASS

B) LESS

C) Both B and C

D) SCSS

12 / 30

12. How do you enable the Bootstrap grid system to use Flexbox?

A) $use-flexbox: true;

B) $enable-flex: true;

C) $enable-grid-flexbox: true;

D) $grid-flex-enable: true;

13 / 30

13. Which Bootstrap SCSS file defines global styles and root variables?

A) _global.scss

B) _variables.scss

C) _root.scss

D) _bootstrap.scss

14 / 30

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

A) They cannot be customized

B) They reduce JavaScript execution speed

C) They do not work on mobile

D) They load all images at once

15 / 30

15. How do you change the default container width in Bootstrap?

A) Use JavaScript to adjust width

B) Set max-width in CSS

C) Use container-fluid

D) Modify $container-max-widths

16 / 30

16. Which class is used to change the row color in Bootstrap tables?

A) .table-primary

B) .table-row

C) .table-color

D) .row-bg

17 / 30

17. Which Bootstrap feature helps reduce layout shifts (CLS) in performance testing?

A) alt attributes on images

B) Avoiding JavaScript

C) Explicitly setting width and height for images

D) Using Bootstrap grid classes

18 / 30

18. Which Bootstrap component collapses sections dynamically?

A) Tooltip

B) Modal

C) Accordion

D) Alert

19 / 30

19. What is the impact of using Google Fonts in a Bootstrap project?

A) Loads faster than system fonts

B) Reduces the need for Bootstrap classes

C) Improves SEO rankings

D) Increases load time if not optimized

20 / 30

20. What does .text-black-50 do in Bootstrap?

A) Makes text fully black

B) Applies a black background

C) Sets text color to 50% black opacity

D) Converts text to bold black

21 / 30

21. Which method prevents unnecessary reflows in Bootstrap layouts?

A) Using JavaScript to adjust element sizes

B) Avoiding Bootstrap classes

C) Using Flexbox instead of inline-block elements

D) Removing all margin and padding

22 / 30

22. What attribute is used to enable Bootstrap tooltips?

A) tooltip-enable

B) data-bs-toggle="tooltip"

C) data-bs-tooltip="enable"

D) data-bs-toggle="popover"

23 / 30

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

A) Italicizes text

B) Increases text size

C) Reduces text weight

D) Makes text bold

24 / 30

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

A) .rounded-top

B) .rounded-only-top

C) .rounded-sm

D) .top-rounded

25 / 30

25. What file should be modified to use custom Bootstrap fonts?

A) typography.css

B) _variables.scss

C) bootstrap.css

D) fonts.scss

26 / 30

26. Which class is used to add a header inside a Bootstrap card?

A) .card-title

B) .card-top

C) .card-header

D) .card-head

27 / 30

27. What is the primary benefit of using "react-bootstrap" over traditional Bootstrap in React?

A) More themes

B) No need for jQuery

C) Automatic dark mode

D) Faster animations

28 / 30

28. What is the correct way to activate a Bootstrap tooltip?

A) data-hover="tooltip"

B) show-tooltip="on"

C) tooltip-enable="true"

D) data-bs-toggle="tooltip"

29 / 30

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

A) .align-center

B) .align-items-center

C) .align-items-middle

D) .justify-center

30 / 30

30. What is the purpose of Bootstrap’s Utility API?

A) Adding animations

B) Creating new components

C) None of the above

D) Customizing Bootstrap styles without modifying core files

Your score is

The average score is 25%

Rate Your Experience!

Anonymous feedback

Thank you for your feedback! We appreciate your input.

10 Minutes CSS Quiz Test Online

10 Minutes Docker Quiz Test Online

10 Minutes JavaScript Quiz Test Online

Online Quiz Test (with time limit)

Angular Quiz Test Online (30 random Questions)

Docker Quiz Test Online (30 random Questions)

Related