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 Bootstrap class is used to create a button?

A) .btn-style

B) .button-control

C) .btn

D) .button

2 / 30

2. How to integrate Bootstrap with React?

A) Use <link> tag in HTML

B) Use react-bootstrap only

C) Use Bootstrap with jQuery

D) Install bootstrap and import in index.js

3 / 30

3. What is the default font family for Bootstrap Icons?

A) Bootstrap Icons

B) Material Icons

C) Font Awesome

D) Google Icons

4 / 30

4. What does data-bs-slide="next" do?

A) Slides next in a carousel

B) Moves to next tab

C) Shows next tooltip

D) Opens next modal

5 / 30

5. Which Bootstrap JavaScript component provides tabbed navigation?

A) Tabs

B) ScrollSpy

C) Carousel

D) Accordion

6 / 30

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

A) Add custom .gutter classes in CSS

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

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

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

7 / 30

7. How can you make a table take up the full width of the screen?

A) .table-fluid

B) .w-100

C) .table-width

D) .table-full

8 / 30

8. How do you initialize a Bootstrap modal using JavaScript?

A) activate.Modal('#myModal')

B) Modal.init('#myModal')

C) initialize.Modal('#myModal')

D) new bootstrap.Modal('#myModal')

9 / 30

9. Which Bootstrap component can slow down page performance if overused?

A) Grid system

B) JavaScript components

C) Tables

D) Forms

10 / 30

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

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

B) useBootstrap(); in main.ts

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

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

11 / 30

11. What does .text-black-50 do in Bootstrap?

A) Applies a black background

B) Makes text fully black

C) Sets text color to 50% black opacity

D) Converts text to bold black

12 / 30

12. Which Bootstrap component provides a sliding image gallery?

A) Offcanvas

B) Carousel

C) Modal

D) Popover

13 / 30

13. How do you make a form input full-width in Bootstrap?

A) .full-width

B) .w-100

C) .form-wide

D) .input-expand

14 / 30

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

A) Automatic dark mode

B) More themes

C) Faster animations

D) No need for jQuery

15 / 30

15. Which package manager can be used to install Bootstrap 5?

A) yarn

B) npm

C) Composer

D) Both A and B

16 / 30

16. What is the best way to integrate Bootstrap in a Next.js project?

A) Import bootstrap.min.css in _app.js

B) Add bootstrap in package.json

C) Install next-bootstrap

D) Use bootstrap-jsx

17 / 30

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

A) .me-2

B) .nav-space

C) .mb-3

D) .p-2

18 / 30

18. Which class in Bootstrap ensures columns have equal height in a row?

A) .equal-height

B) .align-items-stretch

C) .row-height-auto

D) .col-height

19 / 30

19. What class is used for tooltips in Bootstrap?

A) .tooltip

B) .info-tip

C) .hover-tip

D) .tip-box

20 / 30

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

A) .flex-navbar

B) .nav-flexible

C) .d-flex

D) .navbar-flex

21 / 30

21. Which Bootstrap utility allows color customization for components?

A) $colors-primary

B) $theme-variable

C) $color-picker

D) $theme-colors

22 / 30

22. Which method prevents unnecessary reflows in Bootstrap layouts?

A) Using JavaScript to adjust element sizes

B) Removing all margin and padding

C) Avoiding Bootstrap classes

D) Using Flexbox instead of inline-block elements

23 / 30

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

A) .align-right

B) .float-end

C) .text-end

D) .text-right

24 / 30

24. What Bootstrap component is used for navigation between pages in a web application?

A) All of the above

B) Pagination

C) Navbar

D) Breadcrumbs

25 / 30

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

A) .mx-auto

B) .text-center

C) .center-container

D) .align-center

26 / 30

26. How do you globally enable dark mode in Bootstrap?

A) @use dark-theme;

B) data-theme="dark"

C) $enable-dark-mode: true;

D) .dark-mode {}

27 / 30

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

A) By using CSS rules in a separate stylesheet

B) By editing bootstrap.min.css

C) It is not possible

D) By modifying the HTML structure

28 / 30

28. 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

29 / 30

29. What does "ng-bootstrap" provide?

A) Bootstrap for React

B) Bootstrap for Angular

C) Bootstrap for Vue

D) Bootstrap for Node.js

30 / 30

30. How can you make a column invisible on small screens?

A) .d-none d-sm-block

B) .hide-sm

C) .d-hide

D) .col-hidden-sm

Your score is

The average score is 22%

Rate Your Experience!

Anonymous feedback

Thank you for your feedback! We appreciate your input.

CSS Quiz Test Online (30 random Questions)

MongoDB Quiz Test Online (30 random Questions)

SQL Quiz Test Online (30 random Questions)

Docker Quiz Test Online (30 random Questions)

10 Minutes Angular Quiz Test Online

10 Minutes JavaScript Quiz Test Online

Related