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. How do you remove padding and margin from an element in Bootstrap?

A) .padding-0 margin-0

B) .p-none m-none

C) .m-0 p-0

D) .spacing-none

2 / 30

2. How do you align a single flex item at the bottom of its container?

A) .align-self-end

B) .bottom-flex

C) .align-items-end

D) .justify-content-end

3 / 30

3. Which class is used to define a Bootstrap row?

A) .container-row

B) .row

C) .grid

D) .column

4 / 30

4. What is Bootstrap’s default container class?

A) .row

B) .grid

C) .container

D) .container-fluid

5 / 30

5. What attribute is used to enable Bootstrap tooltips?

A) data-bs-toggle="popover"

B) data-bs-tooltip="enable"

C) data-bs-toggle="tooltip"

D) tooltip-enable

6 / 30

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

A) .float-end

B) .align-right

C) .text-end

D) .text-right

7 / 30

7. Which class makes a flex container stack items vertically?

A) .flex-column

B) .stack-flex

C) .d-block

D) .flex-row

8 / 30

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

A) _variables.scss

B) fonts.scss

C) bootstrap.css

D) typography.css

9 / 30

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

A) .table-condensed

B) .table-sm

C) .table-thin

D) .table-compact

10 / 30

10. How do you create a circular image in Bootstrap?

A) .rounded-circle

B) .img-circle

C) .circle-img

D) .img-rounded

11 / 30

11. How can Bootstrap’s utility classes reduce additional CSS file size?

A) By converting styles into SCSS

B) By automatically compressing files

C) By providing predefined styles that eliminate custom CSS

D) By replacing JavaScript components

12 / 30

12. Which of the following is NOT a valid way to include Bootstrap 5 in a project?

A) Using a CDN

B) Downloading and linking manually

C) Using npm

D) Using Python scripts

13 / 30

13. What class do you use to add a shadow to an image?

A) .shadow

B) .shadow-img

C) .img-shadow

D) .box-shadow

14 / 30

14. How can you make text appear in a monospace font?

A) .text-monospace

B) .text-code

C) .monospace-font

D) .font-monospace

15 / 30

15. How do you align the table text to the left in Bootstrap?

A) .align-left

B) .left-align

C) .table-text-left

D) .text-left

16 / 30

16. Which version of Bootstrap introduced the “reboot” module to normalize styles?

A) Bootstrap 2

B) Bootstrap 3

C) Bootstrap 5

D) Bootstrap 4

17 / 30

17. What does .h-100 do?

A) Sets an element's height to 100% of its parent

B) Makes the element visible

C) Sets an element's height to 100px

D) Increases the height gradually

18 / 30

18. Which Bootstrap component provides a sliding image gallery?

A) Carousel

B) Offcanvas

C) Modal

D) Popover

19 / 30

19. Which class hides text visually while keeping it accessible?

A) .text-invisible

B) .visually-hidden

C) .text-hide

D) .text-none

20 / 30

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

A) 16

B) 10

C) 6

D) 12

21 / 30

21. How do you add a Bootstrap tooltip manually with JavaScript?

A) activateTooltip(element)

B) element.enableTooltip()

C) tooltip.init(element)

D) new bootstrap.Tooltip(element)

22 / 30

22. What Bootstrap class is used to create a carousel slider?

A) .image-slider

B) .slider

C) .carousel-slider

D) .carousel

23 / 30

23. What is the purpose of .text-break in Bootstrap?

A) Justifies text

B) Removes line breaks

C) Adds a break between lines

D) Forces text to wrap

24 / 30

24. Which class is used to make a table header bold?

A) .header-bold

B) .bold-text-header

C) .fw-bold

D) .table-bold-header

25 / 30

25. What attribute is required to enable Bootstrap tabs?

A) data-bs-tabs="true"

B) tab-activate

C) data-bs-toggle="tab"

D) enable-tabs

26 / 30

26. How do you center a Bootstrap navbar?

A) .align-center

B) .nav-center

C) .navbar-middle

D) .justify-content-center

27 / 30

27. What attribute is used to toggle a Bootstrap modal?

A) toggle="true"

B) data-show="modal"

C) data-bs-toggle="modal"

D) modal="toggle"

28 / 30

28. Which of the following browsers is NOT supported in Bootstrap 5?

A) Internet Explorer

B) Firefox

C) Edge

D) Chrome

29 / 30

29. What does .d-none do in Bootstrap?

A) Hides an element completely

B) Applies display flex to an element

C) Makes an element visible

D) Increases the font size

30 / 30

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

A) .fluid-box

B) .container-fluid

C) .full-container

D) .container-wide

Your score is

The average score is 31%

Rate Your Experience!

Anonymous feedback

Thank you for your feedback! We appreciate your input.

10 Minutes Angular Quiz Test Online

Docker Quiz Test Online (30 random Questions)

10 Minutes Docker Quiz Test Online

JavaScript Quiz Test Online (30 random Questions)

SQL Quiz Test Online (30 random Questions)

10 Minutes HTML Quiz Test Online

Related