Question 1

What is Bootstrap?

Accepted Answer

Bootstrap is a free, open-source front-end framework for faster and easier web development. It includes HTML and CSS-based design templates for typography, forms, buttons, tables, navigation, modals, image carousels, and optional JavaScript plugins.

Question 2

What are the key components of Bootstrap?

Accepted Answer

Key components include the Grid System, Typography, Buttons, Forms, Navigation bars, Modals, Card components, and various utility classes for spacing and colors.

Question 3

Explain the Bootstrap Grid System.

Accepted Answer

Bootstrap's grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. It is based on a 12-column layout.

Question 4

What is a Container in Bootstrap?

Accepted Answer

Containers are the most basic layout element in Bootstrap and are required when using the default grid system. They are used to contain, pad, and (sometimes) center the content within them.

Question 5

Difference between .container and .container-fluid?

Accepted Answer

.container provides a responsive fixed-width container, meaning its max-width changes at each breakpoint. .container-fluid provides a full-width container, spanning the entire width of the viewport.

Question 6

What are the default Bootstrap breakpoints?

Accepted Answer

In Bootstrap 5, the breakpoints are: Extra small (<576px), Small (≥576px), Medium (≥768px), Large (≥992px), Extra large (≥1200px), and Extra extra large (≥1400px).

Question 7

How do you create a row in Bootstrap?

Accepted Answer

You use the .row class. Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them.

Question 8

How many columns are in the Bootstrap grid?

Accepted Answer

The Bootstrap grid system allows up to 12 columns across the page. You can group these columns together to create wider columns.

Question 9

What is a gutter in Bootstrap?

Accepted Answer

Gutters are the gaps between column content, created by horizontal padding. We set padding-right and padding-left on each column, and use negative margin on the .row to align content.

Question 10

How to remove gutters in a row?

Accepted Answer

Use the .g-0 class on the .row to remove the gutters from a row and its columns.

Question 11

What is an Offset column?

Accepted Answer

Offsets are used to move columns to the right. Classes like .offset-md-4 move a .col-md-4 over by four columns.

Question 12

What is Column Ordering?

Accepted Answer

You can change the visual order of columns using .order classes. For example, .order-last will move an element to the end, regardless of its position in the HTML.

Question 13

How to center a column in Bootstrap?

Accepted Answer

You can use flexbox utilities on the row (.justify-content-center) or use auto margins on the column if it's smaller than the container width.

Question 14

What are nesting columns?

Accepted Answer

To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column.

Question 15

What is Flexbox in Bootstrap?

Accepted Answer

Starting from version 4, Bootstrap moved to a Flexbox-based grid system. This allows for easier alignment, distribution of space, and flexible column heights.

Question 16

How to make a column take the remaining width?

Accepted Answer

Use the .col class without a specific number. It will automatically grow to fill the available space in a row.

Question 17

What is the purpose of .col-auto?

Accepted Answer

.col-auto makes the column take only as much width as its content requires.

Question 18

How to align columns vertically?

Accepted Answer

Use vertical alignment utilities on the row: .align-items-start, .align-items-center, or .align-items-end.

Question 19

How to align a single column vertically?

Accepted Answer

Use self-alignment utilities on the column: .align-self-start, .align-self-center, or .align-self-end.

Question 20

What is the Z-index in Bootstrap layout?

Accepted Answer

Bootstrap uses a limited z-index scale to manage layers of content like navigation, tooltips, popovers, modals, etc. These are defined in the SCSS variables.

Question 21

Explain the box-sizing in Bootstrap.

Accepted Answer

Bootstrap sets the global box-sizing to border-box. This ensures that the padding and border are included in the element's total width and height.

Question 22

What is Reboot in Bootstrap?

Accepted Answer

Reboot is a collection of element-specific CSS changes in a single file, based on Normalize.js, to provide a consistent cross-browser baseline.

Question 23

How to create a multi-row layout without multiple .row divs?

Accepted Answer

Because columns are based on percentage widths, they will wrap to a new line once the sum of column widths exceeds 12 within a single .row.

Question 24

What are Display utilities?

Accepted Answer

Classes like .d-none, .d-inline, .d-block, .d-flex are used to quickly toggle the display property of elements across different breakpoints.

Question 25

How to hide an element on mobile only?

Accepted Answer

Use .d-none .d-md-block. This hides it by default (mobile) and shows it starting from the medium breakpoint.

Question 26

What are Spacing utilities?

Accepted Answer

Bootstrap provides margin (.m-) and padding (.p-) utilities with levels from 0 to 5. Examples: .mt-3 (margin-top), .px-5 (horizontal padding).

Question 27

What does .mx-auto do?

Accepted Answer

It sets margin-left: auto and margin-right: auto, which is commonly used to center fixed-width block-level content.

Question 28

How to create a sticky top element?

Accepted Answer

Use the .sticky-top utility class. It ensures the element stays at the top of the viewport after scrolling past it.

Question 29

Difference between .fixed-top and .sticky-top?

Accepted Answer

.fixed-top removes the element from the normal document flow and fixes it to the top. .sticky-top keeps it in the flow until its position reaches the top.

Question 30

What is Aspect Ratio utility in Bootstrap 5?

Accepted Answer

Bootstrap 5 introduced ratios (like .ratio-16x9) to manage the aspect ratio of external content like iframes or videos.

Bootstrap 5 Interview Master

Difficulty Filters

Tools & Options

What is Bootstrap?

What are the key components of Bootstrap?

Explain the Bootstrap Grid System.

What is a Container in Bootstrap?

Difference between .container and .container-fluid?

What are the default Bootstrap breakpoints?

How do you create a row in Bootstrap?

How many columns are in the Bootstrap grid?

What is a gutter in Bootstrap?

How to remove gutters in a row?

What is an Offset column?

What is Column Ordering?

How to center a column in Bootstrap?

What are nesting columns?

What is Flexbox in Bootstrap?

How to make a column take the remaining width?

What is the purpose of .col-auto?

How to align columns vertically?

How to align a single column vertically?

What is the Z-index in Bootstrap layout?

Explain the box-sizing in Bootstrap.

What is Reboot in Bootstrap?

How to create a multi-row layout without multiple .row divs?

What are Display utilities?

How to hide an element on mobile only?

What are Spacing utilities?

What does .mx-auto do?

How to create a sticky top element?

Difference between .fixed-top and .sticky-top?

What is Aspect Ratio utility in Bootstrap 5?

How to create a responsive embed?

What are Float utilities?

What is Clearfix?

How to use Horizontal Centering for images?

Explain Z-index utilities in BS5.

What is Overflow utility?

How to change text alignment responsively?

What are Visually Hidden utilities?

Explain the .stretched-link utility.

How to use Text Truncation?

What does .col-12 .col-md-8 do?

How to push a column to the end of a row?

What is .vh-100?

What is .vw-100?

How to create a vertical divider?

What are Opacity utilities?

How to change the background-opacity?

What is Object Fit utility?

Explain .gap utility in BS5.

How to handle RTL (Right-to-Left) in Bootstrap 5?

What is a Card in Bootstrap?

How to create a Modal in Bootstrap?

What is the purpose of data-bs-toggle and data-bs-target?

How to make a Navbar responsive?

What is a Carousel in Bootstrap?

How to add indicators to a Carousel?

What is a Breadcrumb?

How to create a Button Group?

What is a Dropdown in Bootstrap?

How to position a Dropdown?

What is an Accordion?

Difference between .btn-primary and .btn-outline-primary?

How to change the size of a button?

What is a Badge in Bootstrap?

How to create a Pill Badge?

What is an Alert?

How to make an Alert dismissible?

What are Progress bars?

How to make a Progress bar striped or animated?

What is a List Group?

What is a Modal backdrop?

How to vertically center a Modal?

What is Scrollspy?

How to implement Tooltips?

Difference between Tooltip and Popover?

What is Offcanvas in Bootstrap 5?

How to create a Toast?