1. Which class creates a primary styled button in Bootstrap 5?
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>
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
Accenture · Bootstrap 5
Practice Bootstrap 5 questions specifically asked in Accenture interviews – ideal for online test preparation, technical rounds and final HR discussions.
Questions
18
Tagged for this company + subject
Company
Accenture
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 Accenture 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 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>
.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 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>