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
Cognizant · Bootstrap 5
Practice Bootstrap 5 questions specifically asked in Cognizant interviews – ideal for online test preparation, technical rounds and final HR discussions.
Questions
17
Tagged for this company + subject
Company
Cognizant
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 Cognizant Bootstrap 5 round.
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>
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.
.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>
The lg breakpoint targets large devices, usually with a width of 992 pixels and above. Bootstrap provides responsive classes for each size.
Bootstrap 5 removed the jQuery dependency and replaced it with vanilla JavaScript for faster and lighter performance.
The .container class gives a responsive fixed width layout that adapts to breakpoints. The .container-fluid class always spans the full width.
<div class='container'>Your content here</div>
Bootstrap 5 does not bundle icons by default. Developers can use the separate Bootstrap Icons library or other icon sets like Font Awesome.
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>
Rows in Bootstrap use flexbox. The class .align-items-center centers items vertically within the row.
<div class='row align-items-center'>...</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 visually dash hidden is the modern helper for accessible hidden text. It replaces older S R only patterns. Great for labels that should not show visually.
<span class='visually-hidden'>Open navigation menu</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>
Use the class .dropdown-menu to contain all dropdown items. The toggle element controls its visibility and positioning using Bootstrap’s dropdown script.
<div class='dropdown'> <button class='btn btn-secondary dropdown-toggle' data-bs-toggle='dropdown'>Menu</button> <ul class='dropdown-menu'><li><a class='dropdown-item' href='#'>Item</a></li></ul> </div>
Add data-bs-toggle='tooltip' to the element and provide a title for the text you want displayed. Initialize tooltips with JavaScript to make them functional.
const btn = document.querySelector('[data-bs-toggle="tooltip"]');
new bootstrap.Tooltip(btn);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>