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 center a column in Bootstrap 5?

A) .row-center

B) .col-center

C) .mx-auto

D) .text-center

2 / 30

2. What package provides Bootstrap utilities in Next.js?

A) bootstrap

B) bootstrapjs

C) bootstrap-next

D) bootstrap-utils

3 / 30

3. Which CSS preprocessor is used in Bootstrap 5?

A) LESS

B) SCSS

C) Sass

D) Stylus

4 / 30

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

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

B) Bootstrap 5 does not support dark mode

C) Manually override CSS

D) Use the .bg-dark class

5 / 30

5. What does the .justify-content-between class do?

A) Distributes columns evenly with space between

B) Aligns columns in the center

C) Stretches columns to fit the row

D) Moves columns to the left

6 / 30

6. How can you add a search icon inside a Bootstrap input field?

A) Use .form-icon

B) Use .input-group with <i class="bi bi-search"></i>

C) Use .form-search

D) Apply .icon-input

7 / 30

7. What is the main purpose of Bootstrap?

A) Cybersecurity testing

B) Database management

C) Front-end framework for responsive design

D) Back-end development

8 / 30

8. How can you align text to the right using Bootstrap?

A) .text-end

B) .align-right

C) .float-end

D) .text-right

9 / 30

9. Which class is used to change the table background color?

A) .table-color

B) .table-bg

C) .table-primary

D) .table-dark

10 / 30

10. How do you add a responsive margin to the top of an element in Bootstrap?

A) .margin-top

B) .mt-md-3

C) .m-t-md

D) .top-margin-md

11 / 30

11. Where are Bootstrap's default style variables defined?

A) _variables.scss

B) bootstrap.css

C) variables.json

D) theme.css

12 / 30

12. How do you allow Flexbox items to wrap to the next line?

A) .d-flex-wrap

B) .flex-wrap

C) .overflow-wrap

D) .wrap-flex

13 / 30

13. How do you make text uppercase in Bootstrap?

A) .uppercase-text

B) .text-upper

C) .text-uppercase

D) .text-uppercase-all

14 / 30

14. What is the default column count in Bootstrap 5’s grid system?

A) 6

B) 12

C) 10

D) 16

15 / 30

15. How do you modify the default gutter width in Bootstrap’s grid system?

A) Use grid-gutter: 0px; in HTML

B) Remove Bootstrap’s grid system and write custom CSS

C) Add custom .gutter classes in CSS

D) Change $grid-gutter-width in _variables.scss

16 / 30

16. In Vue.js, which library is used for Bootstrap components?

A) bootstrap-react

B) bootstrap-vue

C) vue-bootstrap

D) ng-bootstrap

17 / 30

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

A) .card-title

B) .card-head

C) .card-header

D) .card-top

18 / 30

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

A) Adds 4px margin

B) Sets a 4-column layout

C) Adds 4px padding (gutter) between columns

D) Sets 4px column width

19 / 30

19. How can you prevent Bootstrap from loading unused JavaScript components?

A) Load only bootstrap.min.js

B) Manually remove JS files after loading

C) Use a custom build and exclude unnecessary JS components

D) Use external scripts to disable Bootstrap JS

20 / 30

20. How do you push an item to the right inside a flex container?

A) .justify-content-start

B) .me-auto

C) .justify-content-end

D) .ms-auto

21 / 30

21. What Bootstrap class reduces table cell spacing and padding?

A) .table-condensed

B) .table-compact

C) .table-thin

D) .table-sm

22 / 30

22. Which Bootstrap framework provides Angular components?

A) ngx-bootstrap

B) react-bootstrap

C) bootstrap-vue

D) next-bootstrap

23 / 30

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

A) Loads images automatically

B) Makes pages heavier

C) Reduces the need for custom layouts

D) Requires additional JavaScript

24 / 30

24. Which Bootstrap 5 component is used for creating buttons?

A) .btn

B) .btn-style

C) .bootstrap-button

D) .button

25 / 30

25. Which version of Bootstrap removed jQuery as a dependency?

A) Bootstrap 5

B) Bootstrap 2

C) Bootstrap 3

D) Bootstrap 4

26 / 30

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

A) Facebook

B) Twitter

C) Microsoft

D) Google

27 / 30

27. Which class removes borders from an element?

A) .no-border

B) .remove-border

C) .border-0

D) .border-none

28 / 30

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

A) Removes padding from all sides

B) Adds 0px padding only at the top

C) Sets padding to default

D) Adds 0.5rem padding

29 / 30

29. Which class enables the use of Flexbox in Bootstrap?

A) .d-flex

B) .enable-flexbox

C) .flex-container

D) .display-flex

30 / 30

30. How can you improve Bootstrap performance when using icons?

A) Use inline SVG icons instead of external icon fonts

B) Use multiple icon libraries

C) Avoid using icons altogether

D) Load all Font Awesome icons

Your score is

The average score is 25%

Rate Your Experience!

Anonymous feedback

Thank you for your feedback! We appreciate your input.

Online Quiz Test (with time limit)

10 Minutes Docker Quiz Test Online

HTML Quiz Test Online

10 Minutes CSS Quiz Test Online

SQL Quiz Test Online (30 random Questions)

JavaScript Quiz Test Online (30 random Questions)

Related