Bootstrap Quiz Test Online (30 random Questions) 2025

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 class adds a line-through effect to text?

A) .text-decoration-line-through

B) .text-delete

C) .text-line-through

D) .text-strike

2 / 30

2. Which Bootstrap component provides a sliding image gallery?

A) Modal

B) Offcanvas

C) Popover

D) Carousel

3 / 30

3. What should be done to optimize Bootstrap forms for better performance?

A) Minimize the number of form fields

B) All of the above

C) Avoid unnecessary validation scripts

D) Use AJAX to submit forms asynchronously

4 / 30

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

A) Faster animations

B) Automatic dark mode

C) No need for jQuery

D) More themes

5 / 30

5. What class adds rounded corners to an image?

A) .rounded

B) .img-rounded

C) .border-radius

D) .round-img

6 / 30

6. What is the key advantage of using Bootstrap SCSS instead of CSS?

A) It allows customization before compilation

B) It automatically compresses CSS

C) It reduces file size

D) It speeds up Bootstrap’s JavaScript execution

7 / 30

7. What Bootstrap class centers text inside table cells?

A) .table-text

B) .center-text

C) .text-center

D) .table-align-center

8 / 30

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

A) Use inline SVG icons instead of external icon fonts

B) Load all Font Awesome icons

C) Use multiple icon libraries

D) Avoid using icons altogether

9 / 30

9. What Bootstrap class applies a light-colored header to a table?

A) .thead-primary

B) .table-light-header

C) .table-header-light

D) .thead-light

10 / 30

10. What is a downside of using too many Bootstrap modals?

A) They cannot be styled

B) They take up extra space in HTML

C) Each modal adds additional JavaScript processing

D) They require extra CSS

11 / 30

11. Which Bootstrap class is used to center a container?

A) .center-container

B) .text-center

C) .mx-auto

D) .align-center

12 / 30

12. Which class is used to create a form select dropdown in Bootstrap?

A) .form-dropdown

B) .input-dropdown

C) .form-select

D) .select-control

13 / 30

13. How do you make a navbar fixed at the bottom?

A) .fixed-bottom

B) .navbar-fixed-bottom

C) .navbar-bottom

D) .sticky-bottom

14 / 30

14. What class adds a thin border and rounded corners to an image?

A) .img-bordered

B) .rounded-border

C) .bordered-img

D) .img-thumbnail

15 / 30

15. How do you create a small table in Bootstrap?

A) .small-table

B) .table-sm

C) .table-small

D) .table-condensed

16 / 30

16. What is the role of the .navbar-toggler class?

A) Adds animations to navbar

B) Changes the navbar color

C) Toggles the navigation bar in mobile view

D) Expands the navbar content

17 / 30

17. Which Bootstrap utility class is useful for lazy loading images?

A) .lazyload

B) .lazy-img

C) loading="lazy"

D) .img-lazy

18 / 30

18. Which Bootstrap class is used to create a textarea input field?

A) .textarea-control

B) .form-control

C) .form-textarea

D) .text-field

19 / 30

19. What does the .opacity-50 class do?

A) Adds a border

B) Changes text color

C) Increases text contrast

D) Makes the element 50% transparent

20 / 30

20. How do you import Bootstrap styles in an Angular project?

A) require('bootstrap') in app.component.ts

B) useBootstrap(); in main.ts

C) import 'bootstrap' in app.module.ts

D) Add bootstrap.min.css in angular.json

21 / 30

21. Which Bootstrap class is used to display smaller text?

A) .text-sm

B) .font-small

C) .small

D) .text-small

22 / 30

22. Which method manually hides a popover?

A) closePopover()

B) disablePopover()

C) dismissPopover()

D) popover.hide()

23 / 30

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

A) .text-end

B) .float-end

C) .text-right

D) .align-right

24 / 30

24. Which class removes borders from an element?

A) .remove-border

B) .border-none

C) .no-border

D) .border-0

25 / 30

25. Which class triggers a modal when clicking a button?

A) data-bs-toggle="modal"

B) .modal-trigger

C) .open-modal

D) data-modal="show"

26 / 30

26. Which class makes an element take the full width of its container?

A) .w-100

B) .width-max

C) .full-width

D) .d-block

27 / 30

27. Which Bootstrap class is used to align text in the middle of a table cell vertically?

A) .align-middle

B) .text-middle

C) .table-align-center

D) .vertical-align

28 / 30

28. How many columns are there in Bootstrap’s grid system?

A) 8

B) 12

C) 6

D) 16

29 / 30

29. How do you make text uppercase in Bootstrap?

A) .text-uppercase

B) .uppercase-text

C) .text-uppercase-all

D) .text-upper

30 / 30

30. What Bootstrap class makes an image responsive?

A) .img-responsive

B) .responsive-img

C) .img-auto

D) .img-fluid

Your score is

The average score is 31%

Rate Your Experience!

Anonymous feedback

Thank you for your feedback! We appreciate your input.

10 Minutes Docker Quiz Test Online

10 Minutes Bootstrap Quiz Test Online

10 Minutes SQL Quiz Test Online

JSON Quiz Test Online (30 random Questions)

10 Minutes Angular Quiz Test Online

MongoDB Quiz Test Online (30 random Questions)

Related