⚡ Match Highlights: bootstrap/bootstrap interview questions and answers

Bootstrap has become one of the most popular front-end frameworks for building responsive and visually appealing web applications. It provides a collection of tools and components for creating user-friendly and interactive interfaces, helping developers build websites quickly and efficiently.

Beginners Questions

1. What is Bootstrap?

Bootstrap is a free and open-source tool collection used for creating responsive websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. Bootstrap is used for creating tables, forms, buttons, carousels, navigation bars, and images.

2. What are the features of Bootstrap?

Some key features of Bootstrap are:

Open-source and free to use.
Mobile-first framework for building responsive websites.
Responsive grid system for creating flexible layouts.
Cross-browser compatibility across modern browsers.
Prebuilt UI components such as buttons, forms, cards, modals, and navigation bars.
Utility classes for spacing, colors, typography, and alignment.
Easy to learn and use, enabling rapid UI development.
Customizable using Sass variables and Bootstrap's configuration options.

3. How many different layouts does Bootstrap have?

Bootstrap provides two main layout containers for creating page layouts:

.container: A responsive fixed-width container whose width changes based on the screen size.
.container-fluid: A full-width container that always spans 100% of the viewport width.

4. Give an example of a basic grid structure in Bootstrap.

Basic grid structure

HTML

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Grid Example</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>

<body>

    <div class="container">
        <div class="row">
            <div class="col-md-4 bg-primary text-white text-center p-3">Column 1</div>
            <div class="col-md-4 bg-success text-white text-center p-3">Column 2</div>
            <div class="col-md-4 bg-warning text-dark text-center p-3">Column 3</div>
        </div>
    </div>
</body>

Screenshot-2025-02-25-114605 — Basic Grid Structure

5. What is a Bootstrap progress bar?

A Bootstrap progress bar is a UI component used to display the completion status of a task or process. It is created using the .progress and .progress-bar classes, and the progress is represented by setting the width of the progress bar.

6. Why Bootstrap is preferred for website development over any other platform?

Bootstrap is widely preferred because it simplifies and speeds up responsive web development. Some of its key advantages are:

Mobile-first framework for building responsive websites.
Responsive grid system for creating flexible layouts.
Cross-browser compatibility with modern browsers such as Chrome, Firefox, Safari, and Edge.
Prebuilt UI components like buttons, forms, cards, modals, and navigation bars.
Utility classes for spacing, colors, typography, and alignment, reducing the need for custom CSS.
Easy to learn and use, especially for developers familiar with HTML, CSS, and JavaScript.
Faster development with consistent UI design across projects.
Large community support and extensive documentation.

7. What is the difference between Bootstrap and Foundation?

Bootstrap	Foundation
Developed by Twitter	Developed by ZURB
Most widely used CSS framework	Less popular but highly customizable.
Provides many prebuilt UI components and utility classes.	Focuses on flexibility and modularity.
Uses a responsive 12-column grid system with predefined breakpoints.	Provides a flexible grid system with customizable breakpoints.
Easier to learn and faster for rapid development.	Offers greater customization but has a steeper learning curve.
Bootstrap 5 supports modern browsers (Internet Explorer is not supported).	Modern Foundation versions also target modern browsers (Internet Explorer is not supported).

8. What are collapsing elements in Bootstrap?

A collapsing element in Bootstrap is a component that shows or hides content when triggered, usually by a button or link click. It helps organize large amounts of content, making the user interface cleaner and more interactive.

Bootstrap provides the Collapse component, which can be implemented using the collapse class and the data-bs-toggle="collapse" attribute.

HTML

<button
  class="btn btn-primary"
  data-bs-toggle="collapse"
  data-bs-target="#demo">
  Toggle Content
</button>

<div id="demo" class="collapse">
  This content can be expanded or collapsed.
</div>

9. Suggests the lists that Bootstrap supports.

Bootstrap provides several classes and components to style HTML lists:

Unordered List (<ul>): Displays items with bullet points.
Ordered List (<ol>): Displays items with numbers or letters.
Description List (<dl>): Displays terms and their descriptions.
.list-unstyled: Removes the default bullets and left padding from a list.
.list-inline: Displays list items horizontally.
.list-group: Creates styled and interactive lists commonly used for menus, navigation, and grouped content.

10. What is a bootstrap card and how to create it?

In Boostrap 5, the card is the bordered box which contains the padding around the content.

Structure of a Bootrap Card

.card: The main container.
.card-header(Optional): The header section of the card.
.card-body: The main content area where text, images, and buttons go.
.card-footer(Optional): Footer section.

HTML

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <style>
        body {
            background-color: #f4f6f7; /* Light background */
        }
        .profile-card {
            width: 300px;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        .profile-img {
            width: 100%;
            height: 250px;
            object-fit: cover;
        }
        .card-body {
            background-color: #e3f2fd; /* Light blue background */
        }
    </style>
</head>
<body>

<div class="container d-flex justify-content-center align-items-center vh-100">
    <div class="card profile-card text-center">
        <img src="image.png/images.jfif" class="profile-img" alt="Profile Image">
        <div class="card-body">
            <h5 class="card-title">Anjali Sharma</h5>
            <p class="card-text">Software Engineer</p>
            <a href="#" class="btn btn-primary">See Profile</a>
        </div>
    </div>
</div>
</body>

Output:

11. Explain media objects in Bootstrap.

A Media Object was a Bootstrap component used to align images, videos, or other media alongside textual content, making it useful for layouts such as comments, blog posts, and user profiles.

It used the following classes:

.media: Main container for the media object.
.media-body: Holds the textual content beside the media.

12. Why is Jumbotron used in Bootstrap, and how do you add it?

A Jumbotron was a Bootstrap component used to create a large, prominent section for showcasing important content such as page headers, welcome messages, or call-to-action sections.

Bootstrap 4 Example:

<div class="jumbotron">
  <h1>Welcome!</h1>
  <p>This is a Bootstrap Jumbotron.</p>
</div>

Note: The Jumbotron component was removed in Bootstrap 5. Its functionality can be recreated using utility classes.

Bootstrap 5 Alternative:

<div class="p-5 mb-4 bg-light rounded-3">
  <h1 class="display-4">Welcome!</h1>
  <p>This is a Bootstrap 5 Jumbotron alternative.</p>
</div>

13. Explain the uses of the carousel plugin in Bootstrap.

The Bootstrap Carousel is a slideshow component used to cycle through images, text, or other content. It is commonly used to create image sliders, banners, and featured content sections on websites.

Display image slideshows.
Showcase featured products or services.
Create promotional banners.
Display text or mixed content with images.
Support automatic sliding or manual navigation using controls and indicators.

14. How can you make responsive images?

In Bootstrap 4 and Bootstrap 5, responsive images are created by adding the .img-fluid class to the <img> element. This class applies:

max-width: 100%;
height: auto;

As a result, the image automatically scales to fit its parent container while maintaining its aspect ratio.

A Bootstrap Navbar is a responsive navigation component used to create menus, links, dropdowns, search forms, and branding for a website. It automatically collapses on smaller screens and expands on larger screens.

HTML

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">MySite</a>

    <button
      class="navbar-toggler"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" href="#">Home</a>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Navbar Features:

Responsive navigation.
Dropdown menus.
Search forms.
Brand logo or title.
Fixed or sticky navigation bars.

16. What is a Bootstrap Container?

Bootstrap Containers are the most basic layout element and are very essential for basic building blocks of bootstrap that wrap a page’s content. By using container we can align content according to the viewport or given device. We can define container within the container class (.container). In other words, we can also say that containers are established the width for the layout to give the content. All the elements and content are added within the container.

17. What is Grid System in Bootstrap?

Bootstrap Grid System divides up to 12 columns across the page. You can use each of them individually or also can be merge together for wider columns. You can use 12 columns each of width 1 or use 4 columns each of width 3 or any other combination.

18. What are the key components of Bootstrap?

The key components of Bootstrap are:

CSS: Provides prebuilt styles for typography, forms, tables, buttons, and other UI elements.
Grid System: A responsive 12-column layout system used to build flexible page layouts.
Components: Ready-to-use UI components such as navbars, cards, modals, alerts, buttons, carousels, and dropdowns.
JavaScript Components: Interactive components such as modals, tooltips, accordions, carousels, and offcanvas menus. (Bootstrap 5 uses vanilla JavaScript and does not require jQuery.)
Utilities: Utility classes for spacing, colors, typography, display, flexbox, positioning, and more.
Customization: Bootstrap can be customized using Sass variables, utility APIs, and configuration options.

19. What are Glyphicons? How to use them?

Glyphicons are icon fonts that were included with Bootstrap 3. They provided scalable vector icons that could be used in buttons, navigation bars, forms, and other UI components.

Bootstrap 3 Example:

<span class="glyphicon glyphicon-search"></span>

Note: Glyphicons were removed in Bootstrap 4 and Bootstrap 5. Modern Bootstrap applications use external icon libraries such as Bootstrap Icons, Font Awesome, or Material Icons.

Bootstrap Icons Example (Bootstrap 5):

<i class="bi bi-search"></i>

20. Write the steps to create basic or vertical forms using Bootstrap?

A vertical form is the default form layout in Bootstrap, where form controls are displayed one below another.

Steps:

Include the Bootstrap CSS using a CDN or install Bootstrap in your project.
Create a <form> element.
Add form labels using the .form-label class.
Add input fields using the .form-control class.
Add other form elements such as dropdowns using .form-select if required.
Add a submit button using the .btn class.

21. What is the difference between .container and .container-fluid in Bootstrap?

.container: Fixed-width container that adapts based on the screen size.
.container-fluid: Full-width container that spans 100% of the screen width.

22. What are the input groups in Bootstrap?

Input groups in Bootstrap are used to extend form controls by adding text, icons, buttons, or checkboxes before or after an input field. They help create more interactive and user-friendly forms.

The commonly used classes are:

.input-group: Wraps the input and its associated elements.
.input-group-text: Displays text, icons, or symbols before or after the input field.

Note: In Bootstrap 5, the .input-group-prepend and .input-group-append classes have been removed. Simply place the text or button directly inside the .input-group.

Intermediate Questions

A Bootstrap breadcrumb is a navigation component that displays the current page's location within a website's hierarchy. It helps users understand their current location and navigate back to previous pages.

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item">
      <a href="#">Home</a>
    </li>
    <li class="breadcrumb-item">
      <a href="#">Products</a>
    </li>
    <li class="breadcrumb-item active" aria-current="page">
      Laptops
    </li>
  </ol>
</nav>

24. What are bootstrap alerts and how will you create them?

Bootstrap alerts are components used to display contextual feedback messages such as success, error, warning, or informational messages. They help notify users about the result of an action.

To create an alert:

Create a <div> element.
Add the .alert class.
Add a contextual class such as .alert-primary, .alert-success, .alert-warning, or .alert-danger.
(Optional) Add a close button using .btn-close and .alert-dismissible.

25. What are the steps to create a progress bar using bootstrap?

To create a progress bar:

Use class progress inside a div class.
Inside the already made div class, add another div tag with a class .progress-bar.
Mention the progress of the bar under a style attribute using the width as a percentage. For eg- style=”width:50%

26. Difference between Bootstrap 4 and Bootstrap 5.

Bootstrap 4	Bootstrap 5
Requires jQuery for JavaScript components.	Uses vanilla JavaScript (no jQuery dependency).
Uses .row and .col-* classes with separate gutter utilities.	Introduces .g-* gutter utilities and an improved grid system.
Flexbox-based layout.	Enhanced Flexbox support with additional utility classes.
Uses custom form controls that rely on older implementations.	Redesigned and simplified form controls with no jQuery dependency.
Supports .card-columns for masonry-style layouts.	.card-columns removed; use CSS Grid or Masonry instead.
Limited utility classes and color options.	Expanded utility classes and a larger color palette.

Tooltip	Popover
Displays a small text message.	Displays more detailed content, such as text, headings, or HTML.
Typically triggered by hover or focus.	Typically triggered by click (can also be configured for other triggers).
Used to provide brief hints or descriptions.	Used to display additional information or interactive content.
Usually contains only plain text.	Can contain a title, body content, and HTML.
Placement can be top, bottom, start (left), or end (right).	Placement can also be top, bottom, start (left), or end (right).

28. What is column ordering in Bootstrap?

Column ordering in Bootstrap allows you to change the visual order of columns in the grid system without changing the HTML structure. It uses order-* utility classes to rearrange columns based on different screen sizes, making layouts more responsive.

29. What Are Bootstrap Media Queries?

Bootstrap media queries are CSS rules used to apply different styles based on the viewport size. They enable responsive layouts by adjusting the design for different devices such as mobiles, tablets, laptops, and desktops.

Bootstrap follows a mobile-first approach and primarily uses min-width media queries.

The default Bootstrap 5 breakpoints are:

Breakpoint	Viewport Width
sm	≥ 576px
md	≥ 768px
lg	≥ 992px
xl	≥ 1200px
xxl	≥ 1400px

30. What is Normalize in Bootstrap?

Normalize.css is a CSS library that makes the default styling of HTML elements consistent across different browsers. Instead of removing all browser styles like a CSS reset, it preserves useful defaults while fixing browser inconsistencies.

Note: Bootstrap 5 uses Reboot, which is built on Normalize.css and adds additional styles to provide a consistent and modern base for web pages.

31. In Bootstrap, what are the two method for displaying code?

Bootstrap provides styles for displaying code using standard HTML tags:

Method 1: Inline Code (<code>)

Used to display a small snippet of code within a line of text.
The code is wrapped inside the <code> tag.

<p>Use the <code>container</code> class to create a responsive layout.</p>

Method 2: Code Block (<pre>)

Used to display multiple lines of code.
The <pre> tag preserves whitespace and line breaks.

<pre>
function greet() {
  console.log("Hello, Bootstrap!");
}
</pre>

32. What are Bootstrap panels? How to create a Bootstrap panel with a heading.

A Panel was a Bootstrap 3 component used to display content inside a bordered box. It could contain a header, body, and footer.

Note: Panels were removed in Bootstrap 4 and Bootstrap 5 and replaced by the more flexible Card component.

Bootstrap 3 Panel Example:

<div class="panel panel-default">
  <div class="panel-heading">
    Panel Heading
  </div>

  <div class="panel-body">
    Panel Content
  </div>
</div>

Bootstrap 5 Equivalent (Card):

<div class="card">
  <div class="card-header">
    Card Heading
  </div>

  <div class="card-body">
    Card Content
  </div>
</div>

33. Explain the purpose of using the Scrollspy plugin.

The Scrollspy plugin automatically updates the active navigation link based on the user's current scroll position. It is commonly used in single-page applications, documentation websites, and long pages with multiple sections to help users identify their current location.

Scrollspy can be used with:

Horizontal navigation bars
Vertical navigation menus

34. Why do we use the affix plugin in Bootstrap?

The Affix plugin was a Bootstrap 3 feature used to pin an element (such as a navigation bar or sidebar) to a fixed position after the user scrolled past a specified point. It allowed elements to remain visible while the rest of the page continued scrolling.

Common uses included:

Sticky navigation bars.
Sticky sidebars.
Social media icon panels.

Note: The Affix plugin was removed in Bootstrap 4 and Bootstrap 5. Modern Bootstrap recommends using CSS position: sticky, position: fixed, or custom JavaScript to achieve the same behavior.

35. What are the different types of buttons available in Bootstrap?

Bootstrap offers a variety of button classes:

.btn-primary: Blue-colored button.
.btn-secondary: Gray button.
.btn-success: Green button.
.btn-danger: Red button.
.btn-warning: Yellow button.
.btn-info: Light blue button.
.btn-light: Light gray button.
.btn-dark: Dark button.
.btn-link: Styled as a link.

36. Why do we need to use Bootstrap?

Bootstrap is widely used because it simplifies and speeds up frontend development. Its main advantages are:

Faster and easier web development with prebuilt components.
Mobile-first framework for building responsive websites.
Responsive grid system for creating flexible layouts.
Cross-browser compatibility across modern browsers.
Prebuilt UI components such as buttons, forms, cards, modals, and navigation bars.
Utility classes for spacing, colors, typography, and alignment.
Consistent design across different devices and screen sizes.
Easy to customize using Sass variables and Bootstrap utilities.

37. How to create thumbnails using Bootstrap?

In Bootstrap 5, image thumbnails are created using the .img-thumbnail class. This class adds a border, padding, and rounded corners to an image.

Steps:

Include the Bootstrap CSS file in your project.
Add an <img> element.
Apply the .img-thumbnail class to the image.

38. What do you mean by the Bootstrap well?

A Well was a Bootstrap 3 component used to make content appear inside an inset, padded container. It was commonly used to highlight important information or visually separate content from the rest of the page.

Note: The Well (.well) component was removed in Bootstrap 4 and Bootstrap 5. Modern Bootstrap recommends using Cards, Borders, Shadows, and Spacing utility classes to achieve a similar effect.

39. What is a Button Group, and what is the class for a basic Button Group?

A Button Group in Bootstrap is a collection of buttons placed together in a horizontal or vertical arrangement. Button groups allow you to create better UI for interactive elements by keeping related buttons aligned together. The .btn-group class is used for basic button groups. You can use the class .btn to wrap a set of buttons in .btn-group.

Screenshot-2025-02-25-153014 — Grouped Button

Advanced Questions

40. What are the two types of spinners that you can create using Bootstrap?

The two types of spinners that you can create using Bootstrap are border spinners and growing spinners.

Border spinners: The default spinner type in Bootstrap, A lightweight loading indicator, and A spinning border around a central point.

<div class= "spinner-border" ></div>

Growing spinners: An optional type of spinner in Bootstrap. A throbber style indicator. They Repeats growth, but doesn't technically spin.

<div class= "spinner-grow" ></div>

41. Discuss the Bootstrap table and various classes that can change the table's design.

Bootstrap provides several classes to style tables, making them more responsive and visually appealing.

Some commonly used table classes are:

.table : Creates a basic Bootstrap table.
.table-striped : Adds zebra-striping to alternate rows.
.table-bordered : Adds borders to the table and all cells.
.table-borderless : Removes all table borders.
.table-hover : Highlights a row when the mouse pointer hovers over it.
.table-dark : Applies a dark theme to the table.
.table-sm : Creates a compact table with reduced padding.
.table-responsive : Makes the table horizontally scrollable on smaller screens.

42. Write the HTML code to create a basic toast.

Toast is used to create something like an alert box which is shown for a short time like a couple of seconds when something happens. Like when the user clicks on a button or submits a form and many other actions.

HTML

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /* Customizing the Toast */
        .toast {
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .toast-header {
            background-color: #007bff;
            color: white;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }

        .toast-body {
            font-size: 16px;
            padding: 12px;
        }

        /* Close button */
        .btn-close {
            color: white;
        }

        /* Adding colors to body and header for different toast types */
        .toast-success {
            background-color: #28a745;
        }

        .toast-danger {
            background-color: #dc3545;
        }

        .toast-warning {
            background-color: #ffc107;
        }

        .toast-info {
            background-color: #17a2b8;
        }

        .toast-header .me-auto {
            font-weight: bold;
        }
    </style>
<body>

    <!-- Toast Container -->
    <div class="toast-container position-fixed top-0 end-0 p-3">
        <!-- Basic Toast (success) -->
        <div class="toast toast-success" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header">
                <strong class="me-auto">Success</strong>
                <small>Just now</small>
                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body">
                This is a success toast notification with custom colors.
            </div>
        </div>

        <!-- Basic Toast (danger) -->
        <div class="toast toast-danger" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header">
                <strong class="me-auto">Error</strong>
                <small>Just now</small>
                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body">
                This is a danger toast notification to highlight an error.
            </div>
        </div>

        <!-- Basic Toast (warning) -->
        <div class="toast toast-warning" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header">
                <strong class="me-auto">Warning</strong>
                <small>Just now</small>
                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body">
                This is a warning toast notification for caution.
            </div>
        </div>

        <!-- Basic Toast (info) -->
        <div class="toast toast-info" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header">
                <strong class="me-auto">Info</strong>
                <small>Just now</small>
                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body">
                This is an info toast notification providing some details.
            </div>
        </div>
    </div>
</body>

</html>

Output

Screenshot-2025-02-25-155832 — Basic Toast

43. What are badges? Which class will you use to make your badge look more rounded?

Badges are small UI components used to display counts, notifications, labels, or status indicators. They are commonly used for unread messages, notifications, and category labels.

To create a badge, use the .badge class along with a contextual background class such as .bg-primary, .bg-success, or .bg-danger.

To make a badge pill-shaped (more rounded) in Bootstrap 5, use the .rounded-pill class.

Note: The .badge-pill class was used in Bootstrap 4 but was removed in Bootstrap 5. It has been replaced by .rounded-pill.

44. What are the steps to create an animated progress bar using bootstrap?

Steps:

Include the Bootstrap CSS and JavaScript files in your project.
Create a <div> with the .progress class.
Inside it, add another <div> with the .progress-bar, .progress-bar-striped, and .progress-bar-animated classes.
Set the progress using the width style property.

Example:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
  >
</head>

<body>

<div class="container mt-4">
  <div class="progress">
    <div
      class="progress-bar progress-bar-striped progress-bar-animated bg-success"
      role="progressbar"
      style="width: 60%;">
      60%
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>

The modal component is a dialog box/popup window that is displayed on top of the current page, once the trigger button is clicked. However, clicking on the modal’s backdrop automatically closes the modal. Also, it must be kept in mind that Bootstrap doesn’t support nested modals as they create a bad UI experience for the user. Therefore, only one modal window is supported at a time.

46. What will be the output of the below code and why?

<div class="progress">
    <div class="progress-bar bg-success" style="width: 65%">
        <span class="sr-only">75% successfully completed</span>
    </div>
    <div class="progress-bar bg-warning" style="width: 20%">
        <span class="sr-only">30% completed with warnings</span>
    </div>
    <div class="progress-bar bg-danger" style="width: 15%">
        <span class="sr-only">15% did not complete</span>
    </div>
</div>

If we use the same .progress parent element for numerous bars, Bootstrap will combine them into a single progress bar. The sum of the progress bar in Bootstrap is 100 percent, as we all know. As a result, the progress bar will display the full width and fully populated result.

47. Explain what is list group in Bootstrap and what is the use of it?

A List Group is a Bootstrap component used to display a series of related content in an organized and styled manner. It is commonly used for menus, navigation lists, notifications, task lists, and grouped information.

Some features of List Groups are:

Display a list of related items.
Support text, links, and buttons.
Allow active and disabled items.
Can include badges and other Bootstrap components.

Wrap the child elements inside a .dropdown class.
We can use either a button or an anchor tag for toggling. For toggling we need to use the .dropdown-toggle class and add data-bs-toggle =” dropdown” element to the parent class.
For making the dropdown menu items use the .dropdown-menu class. Use .dropdown-item class with each item names.

49. Define lead body copy in Bootstrap.

Lead Body Copy is used to add emphasis to a paragraph in a body tag. The paragraph tags are inside the Body tags. This gives us a lightweight, large font size and a tall line height. This feature can be used using the pre-defined class “.lead” and see its functionality.

50. Name some alternatives to Bootstrap.

Some popular alternatives to Bootstrap are:

Foundation : A responsive frontend framework with a strong focus on flexibility and customization.
Bulma : A modern CSS framework based on Flexbox.
Materialize : A frontend framework based on Google's Material Design.
Material Design Lite (MDL) : A lightweight implementation of Material Design components.
Skeleton : A minimal CSS framework for small and simple projects.
Pure CSS : A lightweight collection of responsive CSS modules developed by Yahoo.
Semantic UI : A framework that uses human-readable class names and provides rich UI components.
Tailwind CSS : A utility-first CSS framework for building highly customizable user interfaces. (A very popular modern alternative.)

51. What is bootstrap pagination and how are they classified?

Pagination in Bootstrap is a way to link web pages together using a series of connected links. It's used to navigate between pages on a website.

Add the .pagination class to an <ul> tag
Use the .page-item class to style each pagination item
Use the .page-link class to style the link in each pagination item

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<style>
    .pagination {
        display: inline-flex;
        list-style-type: none;
        padding: 0;
    }

    .page-item {
        margin: 0 5px;
    }

    .page-link {
        color: blue;
        text-decoration: none;
        padding: 8px 16px;
    }

    .page-link:hover {
        background-color: #f1f1f1;
    }

    .active .page-link {
        font-weight: bold;
        background-color: #e0e0e0;
    }
</style>

<body>

    <div class="container text-center mt-5">
        <ul class="pagination">
            <li class="page-item">
                <a class="page-link" href="#">Previous</a>
            </li>
            <li class="page-item active">
                <a class="page-link" href="#">1</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">2</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">3</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">4</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">Next</a>
            </li>
        </ul>
    </div>
</body>

Output:

Bootstrap Interview Questions And Answers

Beginners Questions

1. What is Bootstrap?

2. What are the features of Bootstrap?

3. How many different layouts does Bootstrap have?

4. Give an example of a basic grid structure in Bootstrap.

5. What is a Bootstrap progress bar?

6. Why Bootstrap is preferred for website development over any other platform?

7. What is the difference between Bootstrap and Foundation?

8. What are collapsing elements in Bootstrap?

9. Suggests the lists that Bootstrap supports.

10. What is a bootstrap card and how to create it?

11. Explain media objects in Bootstrap.

12. Why is Jumbotron used in Bootstrap, and how do you add it?

13. Explain the uses of the carousel plugin in Bootstrap.

14. How can you make responsive images?

15. How can you create a navbar in Bootstrap?

16. What is a Bootstrap Container?

17. What is Grid System in Bootstrap?

18. What are the key components of Bootstrap?

19. What are Glyphicons? How to use them?

20. Write the steps to create basic or vertical forms using Bootstrap?

21. What is the difference between .container and .container-fluid in Bootstrap?

22. What are the input groups in Bootstrap?

Intermediate Questions

23. What is Bootstrap breadcrumb?

24. What are bootstrap alerts and how will you create them?

25. What are the steps to create a progress bar using bootstrap?

26. Difference between Bootstrap 4 and Bootstrap 5.

27. How is the tooltip different from the popover?

28. What is column ordering in Bootstrap?

29. What Are Bootstrap Media Queries?

30. What is Normalize in Bootstrap?

31. In Bootstrap, what are the two method for displaying code?

32. What are Bootstrap panels? How to create a Bootstrap panel with a heading.

33. Explain the purpose of using the Scrollspy plugin.

34. Why do we use the affix plugin in Bootstrap?

35. What are the different types of buttons available in Bootstrap?

36. Why do we need to use Bootstrap?

37. How to create thumbnails using Bootstrap?

38. What do you mean by the Bootstrap well?

39. What is a Button Group, and what is the class for a basic Button Group?

Advanced Questions

40. What are the two types of spinners that you can create using Bootstrap?

41. Discuss the Bootstrap table and various classes that can change the table's design.

42. Write the HTML code to create a basic toast.

43. What are badges? Which class will you use to make your badge look more rounded?

44. What are the steps to create an animated progress bar using bootstrap?

45. Explain the modal in Bootstrap.

46. What will be the output of the below code and why?

47. Explain what is list group in Bootstrap and what is the use of it?

48. Explain how to use the Dropdown plugin in Bootstrap.

49. Define lead body copy in Bootstrap.

50. Name some alternatives to Bootstrap.

51. What is bootstrap pagination and how are they classified?

Explore