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 apply different colors to alerts in Bootstrap?

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

B) Use .color-alert classes

C) Use .bg-alert classes

D) Use .alert-color classes

2 / 30

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

A) Modify Bootstrap’s core CSS file

B) Modify $spacer variables in _variables.scss

C) Use inline styles in HTML

D) Write custom CSS classes

3 / 30

3. How do you make text in a table cell bold using Bootstrap?

A) .table-bold

B) .text-bold

C) .bold-text

D) .fw-bold

4 / 30

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

A) .form-tooltip

B) .form-text

C) .input-help

D) .help-text

5 / 30

5. Which Bootstrap class is used to style input fields?

A) .form-control

B) .input-style

C) .input-control

D) .bootstrap-input

6 / 30

6. Which Bootstrap 5 utility or class is typically used to create a form with a horizontal layout?

A) .form-group

B) .col-*

C) Combination of .row and .col-*

D) .row

7 / 30

7. Which class centers text horizontally?

A) .text-mid

B) .text-center

C) .text-align-middle

D) .align-center

8 / 30

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

A) .table-color

B) .table-dark

C) .table-primary

D) .table-bg

9 / 30

9. What is the smallest grid breakpoint in Bootstrap 5?

A) md

B) lg

C) sm

D) xs

10 / 30

10. Which Bootstrap class is used to create a flex-based navigation bar?

A) .flex-navbar

B) .nav-flexible

C) .d-flex

D) .navbar-flex

11 / 30

11. How can you override Bootstrap’s default styles?

A) By editing bootstrap.min.css

B) By modifying the HTML structure

C) It is not possible

D) By using CSS rules in a separate stylesheet

12 / 30

12. Which class aligns text to be fully justified?

A) .text-justify

B) Bootstrap does not support justified text

C) .justify-text

D) .text-block

13 / 30

13. Which Bootstrap class is used to make a flex container take up the full available width?

A) .h-100

B) .flex-fill

C) .w-100

D) .d-flex

14 / 30

14. How do you reverse the order of flex items in Bootstrap?

A) .flex-row-reverse

B) .reverse-flex

C) .order-reverse

D) .flex-reverse

15 / 30

15. How do you nest Bootstrap columns inside another column?

A) Wrap columns inside another .col-*

B) Use .col-nest class

C) Use .container-nest

D) Nesting is not supported

16 / 30

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

A) .flex-wrap

B) .overflow-wrap

C) .wrap-flex

D) .d-flex-wrap

17 / 30

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

A) Stretches columns to fit the row

B) Distributes columns evenly with space between

C) Aligns columns in the center

D) Moves columns to the left

18 / 30

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

A) alt attributes on images

B) Explicitly setting width and height for images

C) Avoiding JavaScript

D) Using Bootstrap grid classes

19 / 30

19. What is the purpose of .form-floating in Bootstrap?

A) Creates a floating input label

B) Aligns form fields horizontally

C) Adds animation effects to input fields

D) Makes the form responsive

20 / 30

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

A) <table-bootstrap>

B) <v-table>

C) <b-table>

D) <table-b>

21 / 30

21. Which Bootstrap class makes text bold?

A) .text-bold

B) .bold-text

C) .fw-bold

D) .font-bold

22 / 30

22. How do you add a new color to Bootstrap's theme colors?

A) Modify _variables.scss

B) Edit Bootstrap's CSS file

C) Use JavaScript to add a color

D) Add a new CSS class

23 / 30

23. What does "ng-bootstrap" provide?

A) Bootstrap for Vue

B) Bootstrap for Node.js

C) Bootstrap for React

D) Bootstrap for Angular

24 / 30

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

A) Facebook

B) Microsoft

C) Google

D) Twitter

25 / 30

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

A) .p-2

B) .me-2

C) .mb-3

D) .nav-space

26 / 30

26. Which Bootstrap component is used for lightweight notifications?

A) Toast

B) ScrollSpy

C) Popover

D) Alert

27 / 30

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

A) .nav-pagination

B) .page-links

C) .paginate-list

D) .pagination

28 / 30

28. What Bootstrap class applies padding to all sides of an element?

A) .p-all

B) .pad-3

C) .padding-all

D) .p-3

29 / 30

29. Which Bootstrap class is used for responsive image alignment?

A) .img-center

B) .float-start, .float-end, .mx-auto

C) .align-img

D) .image-responsive

30 / 30

30. What class makes a table borderless?

A) .table-borderless

B) .table-clean

C) .table-empty

D) .no-border

Your score is

The average score is 25%

Rate Your Experience!

Anonymous feedback

Thank you for your feedback! We appreciate your input.

10 Minutes JSON Quiz Test Online

10 Minutes Angular Quiz Test Online

10 Minutes MongoDB Quiz Test Online

Docker Quiz Test Online (30 random Questions)

10 Minutes SQL Quiz Test Online

SQL Quiz Test Online (30 random Questions)

Related