1. How many total columns are available in Bootstrap’s grid system?
Bootstrap uses a 12-column grid layout that allows you to combine or split columns easily. It makes responsive layouts simple and flexible.
Get the Preplance app for a seamless learning experience. Practice offline, get daily streaks, and stay ahead with real-time interview updates.
Get it on
Google Play
4.9/5 Rating on Store
Bootstrap 5 · Question Set
Grid System and Layouts interview questions for placements and exams.
Questions
15
Included in this set
Subject
Bootstrap 5
Explore more sets
Difficulty
Mixed
Level of this set
Go through each question and its explanation. Use this set as a focused practice pack for Bootstrap 5.
Bootstrap uses a 12-column grid layout that allows you to combine or split columns easily. It makes responsive layouts simple and flexible.
For complete preparation, combine this set with full subject-wise practice for Bootstrap 5. You can also explore other subjects and sets from the links below.
Bootstrap automatically wraps columns that exceed 12 units to a new line. This keeps layouts consistent across devices.
<div class='row'><div class='col-8'></div><div class='col-8'></div></div>
The row-cols utility allows you to define how many columns should appear in a row automatically. For example, .row-cols-3 divides each row into three equal columns without specifying .col classes for each item. It’s useful for card layouts and grids that adjust dynamically.
<div class='row row-cols-3'><div class='col'>A</div><div class='col'>B</div><div class='col'>C</div></div>
.col lets Bootstrap automatically distribute equal width columns within the row. It adapts according to available space.
<div class='row'><div class='col'>One</div><div class='col'>Two</div></div>
Bootstrap provides .order-* classes like .order-1 or .order-md-2 to rearrange columns responsively without changing HTML order.
<div class='col order-2 order-md-1'></div>
To nest a grid, place a new row inside an existing column. This allows sub-layouts inside sections like cards or sidebars. Nesting gives you precise control over complex designs while keeping alignment consistent with Bootstrap’s spacing system.
<div class='col'><div class='row'><div class='col'>Nested area</div></div></div>
.container provides a fixed-width layout that changes with breakpoints, making content centered with side padding. .container-fluid always takes the full width of the viewport. Choose .container for traditional centered designs and .container-fluid for edge-to-edge layouts.
<div class='container'>Fixed</div><div class='container-fluid'>Full width</div>
Rows must be placed inside a container or container-fluid to keep content aligned and add the correct padding for the grid system.
<div class='container'><div class='row'></div></div>
Rows act as wrappers for columns. They ensure proper negative margins and alignment so columns sit correctly in the grid.
<div class='row'><div class='col'>...</div></div>
The prefix md means medium breakpoint. A class .col-md-6 makes the element occupy 6 out of 12 columns on medium screens and above.
<div class='col-md-6'>Half width</div>
To nest grids, place a new .row inside a .col. This creates an independent grid within that column for more complex layouts.
<div class='col'><div class='row'><div class='col'>Nested</div></div></div>
Offset classes like .offset-md-3 create left margin space equal to 3 columns. It visually pushes the column to the right.
<div class='col-md-3 offset-md-3'></div>
Rows in Bootstrap use flexbox. The class .align-items-center centers items vertically within the row.
<div class='row align-items-center'>...</div>
Bootstrap 5 defines these breakpoints: Extra small (xs) for below 576 pixels, Small (sm) for 576 and above, Medium (md) for 768 and above, Large (lg) for 992 and above, Extra large (xl) for 1200 and above, and Extra extra large (xxl) for 1400 and above. These help apply classes that match screen sizes precisely.
Bootstrap grids use flex utilities. For horizontal alignment, use justify-content classes like .justify-content-center or .justify-content-between. For vertical alignment, use .align-items-center or .align-self-end. These make layouts clean and responsive without custom CSS.
<div class='row justify-content-center align-items-center'>...</div>