1. What is Bootstrap mainly used for?
Bootstrap is a front-end framework for building responsive and mobile-first websites quickly. It provides ready CSS and JavaScript components for layout and UI design.
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
Wipro · Bootstrap 5
Practice Bootstrap 5 questions specifically asked in Wipro interviews – ideal for online test preparation, technical rounds and final HR discussions.
Questions
21
Tagged for this company + subject
Company
Wipro
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 Wipro Bootstrap 5 round.
Bootstrap is a front-end framework for building responsive and mobile-first websites quickly. It provides ready CSS and JavaScript components for layout and UI design.
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.
Bootstrap 5 removed the dependency on jQuery but still uses Popper to handle the smart positioning and placement of dropdowns and tooltips.
Bootstrap uses a 12-column grid layout that allows you to combine or split columns easily. It makes responsive layouts simple and flexible.
Bootstrap uses a 12-column grid system that allows flexible layouts across screen sizes by dividing the page into equal columns.
The link tag is used to include the Bootstrap CSS file in the head section of HTML. The script tag is for JavaScript files.
<link href='https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css' rel='stylesheet'>
.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>
Bootstrap 5 does not bundle icons by default. Developers can use the separate Bootstrap Icons library or other icon sets like Font Awesome.
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>
Rows in Bootstrap use flexbox. The class .align-items-center centers items vertically within the row.
<div class='row align-items-center'>...</div>
Use dot h one to get the visual style of an H1 on any tag. It changes only the look, not the semantic meaning. For accessibility, keep real heading tags where structure matters.
<p class='h1'>Hero title look</p>
Dot lead makes a paragraph slightly larger with relaxed line height. It draws attention to the first line of copy, like a summary under a headline.
<p class='lead'>This is a short compelling intro.</p>
P stands for padding. Y targets top and bottom. The number is the scale step. So dot p y three adds balanced vertical space without extra CSS.
<div class='py-3'>Comfortable vertical padding</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>
Dot d dash none sets display to none. The element is removed from layout and from assistive tech. For responsive show or hide, combine with breakpoint variants like d dash md dash block.
<div class='d-none d-md-block'>Show on md and above</div>
In Bootstrap 5, use the attribute data-bs-toggle set to 'collapse' on the trigger element. Combine it with data-bs-target to link to the collapsible content you want to show or hide.
<button class='btn btn-primary' data-bs-toggle='collapse' data-bs-target='#faq1'>Toggle</button> <div id='faq1' class='collapse'>Answer text</div>
Use data-bs-target to link the button with the modal id, and set data-bs-toggle to 'modal' to activate it. Together they open the correct modal when clicked.
<button class='btn btn-primary' data-bs-toggle='modal' data-bs-target='#myModal'>Open</button>
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);Use data-bs-ride='carousel' to make the carousel start cycling automatically. You can also control the timing between slides with data-bs-interval.
<div id='hero' class='carousel slide' data-bs-ride='carousel'>...</div>