Bootstrap MCQs – Bootstrap Navigation & Layout

Navigation and layout are essential parts of web development, ensuring a seamless user experience. Bootstrap provides powerful classes and components like the Navbar, Breadcrumbs, Pagination, and Containers to create responsive designs efficiently. The following MCQs will help you master Bootstrap Navigation & Layout concepts and prepare for technical interviews.

1.) Which Bootstrap class is used to create a responsive navigation bar?

A) .nav-menu
B) .navigation-bar
C) .navbar
D) .topnav

Answer: Option C

Explanation: The .navbar class is used to create a responsive navigation bar in Bootstrap.

2.) Which Bootstrap class is used to align navigation items in a navbar?

A) .navbar-list
B) .nav-align
C) .navbar-items
D) .navbar-nav

Answer: Option D

Explanation: The .navbar-nav class aligns navigation links inside a Bootstrap navbar.

3.) What attribute is used to make a Bootstrap navbar toggle in mobile view?

A) data-bs-toggle=”menu”
B) data-bs-toggle=”collapse”
C) data-toggle=”dropdown”
D) data-bs-toggle=”modal”

Answer: Option B

Explanation: The data-bs-toggle=”collapse” attribute ensures the navbar collapses in mobile view.

4.) How do you align navbar items to the right?

A) .me-auto
B) .align-right
C) .justify-end
D) .ms-auto

Answer: Option D

Explanation: The .ms-auto class pushes navbar items to the right in Bootstrap.

5.) What Bootstrap class is used to create a sticky navbar?

A) .navbar-fixed
B) .sticky-top
C) .nav-sticky
D) .navbar-fixed-top

Answer: Option B

Explanation: The .sticky-top class makes the navbar stick to the top when scrolling.

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

A) .navbar-expand-lg
B) .navbar-collapse-md
C) .navbar-expand-md
D) .navbar-responsive

Answer: Option A

Explanation: The .navbar-expand-lg class makes the navbar responsive at large screen sizes.

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

A) .full-container
B) .container-wide
C) .container-fluid
D) .fluid-box

Answer: Option C

Explanation: The .container-fluid class makes a full-width responsive layout.

8.) Which Bootstrap class is used to center a container?

A) .align-center
B) .mx-auto
C) .text-center
D) .center-container

Answer: Option B

Explanation: The .mx-auto class centers a container horizontally in Bootstrap.

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

A) .nav-space
B) .me-2
C) .mb-3
D) .p-2

Answer: Option B

Explanation: The .me-2 class adds right margin spacing to navbar items.

10.) How can you create a vertical navigation menu using Bootstrap?

A) Add .vertical-nav
B) Use .nav-vertical
C) Use .navbar-vertical
D) Add .flex-column to .nav

Answer: Option D

Explanation: Adding .flex-column makes the navigation items stack vertically.

Pages: 1 2 3

Leave a Reply

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