All questions
of 99What are the different ways to include Bootstrap in a project?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
There are several methods to include Bootstrap:
CDN (Content Delivery Network):
<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>Package Managers:
- npm:
npm install bootstrap - yarn:
yarn add bootstrap
- npm:
Download and Host Locally: Download compiled CSS and JS files from the official website
Source Files: Download Sass source files for custom builds
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
The model's verdict: “”
The interactive diagram is below the answer - jump to diagram ↓
This answer is explained by a shared concept diagram - open →
Explain the container classes in Bootstrap
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
Bootstrap provides three main container classes:
.container: Fixed-width container with responsive breakpoints- Provides max-width at different screen sizes
- Centers content horizontally
.container-fluid: Full-width container- Spans 100% of the viewport width
- No maximum width restrictions
.container-{breakpoint}(Bootstrap 4+): Responsive containers.container-sm,.container-md,.container-lg,.container-xl,.container-xxl- 100% width until specified breakpoint, then behaves like
.container
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
The model's verdict: “”
The interactive diagram is below the answer - jump to diagram ↓
This answer is explained by a shared concept diagram - open →
What is the Bootstrap grid system and how does it work?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
The Bootstrap grid system is a flexbox-based layout system that uses containers, rows, and columns to create responsive layouts.
Key concepts:
- 12-column system: Each row is divided into 12 equal columns
- Responsive breakpoints: xs, sm, md, lg, xl, xxl
- Mobile-first: Designed for mobile devices first, then scales up
Basic structure:
<div class="container">
<div class="row">
<div class="col-md-6">Column 1</div>
<div class="col-md-6">Column 2</div>
</div>
</div>
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
The model's verdict: “”
The interactive diagram is below the answer - jump to diagram ↓
This answer is explained by a shared concept diagram - open →
How do you create responsive columns using Bootstrap grid?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
Use column classes with breakpoint prefixes to create responsive layouts:
<div class="row">
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
<!-- 100% on xs, 50% on sm, 33.33% on md, 25% on lg and xl -->
</div>
</div>
Column behavior:
- Without breakpoint: applies to all screen sizes
- With breakpoint: applies to that breakpoint and larger
- Multiple classes: different behavior at different breakpoints
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
The model's verdict: “”
The interactive diagram is below the answer - jump to diagram ↓
This answer is explained by a shared concept diagram - open →
How do you handle equal-width columns in Bootstrap?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
Bootstrap provides several ways to create equal-width columns:
Basic equal columns:
<div class="row"> <div class="col">Column 1</div> <div class="col">Column 2</div> <div class="col">Column 3</div> </div>Equal columns with breakpoints:
<div class="row"> <div class="col-md">Column 1</div> <div class="col-md">Column 2</div> </div>Equal-width multi-row:
<div class="row"> <div class="col">Column</div> <div class="w-100"></div> <!-- Force next columns to new line --> <div class="col">Column</div> </div>
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
The model's verdict: “”
The interactive diagram is below the answer - jump to diagram ↓
This answer is explained by a shared concept diagram - open →
Explain Bootstrap button classes and their variations
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
Bootstrap provides various button styles and states:
Basic button types:
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-light">Light</button>
<button class="btn btn-dark">Dark</button>
Button variants:
- Outline buttons:
btn-outline-primary - Sizes:
btn-sm,btn-lg - Block buttons:
d-gridwrapper orw-100class - States:
active,disabled
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
The model's verdict: “”
The interactive diagram is below the answer - jump to diagram ↓
This answer is explained by a shared concept diagram - open →
How do you create responsive tables in Bootstrap?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
Bootstrap provides table classes for styling and responsive behavior:
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead class="table-dark">
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>john@example.com</td>
</tr>
</tbody>
</table>
</div>
Table classes:
table-striped: Alternate row colorstable-hover: Hover effect on rowstable-bordered: Add borderstable-responsive: Horizontal scrolling on small screenstable-{color}: Contextual background colors
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
The model's verdict: “”
The interactive diagram is below the answer - jump to diagram ↓
This answer is explained by a shared concept diagram - open →
How do you implement Bootstrap dropdowns?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
Dropdowns are toggleable overlays for displaying lists of links:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
Dropdown variations:
dropup,dropend,dropstart: Direction modifiersdropdown-menu-end: Right-aligned menudropdown-item-text: Non-interactive textdropdown-header: Section headers
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
The model's verdict: “”
The interactive diagram is below the answer - jump to diagram ↓
This answer is explained by a shared concept diagram - open →
What are Bootstrap alerts and how do you make them dismissible?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
Alerts provide contextual feedback messages:
<!-- Basic alert -->
<div class="alert alert-warning" role="alert">
This is a warning alert!
</div>
<!-- Dismissible alert -->
<div class="alert alert-danger alert-dismissible fade show" role="alert">
<strong>Error!</strong> Something went wrong.
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
<!-- Alert with additional content -->
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Well done!</h4>
<p class="mb-0">Success message with <a href="#" class="alert-link">a link</a>.</p>
</div>
Alert types: alert-primary, alert-secondary, alert-success, alert-danger, alert-warning, alert-info, alert-light, alert-dark.
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
The model's verdict: “”
The interactive diagram is below the answer - jump to diagram ↓
This answer is explained by a shared concept diagram - open →
What are Bootstrap's color utilities?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
Bootstrap provides text and background color utilities based on the theme colors:
<!-- Text colors -->
<p class="text-primary">Primary text</p>
<p class="text-success">Success text</p>
<p class="text-danger">Danger text</p>
<p class="text-muted">Muted text</p>
<!-- Background colors -->
<div class="bg-primary text-white">Primary background</div>
<div class="bg-light text-dark">Light background</div>
<!-- Contextual colors -->
<span class="badge bg-warning text-dark">Warning badge</span>
Available colors: primary, secondary, success, danger, warning, info, light, dark, body, muted, white, black-50, white-50.
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
The model's verdict: “”
The interactive diagram is below the answer - jump to diagram ↓
This answer is explained by a shared concept diagram - open →
How do you use Bootstrap's border utilities?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
Border utilities provide control over element borders:
<!-- Add borders -->
<div class="border">All borders</div>
<div class="border-top border-start">Top and left borders</div>
<!-- Remove borders -->
<div class="border border-top-0">All except top border</div>
<!-- Border colors -->
<div class="border border-primary">Primary border color</div>
<!-- Border radius -->
<div class="rounded">Rounded corners</div>
<div class="rounded-circle">Circular border</div>
<div class="rounded-pill">Pill-shaped border</div>
Border sides: border-top, border-end, border-bottom, border-start.
Border radius: rounded-top, rounded-end, rounded-bottom, rounded-start, rounded-circle, rounded-pill.
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
The model's verdict: “”
The interactive diagram is below the answer - jump to diagram ↓
This answer is explained by a shared concept diagram - open →
What are Bootstrap's text utilities?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
Text utilities control text styling, alignment, and behavior:
<!-- Text alignment -->
<p class="text-start">Left aligned text</p>
<p class="text-center">Center aligned text</p>
<p class="text-end">Right aligned text</p>
<!-- Text transformation -->
<p class="text-lowercase">LOWERCASE TEXT</p>
<p class="text-uppercase">uppercase text</p>
<p class="text-capitalize">capitalize each word</p>
<!-- Font weight and style -->
<p class="fw-bold">Bold text</p>
<p class="fw-normal">Normal weight</p>
<p class="fst-italic">Italic text</p>
<!-- Text decoration -->
<p class="text-decoration-underline">Underlined text</p>
<p class="text-decoration-none">No decoration</p>
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
The model's verdict: “”
The interactive diagram is below the answer - jump to diagram ↓
This answer is explained by a shared concept diagram - open →
How do you create responsive images in Bootstrap?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
Bootstrap provides classes for responsive image behavior:
<!-- Responsive image that scales with parent width -->
<img src="image.jpg" class="img-responsive" alt="Responsive image">
<!-- Bootstrap 4+ uses img-fluid -->
<img src="image.jpg" class="img-fluid" alt="Responsive image">
<!-- Image shapes -->
<img src="image.jpg" class="img-thumbnail" alt="Thumbnail">
<img src="image.jpg" class="rounded" alt="Rounded corners">
<img src="image.jpg" class="rounded-circle" alt="Circular image">
<!-- Figure with caption -->
<figure class="figure">
<img src="image.jpg" class="figure-img img-fluid rounded" alt="Figure">
<figcaption class="figure-caption">Image caption</figcaption>
</figure>
The img-fluid class applies max-width: 100% and height: auto for responsive scaling.
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
The model's verdict: “”
The interactive diagram is below the answer - jump to diagram ↓
This answer is explained by a shared concept diagram - open →
What is the difference between `.container`, `.container-fluid`, and `.container-{breakpoint}`?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
These are the three main container types in Bootstrap:
.container:
- Fixed max-width at each breakpoint
- Responsive horizontal margins that center the content
- Max-widths: 540px (sm), 720px (md), 960px (lg), 1140px (xl), 1320px (xxl)
.container-fluid:
- 100% width at all breakpoints
- No maximum width restrictions
- Edge-to-edge content spanning full viewport width
.container-{breakpoint}:
- 100% width until the specified breakpoint
- Then behaves like
.containerwith fixed max-width - Available:
.container-sm,.container-md,.container-lg,.container-xl,.container-xxl
<div class="container">Fixed-width responsive container</div>
<div class="container-fluid">Full-width container</div>
<div class="container-md">Fluid until medium breakpoint, then fixed</div>
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
The model's verdict: “”
The interactive diagram is below the answer - jump to diagram ↓
This answer is explained by a shared concept diagram - open →
What are Bootstrap badges and how do you style them?
What are Bootstrap list groups and their variations?
How do you use Bootstrap's progress bars?
What are Bootstrap spinners and when should you use them?
How do you implement breadcrumb navigation in Bootstrap?
How do you create responsive pagination in Bootstrap?
How do you use Bootstrap's close button component?
What are Bootstrap placeholders and how do you use them?
How do you work with Bootstrap's range input styling?
What are the differences between Bootstrap's margin and padding utilities?
What is the difference between Bootstrap 4 and Bootstrap 5?
Explain Bootstrap's breakpoint system
What are offset classes and how are they used?
Explain the difference between `container`, `container-fluid`, and nested containers
What is the purpose of the `row-cols` classes?
How do you vertically align content in Bootstrap grid?
How do you create a responsive navigation bar in Bootstrap?
How do you create and customize Bootstrap cards?
What are Bootstrap modals and how do you implement them?
Explain Bootstrap form controls and validation classes
Explain Bootstrap's spacing utilities
How do Bootstrap display utilities work?
How do you use Bootstrap's flexbox utilities?
Explain Bootstrap's position utilities
How do you control overflow with Bootstrap utilities?
How does Bootstrap implement mobile-first design?
Explain how to hide/show elements at different breakpoints
What are responsive embed classes in Bootstrap?
How do you use responsive font sizing in Bootstrap?
How do you implement responsive spacing in Bootstrap?
How do you initialize Bootstrap JavaScript components programmatically?
How do you work with Bootstrap tooltips and popovers?
How do you implement Bootstrap carousel with custom controls?
What are Bootstrap collapse components and how are they used?
How do you implement Bootstrap tabs programmatically?
How do you override Bootstrap component styles?
How do you debug common Bootstrap issues?
How do you create equal height columns in Bootstrap?
What are Bootstrap's form validation classes and how do you use them?
How do you use Bootstrap's scrollspy component?
How do you implement Bootstrap's offcanvas component?
What are the different button group variations in Bootstrap?
How do you create responsive tables that work well on mobile devices?
How do you implement Bootstrap's toast notifications?
What are the different input group variations in Bootstrap?
How do you implement accordion components in Bootstrap?
How do you implement floating labels in Bootstrap forms?
How do you create custom file upload styling with Bootstrap?
What are Bootstrap's visibility utilities and how do you use them?
How do you implement Bootstrap's stretched links?
How do you create a responsive video player container using Bootstrap?
How do you implement Bootstrap's ratio utilities for different aspect ratios?
What are Bootstrap's object-fit utilities and how do you use them?
How do you create sticky elements with Bootstrap?
How do you implement Bootstrap's stack utilities?
What are the new features in Bootstrap 5?
How do you use Bootstrap's CSS custom properties for theming?
Explain Bootstrap's event system for JavaScript components
How do you handle form validation with Bootstrap JavaScript?
How do you customize Bootstrap using Sass variables?
How do you create a custom Bootstrap theme?
How do you use Bootstrap's utility API?
How do you create custom Bootstrap components?
How do you implement dark mode in Bootstrap?
How do you optimize Bootstrap for production?
How do you integrate Bootstrap with modern JavaScript frameworks?
How do you handle Bootstrap JavaScript without jQuery in Bootstrap 5?
How do you implement custom breakpoints in Bootstrap?
How do you create responsive typography with Bootstrap?
How do you handle Bootstrap's CSS custom properties (CSS variables)?
How do you implement advanced grid layouts with Bootstrap?
How do you create a custom Bootstrap build pipeline?
What are the best practices for using Bootstrap in large applications?
How do you optimize Bootstrap performance?
How do you ensure accessibility with Bootstrap components?
How do you handle Bootstrap version migrations?
How do you implement Bootstrap with CSS-in-JS libraries?
How do you create a component library based on Bootstrap?
How do you create a full-height layout with Bootstrap?
How do you handle Bootstrap component conflicts and CSS specificity issues?
What are some common Bootstrap performance optimization techniques?
How do you ensure Bootstrap compatibility across different browsers and devices?
What is the utilities API in Bootstrap 5?
How do you implement color modes (dark/light theme) in Bootstrap 5.3+?
How do you optimize Bootstrap for production and reduce bundle size?
This answer is part of Pro.
The full written answer, with the trade-offs and follow-ups an interviewer will probe.
No matches
Try a different filter or search term.
Bootstrap cheatsheet
Bootstrap Interview Cheat Sheet
- Summary01
- 1. Bootstrap Basics02
- 2. Grid System03
- 3. Typography04
- 4. Colors & Background05
- 5. Components06
- 6. Utilities07
- 7. Tables08
- 8. Images09
- 9. JavaScript Components10
- 10. Responsive Utilities11
- 11. Best Practices12
- + 2 more inside
85 of 99 Bootstrap answers are gated.
Full answers, code samples, AI explanations - simpler, deeper, or as an interactive diagram. Cancel anytime.
- Full answers + code
- AI explain - simpler, deeper, or visualized
- 1,000 AI credits / month
- Cancel anytime
Change topic
Pick a different technology or stack. Your current topic stays put until you choose a new one.
MEAN
MongoDB, Express, Angular, Node.jsMERN
MongoDB, Express, React, Node.jsLAMP
Linux, Apache, MySQL, PHPRuby on Rails
Convention over ConfigurationJAM
JavaScript, APIs, and MarkupServerless on AWS
Serverless Architecture on AWSInterviewers also test these - they're common to every stack, whichever one you picked above.
Flutter Mobile
Flutter Cross-Platform Mobile DevelopmentInterviewers also test these - they're common to every stack, whichever one you picked above.
Spring Boot
Enterprise Java Development.NET
Microsoft EcosystemVue
Vue.js, Vite, TypeScript, Tailwind, Node.jsGo Backend
Golang, gRPC, PostgreSQL, Redis, RabbitMQFastAPI
Python, FastAPI, SQLAlchemy, PostgreSQLReact Native
React, TypeScript, Redux, FirebaseiOS Native
Swift, SwiftUI, UIKit, FirebaseAndroid Native
Java, Jetpack Compose, FirebaseWeb3 / Ethereum
Solidity, Ethereum, Hardhat, FoundryDevOps / Platform
Docker, Kubernetes, Terraform, CI/CDCore SWE Interview Prep
Data structures, algorithms, OS, concurrency, networking, gitInterviewers also test these - they're common to every stack, whichever one you picked above.
Interviewers also test these - they're common to every stack, whichever one you picked above.