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

Which class makes an element float to the left?

A) .float-start

B) .left-float

C) .align-left

D) .float-left

2 / 30

Which class is used to create a full-width container in Bootstrap 5?

A) .container-fixed

B) .full-width-container

C) .container-fluid

D) .container-wide

3 / 30

Which directive is used for Bootstrap dropdowns in Vue?

A) vue-dropdown

B) v-dropdown

C) v-b-dropdown

D) b-dropdown

4 / 30

Which class ensures a column spans 6 grid columns on medium devices and full-width on smaller screens?

A) .col-xs-12 .col-md-6

B) .col-md-6

C) .col-6-md

D) .col-sm-12 .col-md-6

5 / 30

How do you disable animations in Bootstrap modals?

A) Add data-bs-animation="false"

B) data-bs-modal="static"

C) Use disable-animation

D) Remove fade class

6 / 30

Which Bootstrap class makes a column span all available columns?

A) .col-all

B) .col-span

C) .col-auto

D) .col-full

7 / 30

How do you make a Bootstrap navbar expand at a specific screen size?

A) .navbar-responsive

B) .navbar-expand-lg

C) .navbar-expand-md

D) .navbar-collapse-md

8 / 30

What does the .text-muted class do?

A) Makes text italic

B) Reduces text opacity for a softer appearance

C) Increases text size

D) Hides the text

9 / 30

What is the best way to include Bootstrap in a project for optimal performance?

A) Load Bootstrap in multiple <script> tags

B) Use a CDN version of Bootstrap

C) Add Bootstrap via inline styles

D) Download the full Bootstrap source files

10 / 30

What is the primary method to customize Bootstrap styles?

A) Overriding Bootstrap classes in a separate CSS file

B) Editing Bootstrap's core CSS file

C) Using jQuery to change class properties

D) Using JavaScript to modify styles

11 / 30

Which Bootstrap component automatically dismisses content when clicked outside?

A) Tooltip

B) Button

C) Modal

D) Alert

12 / 30

How do you make a navbar fixed at the bottom?

A) .sticky-bottom

B) .fixed-bottom

C) .navbar-fixed-bottom

D) .navbar-bottom

13 / 30

Which class is used to group a label and an input field together?

A) .form-block

B) .form-group

C) .input-label-group

D) .form-container

14 / 30

Which Bootstrap component is used for lightweight notifications?

A) Toast

B) Popover

C) Alert

D) ScrollSpy

15 / 30

How do you highlight a specific row in a table?

A) .table-highlight

B) .table-hover

C) .table-active

D) .row-active

16 / 30

When was Bootstrap 5 officially released?

A) 2020

B) 2022

C) 2019

D) 2021

17 / 30

What Bootstrap class centers text inside table cells?

A) .table-align-center

B) .table-text

C) .text-center

D) .center-text

18 / 30

What does .order-1 do?

A) Moves an item to the last position

B) Orders an item to appear first

C) Aligns the item in the middle

D) Makes an item hidden

19 / 30

What class is used to create inline forms in Bootstrap?

A) .form-inline

B) .form-group-inline

C) .inline-form

D) .form-row

20 / 30

How do you create a hover effect on Bootstrap table rows?

A) .table-hover

B) .table-focus

C) .hover-rows

D) .hover-table

21 / 30

Which class is used to create a tab-based navigation in Bootstrap?

A) .tabs-group

B) .tab-nav

C) .navbar-tabs

D) .nav-tabs

22 / 30

Which utility class applies equal margin on all sides?

A) .m-equal

B) .margin-equal

C) .margin-all

D) .m-auto

23 / 30

What file should be modified to use custom Bootstrap fonts?

A) _variables.scss

B) fonts.scss

C) bootstrap.css

D) typography.css

24 / 30

Which Bootstrap class is used to style input fields?

A) .input-style

B) .input-control

C) .bootstrap-input

D) .form-control

25 / 30

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

A) Justifies text

B) Adds a break between lines

C) Removes line breaks

D) Forces text to wrap

26 / 30

Which method is best for applying a custom theme in Bootstrap?

A) Modifying Bootstrap’s core files

B) Overriding CSS classes after Bootstrap is loaded

C) Writing inline styles in HTML

D) Using SASS variables before importing Bootstrap

27 / 30

What Bootstrap class is used to center an image?

A) .mx-auto

B) .img-center

C) .image-align

D) .text-center

28 / 30

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

A) .width-max

B) .full-width

C) .w-100

D) .d-block

29 / 30

How do you apply different colors to alerts in Bootstrap?

A) Use .bg-alert classes

B) Use .alert-primary, .alert-success, .alert-danger, etc.

C) Use .alert-color classes

D) Use .color-alert classes

30 / 30

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

A) .rounded-border

B) .img-thumbnail

C) .img-bordered

D) .bordered-img

Your score is

The average score is 23%

Rate Your Experience!

Anonymous feedback

Thank you for your feedback! We appreciate your input.

MongoDB Quiz Test Online (30 random Questions)

Docker Quiz Test Online (30 random Questions)

JSON Quiz Test Online (30 random Questions)

10 Minutes CSS Quiz Test Online

10 Minutes Docker Quiz Test Online

10 Minutes MongoDB Quiz Test Online

Related