Bootstrap MCQs – Bootstrap Navigation & Layout

11.) Which Bootstrap class is used to create a pagination component?

A) .pagination
B) .page-links
C) .paginate-list
D) .nav-pagination

Answer: Option A

Explanation: The .pagination class creates a pagination component in Bootstrap.

12.) What class is used to create a dark-themed navbar?

A) .nav-dark
B) .navbar-black
C) .navbar-dark bg-dark
D) .navbar-light bg-dark

Answer: Option C

Explanation: The .navbar-dark bg-dark class creates a dark-themed navbar.

13.) How do you make a navbar fixed at the bottom?

A) .navbar-bottom
B) .fixed-bottom
C) .sticky-bottom
D) .navbar-fixed-bottom

Answer: Option B

Explanation: The .fixed-bottom class makes the navbar stick to the bottom of the page.

14.) What Bootstrap class is used to create justified navigation?

A) .nav-align
B) .nav-fill
C) .justify-nav
D) .nav-justified

Answer: Option D

Explanation: The .nav-justified class makes navigation links stretch evenly.

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

A) .tab-nav
B) .nav-tabs
C) .tabs-group
D) .navbar-tabs

Answer: Option B

Explanation: The .nav-tabs class is used to create tab-based navigation in Bootstrap.

16.) Which Bootstrap class is used for responsive image alignment?

A) .align-img
B) .img-center
C) .float-start, .float-end, .mx-auto
D) .image-responsive

Answer: Option C

Explanation: These classes help align images in different positions responsively.

17.) What is the default breakpoint for .navbar-expand-md?

A) 992px
B) 576px
C) 1200px
D) 768px

Answer: Option D

Explanation: The .navbar-expand-md class applies the navbar expansion at medium devices (768px and above).

18.) How can you change the background color of a Bootstrap navbar?

A) Using .nav-background class
B) Using .bg-* classes like .bg-primary
C) Using .navbar-style class
D) Using .navbar-color class

Answer: Option B

Explanation: Bootstrap provides predefined background color utility classes (bg-primary, bg-dark, etc.) for styling navbars.

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

A) .d-flex
B) .nav-flexible
C) .flex-navbar
D) .navbar-flex

Answer: Option A

Explanation: The .d-flex class enables flexbox properties for responsive navbar layouts.

20.) What class is used to make a Bootstrap navbar transparent?

A) .navbar-transparent
B) .bg-transparent
C) .navbar-clear
D) .nav-glass

Answer: Option B

Explanation: The .bg-transparent class removes the background color from a Bootstrap navbar.

Leave a Reply

Your email address will not be published. Required fields are marked *