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 can you align text to the right using Bootstrap?

A) .text-right

B) .float-end

C) .align-right

D) .text-end

2 / 30

2. How do you remove unused Bootstrap styles for better performance?

A) Remove Bootstrap and write custom CSS

B) Use a tool like PurgeCSS

C) Minify Bootstrap

D) Manually delete unused CSS

3 / 30

3. How do you center a Bootstrap navbar?

A) .justify-content-center

B) .align-center

C) .nav-center

D) .navbar-middle

4 / 30

4. Which component allows auto-sliding images?

A) Modal

B) Tooltip

C) Accordion

D) Carousel

5 / 30

5. How do you import Bootstrap 5 in a Sass file?

A) @import "bootstrap";

B) @import "~bootstrap/scss/bootstrap";

C) @import "bootstrap.min.css";

D) @import "https://bootstrapcdn.com/bootstrap.css";

6 / 30

6. What Bootstrap class is used to create justified navigation?

A) .nav-align

B) .nav-justified

C) .justify-nav

D) .nav-fill

7 / 30

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

A) Adds 0.5rem padding

B) Adds 0px padding only at the top

C) Sets padding to default

D) Removes padding from all sides

8 / 30

8. What must be added to enable Bootstrap tooltips in React?

A) import 'bootstrap/dist/js/bootstrap.bundle.min.js'

B) require('bootstrap-tooltips')

C) enableTooltips();

D) addBootstrapTooltips();

9 / 30

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

A) .shadow

B) .shadow-img

C) .img-shadow

D) .box-shadow

10 / 30

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

A) 12

B) 16

C) 8

D) 6

11 / 30

11. How do you remove padding and margin from an element in Bootstrap?

A) .m-0 p-0

B) .p-none m-none

C) .padding-0 margin-0

D) .spacing-none

12 / 30

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

A) .fluid-box

B) .container-fluid

C) .container-wide

D) .full-container

13 / 30

13. Which class is used to align columns at the bottom of a row?

A) .align-row-bottom

B) .align-self-bottom

C) .align-bottom

D) .align-items-end

14 / 30

14. How do you add hover effects to a Bootstrap navbar link?

A) .nav-effect

B) .nav-link:hover { color: red; }

C) .nav-hover

D) .hover-navbar

15 / 30

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

A) Makes the element 50% transparent

B) Adds a border

C) Increases text contrast

D) Changes text color

16 / 30

16. Which class is used to add shadows to Bootstrap components?

A) .shadow-effect

B) .shadow-sm, .shadow-lg, .shadow-none

C) .box-shadow

D) .component-shadow

17 / 30

17. Which class makes an element float to the left?

A) .float-start

B) .align-left

C) .float-left

D) .left-float

18 / 30

18. Which package provides Bootstrap components for React?

A) bootstrap-react

B) ng-bootstrap

C) react-bootstrap

D) vue-bootstrap

19 / 30

19. Bootstrap 5 introduced which new layout system?

A) Column API

B) Grid API

C) Theme API

D) Utility API

20 / 30

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

A) Hides an element completely

B) Increases the font size

C) Applies display flex to an element

D) Makes an element visible

21 / 30

21. Which class is used to create a form label in Bootstrap?

A) .form-label

B) .form-input-label

C) .label-control

D) .label-form

22 / 30

22. How do you disable a form input in Bootstrap?

A) disabled attribute

B) .form-disable

C) .input-disabled

D) .form-readonly

23 / 30

23. Which class is used to center text using Bootstrap utilities?

A) .center-text

B) .align-text-middle

C) .text-align-center

D) .text-center

24 / 30

24. How do you check the installed Bootstrap version using npm?

A) bootstrap -v

B) npm bootstrap --version

C) npm check bootstrap

D) npm list bootstrap

25 / 30

25. Why should Bootstrap’s .container class be used instead of custom width styles?

A) It prevents JavaScript execution

B) It removes unnecessary elements

C) It makes pages load faster

D) It ensures consistent, responsive layouts

26 / 30

26. Which preprocessor is used for customizing Bootstrap?

A) PostCSS

B) SCSS

C) LESS

D) Stylus

27 / 30

27. Which Bootstrap class is used to style table headers?

A) .table-header

B) .thead-dark

C) .table-title

D) .thead-primary

28 / 30

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

A) .flex-row

B) .stack-flex

C) .flex-column

D) .d-block

29 / 30

29. Which Bootstrap class is used to create a file upload input field?

A) .form-file

B) .form-upload

C) .file-control

D) .form-control with type="file"

30 / 30

30. What component updates navigation links dynamically based on scroll position?

A) Offcanvas

B) Modal

C) ScrollSpy

D) Dropdown

Your score is

The average score is 25%

Rate Your Experience!

Anonymous feedback

Thank you for your feedback! We appreciate your input.

SQL Quiz Test Online (30 random Questions)

Online Quiz Test (with time limit)

JSON Quiz Test Online (30 random Questions)

MongoDB Quiz Test Online (30 random Questions)

10 Minutes CSS Quiz Test Online

10 Minutes SQL Quiz Test Online

Related