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
Bootstrap 5 · Question Set
Bootstrap Fundamentals interview questions for placements and exams.
Questions
15
Included in this set
Subject
Bootstrap 5
Explore more sets
Difficulty
Mixed
Level of this set
Go through each question and its explanation. Use this set as a focused practice pack for 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>
For complete preparation, combine this set with full subject-wise practice for Bootstrap 5. You can also explore other subjects and sets 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.
The lg breakpoint targets large devices, usually with a width of 992 pixels and above. Bootstrap provides responsive classes for each size.
Bootstrap uses a 12-column grid system that allows flexible layouts across screen sizes by dividing the page into equal columns.
Bootstrap 5 removed the jQuery dependency and replaced it with vanilla JavaScript for faster and lighter performance.
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'>
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>
.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.
You can include Bootstrap 5 by adding link and script tags from the CDN in your HTML. This method is quick and doesn't require downloading files. Browsers often cache CDN resources, so pages load faster across websites that use the same CDN link.
<link href='https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css' rel='stylesheet'> <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js'></script>
Mobile-first means the design starts from small screens and scales up for larger devices. Bootstrap's CSS is built for phones first, and responsive breakpoints apply styles as screen size increases. This approach ensures better performance and usability on mobile devices.
.container provides a fixed-width layout that adapts to breakpoints, while .container-fluid always spans the full width of the viewport. Use .container for centered content and .container-fluid when you need a layout that covers the entire screen width.
<div class='container'>Centered content</div> <div class='container-fluid'>Full width content</div>
The grid system divides a page into 12 columns. You wrap columns inside a .row inside a .container or .container-fluid. Each column uses classes like .col-sm-6 or .col-md-4 to define width across devices. The system ensures responsive alignment and stacking automatically.
<div class='container'><div class='row'><div class='col-sm-6'>Half</div><div class='col-sm-6'>Half</div></div></div>
Bootstrap 5 removed jQuery, added CSS custom properties, introduced the new utility API, improved grid and forms, and added a new offcanvas component. Internet Explorer support was dropped, making it modern and lighter for today's browsers.