Bootstrap Flashcard

Front

Why is Bootstrap considered useful for web developers?

Back

It provides pre-made components and a responsive grid system.

Answer explanation

Bootstrap is useful for web developers because it provides pre-made components and a responsive grid system, allowing for faster and easier website design without starting from scratch.

Front

What does the class .container in Bootstrap do?

Back

Creates a fixed-width, responsive layout with margins

Answer explanation

The class .container in Bootstrap creates a fixed-width, responsive layout with margins, allowing for proper alignment and spacing of content. This is essential for building responsive web designs.

Front

The .container-fluid class in Bootstrap:

Back

Makes a full-width, responsive layout

Answer explanation

The .container-fluid class in Bootstrap creates a full-width, responsive layout that adapts to the screen size, making it ideal for fluid designs. This is why the correct answer is C.

Front

Bootstrap’s grid system is based on how many columns?

Back

12

Answer explanation

Bootstrap’s grid system is based on 12 columns, allowing for flexible layouts and responsive design. This structure enables developers to create complex layouts by combining different column sizes.

Front

In Bootstrap, the .btn class is mainly used for styling which type of elements?

Back

Clickable elements for user interaction

Answer explanation

In Bootstrap, the .btn class is specifically designed to style clickable elements like buttons, enhancing user interaction. Therefore, the correct answer is D) Clickable elements for user interaction.

Front

Bootstrap is designed to work on: Mobile devices only, Desktop devices only, Both mobile and desktop devices, Tablets only.

Back

Both mobile and desktop devices.

Answer explanation

Bootstrap is a responsive front-end framework that is designed to work seamlessly on both mobile and desktop devices, making option C the correct choice.

Front

What advantage does Bootstrap’s .container-fluid class provide over the .container class?

Back

It adjusts the width to be responsive and full-screen.

Answer explanation

The .container-fluid class provides a full-width layout that adjusts responsively to the screen size, unlike the .container class, which has a fixed width. This makes .container-fluid ideal for fluid designs.

Front

Which of the following describes the main purpose of Bootstrap’s grid system? A) To manage CSS styles efficiently, B) To organize content into rows and columns for responsive layouts, C) To create custom navigation bars, D) To apply predefined styles to buttons and icons

Back

To organize content into rows and columns for responsive layouts

Answer explanation

The main purpose of Bootstrap's grid system is to organize content into rows and columns, enabling responsive layouts that adapt to different screen sizes. This makes option B the correct choice.

Front

When using Bootstrap’s grid system, what would happen if you exceed 12 columns within a single row? A) Columns will automatically shrink to fit within the row, B) The content will overflow horizontally and require scrolling, C) Extra columns will wrap onto a new line, D) The row layout will break and cause an error

Back

Extra columns will wrap onto a new line.

Answer explanation

In Bootstrap's grid system, exceeding 12 columns in a row causes extra columns to wrap onto a new line. This behavior ensures that the layout remains intact without breaking, making option C the correct choice.

Front

Which Bootstrap CSS classes should you use to create a responsive layout that displays two columns side-by-side on large screens, but stacks them on smaller screens? Options: A) .col-12 .col-md-6, B) .col-sm-12 .col-lg-6, C) .col-lg-6 .col-xl-12, D) .col-6 .col-lg-12

Back

.col-12 .col-md-6

Answer explanation

Choice A) .col-12 .col-md-6 is correct because it makes the columns full-width (12) on smaller screens and half-width (6) on medium and larger screens, achieving the desired responsive layout.