1. What does the class .col without a number mean?
.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>
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
Tech Mahindra · Bootstrap 5
Practice Bootstrap 5 questions specifically asked in Tech Mahindra interviews – ideal for online test preparation, technical rounds and final HR discussions.
Questions
14
Tagged for this company + subject
Company
Tech Mahindra
View company-wise questions
Subject
Bootstrap 5
Explore topic-wise practice
Go through each question and its explanation. Use this page for targeted revision just before your Tech Mahindra Bootstrap 5 round.
.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>
For complete preparation, combine this company + subject page with full company-wise practice and subject-wise practice. You can also explore other companies and topics from the links below.
The lg breakpoint targets large devices, usually with a width of 992 pixels and above. Bootstrap provides responsive classes for each size.
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>
Bootstrap 5 removed the jQuery dependency and replaced it with vanilla JavaScript for faster and lighter performance.
.mt-3 applies margin-top spacing. The m stands for margin, t for top, and 3 for the spacing unit.
<div class='mt-3'>Top space added</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>
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>
Display headings are extra large, great for hero sections. Display one is the biggest. They are purely visual helpers and work well with responsive spacing utilities.
<h1 class='display-1'>Big landing title</h1>
Dot text dash muted lowers emphasis without breaking contrast too much. It is handy for meta info like timestamps and helper notes.
<small class='text-muted'>Updated 2 hours ago</small>
Dot m x auto sets left and right margins to auto. With a width set, the block centers in its container. It is a classic layout trick made easy.
<div class='mx-auto' style='width: 300px;'>Centered card</div>
Dot text dash nowrap keeps content on one line. Use it with width control or overflow helpers to avoid awkward horizontal scroll.
<span class='text-nowrap'>Order ID: 2025-00001</span>
Use the class .navbar-expand-lg to make the navbar collapse on smaller screens and expand from large screens (LG) and above. The breakpoint decides when the menu turns into a toggler.
<nav class='navbar navbar-expand-lg navbar-light bg-light'>...</nav>
Bootstrap 5 uses the attribute data-bs-dismiss. Set its value to 'modal', 'toast', or 'alert' depending on which component you want to close automatically.
<button class='btn-close' data-bs-dismiss='modal' aria-label='Close'></button>
The class .offcanvas is the base for offcanvas panels. You can control placement using modifiers such as .offcanvas-start or .offcanvas-end depending on the side you want it to appear from.
<div class='offcanvas offcanvas-start' id='filters'>...</div>