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
Infosys · Bootstrap 5
Practice Bootstrap 5 questions specifically asked in Infosys interviews – ideal for online test preparation, technical rounds and final HR discussions.
Questions
21
Tagged for this company + subject
Company
Infosys
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 Infosys Bootstrap 5 round.
In Bootstrap 5, buttons use the .btn class along with a variant like .btn-primary to define color and style.
<button class='btn btn-primary'>Click</button>
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 .navbar class creates a responsive navigation header. It can contain brand, links, and toggler for collapsing menus.
<nav class='navbar navbar-expand-lg navbar-light bg-light'>...</nav>
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.
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.
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 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'>
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>
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 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>
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>
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>
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>