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

What is the purpose of the Bootstrap 5 grid system?

A) To manage layouts using tables

B) To style fonts and colors

C) To create responsive, flexible layouts

D) To enhance JavaScript performance

2 / 30

Which component allows auto-sliding images?

A) Modal

B) Tooltip

C) Accordion

D) Carousel

3 / 30

Which class adds equal spacing between Bootstrap columns?

A) .g-*

B) .col-margin

C) .row-equal

D) .col-spacing

4 / 30

What attribute is required to enable Bootstrap tabs?

A) data-bs-tabs="true"

B) data-bs-toggle="tab"

C) enable-tabs

D) tab-activate

5 / 30

Which class is used to align items vertically in the center?

A) .align-items-middle

B) .align-items-center

C) .align-center

D) .justify-center

6 / 30

What class is required for a modal to fade in with animation?

A) bs-animation

B) animated-modal

C) fade

D) modal-animate

7 / 30

How do you make a Bootstrap input field display a placeholder?

A) placeholder="Text" attribute

B) .form-placeholder="Text"

C) .input-text="Text"

D) .placeholder="Text"

8 / 30

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

A) .d-block

B) .w-100

C) .width-max

D) .full-width

9 / 30

Which class is used for radio buttons in Bootstrap?

A) .radio-input

B) .radio-button

C) .form-radio

D) .form-check-input

10 / 30

Which Bootstrap framework is best for Vue.js?

A) react-bootstrap

B) bootstrap-vue

C) vue-bootstrap

D) ng-bootstrap

11 / 30

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

A) .img-thumbnail

B) .img-bordered

C) .bordered-img

D) .rounded-border

12 / 30

How to integrate Bootstrap with React?

A) Use Bootstrap with jQuery

B) Install bootstrap and import in index.js

C) Use react-bootstrap only

D) Use <link> tag in HTML

13 / 30

What class applies a border around an image?

A) .border

B) .border-img

C) .border-light

D) .img-border

14 / 30

What class makes a table row appear more distinct on hover?

A) .hover-effect

B) .table-highlight

C) .row-hover

D) .table-hover

15 / 30

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

A) Write custom CSS classes

B) Use inline styles in HTML

C) Modify $spacer variables in _variables.scss

D) Modify Bootstrap’s core CSS file

16 / 30

What Bootstrap class is used to style a disabled input field?

A) disabled attribute

B) .form-control-disabled

C) .disabled

D) .input-disabled

17 / 30

Which class is used to define a Bootstrap row?

A) .row

B) .column

C) .grid

D) .container-row

18 / 30

How can you override Bootstrap’s default styles?

A) By editing bootstrap.min.css

B) It is not possible

C) By using CSS rules in a separate stylesheet

D) By modifying the HTML structure

19 / 30

What is the purpose of Bootstrap’s Utility API?

A) Adding animations

B) Creating new components

C) None of the above

D) Customizing Bootstrap styles without modifying core files

20 / 30

What file should be modified to use custom Bootstrap fonts?

A) _variables.scss

B) fonts.scss

C) bootstrap.css

D) typography.css

21 / 30

Which class aligns text to be fully justified?

A) .text-block

B) .text-justify

C) .justify-text

D) Bootstrap does not support justified text

22 / 30

How to apply Bootstrap styles in Angular components?

A) require('bootstrap') in main.ts

B) Use @bootstrap decorator

C) Add Bootstrap in angular.json

D) import bootstrap.css in app.module.ts

23 / 30

Which Bootstrap class is used to create a button?

A) .btn

B) .button-control

C) .btn-style

D) .button

24 / 30

Which programming languages are primarily used in Bootstrap?

A) Python & HTML

B) Java & CSS

C) HTML, CSS & JavaScript

D) JavaScript & PHP

25 / 30

Which Bootstrap method manually hides a dropdown?

A) dropdown.dismiss()

B) dropdown.hide()

C) hide.bs.dropdown

D) dropdown.close()

26 / 30

Which SASS variable controls the default Bootstrap border radius?

A) $border-radius

B) $radius-base

C) $corner-radius

D) $border

27 / 30

How do you center a div horizontally in Bootstrap?

A) .m-center

B) .justify-center

C) .mx-auto

D) .align-center

28 / 30

What is the correct way to create a floating label for an input field in Bootstrap?

A) Use .form-label-top

B) Use .float-label

C) Use .form-floating with <label>

D) Use .floating-label

29 / 30

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

A) Bootstrap 2

B) Bootstrap 5

C) Bootstrap 4

D) Bootstrap 3

30 / 30

How can you prevent Bootstrap from loading unused JavaScript components?

A) Load only bootstrap.min.js

B) Manually remove JS files after loading

C) Use a custom build and exclude unnecessary JS components

D) Use external scripts to disable Bootstrap JS

Your score is

The average score is 23%

Rate Your Experience!

Anonymous feedback

Thank you for your feedback! We appreciate your input.

Angular Quiz Test Online (30 random Questions)

10 Minutes SQL Quiz Test Online

10 Minutes JSON Quiz Test Online

10 Minutes MongoDB Quiz Test Online

HTML Quiz Test Online

SQL Quiz Test Online (30 random Questions)

Related