Bootstrap Practice Test

Question 1

Content must be contained within the Bootstrap

Accepted Answer

Columns

Answer

In Bootstrap's grid system, content is primarily placed within columns. Columns are direct children of rows, and they define the horizontal division of the layout. This structure ensures that content is properly aligned, spaced, and responsive across different screen sizes within the grid.

Question 2

Bootstrap is built around reusable ___________  that include basic, sub, and design variant styles.

Accepted Answer

Components

Answer

Bootstrap is a front-end framework that provides a collection of pre-designed, reusable UI elements and interactive features. These 'components' include things like navigation bars, carousels, forms, buttons, and cards, which developers can easily integrate into their web projects. They come with basic, sub, and design variant styles for consistent and responsive interfaces.

Question 3

How many columns are there in the Bootstrap grid system?

Accepted Answer

12

Answer

The Bootstrap grid system is based on a 12-column layout. This design allows for flexible and responsive page structures, as developers can combine different numbers of columns (e.g., `col-md-4` for three equal columns) to create various layouts that adapt well to different screen sizes and devices.

Question 4

In Bootstrap, what class name would you give a full-width container?

Accepted Answer

.container-fluid

Answer

The `.container-fluid` class in Bootstrap creates a full-width container that spans the entire width of the viewport. Unlike the standard `.container` class, which provides a fixed-width responsive container with padding, `.container-fluid` ensures that the content always takes up 100% of the available horizontal space, adapting dynamically to the browser window.

Question 5

What differentiates the.container-fluid class from the.container class?

Accepted Answer

The .container-fluid class makes the container expand the full width of the browser

Answer

The `.container-fluid` class in Bootstrap creates a container that always spans 100% of the viewport width, adapting dynamically to the browser window size. In contrast, the `.container` class provides a responsive, fixed-width container that has a maximum width at different breakpoints, creating a centered layout with padding on the sides.