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 does Bootstrap handle performance in dark mode?

A) Reduces HTML file size

B) Dark mode does not affect performance significantly

C) Requires extra JavaScript processing

D) Uses less CSS

2 / 30

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

A) $enable-dark-mode: true;

B) data-theme="dark"

C) @use dark-theme;

D) .dark-mode {}

3 / 30

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

A) .table-row

B) .table-color

C) .row-bg

D) .table-primary

4 / 30

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

A) fonts.scss

B) bootstrap.css

C) _variables.scss

D) typography.css

5 / 30

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

A) npm install bootstrap

B) bootstrap add react

C) install bootstrap --react

D) react-bootstrap install

6 / 30

6. What is the purpose of .lh-lg in Bootstrap?

A) Increases letter spacing

B) Makes text bold

C) Decreases line height

D) Increases line height

7 / 30

7. How can you reduce the file size of Bootstrap CSS?

A) Remove unused classes manually

B) Load all Bootstrap SCSS files

C) Use multiple smaller CSS files

D) Use the minified version (bootstrap.min.css)

8 / 30

8. Which Bootstrap 5 class makes a container responsive based on screen size?

A) .container

B) .container-fluid

C) .container-full

D) .container-responsive

9 / 30

9. What does the .g-4 class do?

A) Sets 4px column width

B) Adds 4px padding (gutter) between columns

C) Adds 4px margin

D) Sets a 4-column layout

10 / 30

10. How do you install Bootstrap in a Vue.js project?

A) npm add bootstrap-vue

B) npm install bootstrap-vue

C) bootstrap-vue install

D) vue install bootstrap

11 / 30

11. How do you center a Bootstrap navbar?

A) .navbar-middle

B) .justify-content-center

C) .nav-center

D) .align-center

12 / 30

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

A) fade

B) modal-animate

C) bs-animation

D) animated-modal

13 / 30

13. How do you disable animations in Bootstrap modals?

A) Use disable-animation

B) data-bs-modal="static"

C) Add data-bs-animation="false"

D) Remove fade class

14 / 30

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

A) v-dropdown

B) b-dropdown

C) v-b-dropdown

D) vue-dropdown

15 / 30

15. What Bootstrap class is used to center an image?

A) .text-center

B) .img-center

C) .image-align

D) .mx-auto

16 / 30

16. Which method prevents unnecessary reflows in Bootstrap layouts?

A) Using JavaScript to adjust element sizes

B) Removing all margin and padding

C) Using Flexbox instead of inline-block elements

D) Avoiding Bootstrap classes

17 / 30

17. How do you initialize a popover?

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

B) popover.show()

C) new bootstrap.Popover()

D) activatePopover()

18 / 30

18. What is the default Bootstrap icon library in Bootstrap 5?

A) FontAwesome

B) Bootstrap Icons

C) Material Icons

D) Ionicons

19 / 30

19. Which class removes the horizontal gutters between columns?

A) .gap-0

B) .row-gutter-0

C) .no-gutter

D) .g-0

20 / 30

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

A) .bi-{color}

B) .icon-color

C) .text-{color} classes

D) .icon-text

21 / 30

21. How do you initialize a Bootstrap modal using JavaScript?

A) Modal.init('#myModal')

B) activate.Modal('#myModal')

C) initialize.Modal('#myModal')

D) new bootstrap.Modal('#myModal')

22 / 30

22. Bootstrap was originally developed by employees of which company?

A) Microsoft

B) Facebook

C) Google

D) Twitter

23 / 30

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

A) .card-header

B) .card-title

C) .card-top

D) .card-head

24 / 30

24. What is the Bootstrap class for responsive tables?

A) .table-fixed

B) .table-responsive

C) .responsive-table

D) .table-auto

25 / 30

25. What happens if column widths exceed 12 units in a Bootstrap row?

A) Extra columns wrap to the next line

B) The layout breaks

C) The columns shrink automatically

D) The columns overlap

26 / 30

26. Which Bootstrap method is best for installing dependencies in a Node.js project?

A) Manual download

B) Google Fonts

C) npm or yarn

D) CDN

27 / 30

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

A) .paginate-list

B) .pagination

C) .page-links

D) .nav-pagination

28 / 30

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

A) .d-hide

B) .d-none d-sm-block

C) .col-hidden-sm

D) .hide-sm

29 / 30

29. What does .flex-row do in Bootstrap?

A) Justifies content to the right

B) Arranges items in a row (default)

C) Arranges items in a column

D) Aligns items at the center

30 / 30

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

A) .text-decoration-line-through

B) .text-line-through

C) .text-strike

D) .text-delete

Your score is

The average score is 23%

Rate Your Experience!

Anonymous feedback

Thank you for your feedback! We appreciate your input.

10 Minutes Angular Quiz Test Online

JavaScript Quiz Test Online (30 random Questions)

10 Minutes JavaScript Quiz Test Online

10 Minutes Docker Quiz Test Online

Online Quiz Test (with time limit)

10 Minutes JSON Quiz Test Online

Related