Bootstrap Interview Questions And Answers -2025

Last Updated : 23 Jul, 2025

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.

In this article, we’ve compiled the Top 50+ Bootstrap Interview Questions and Answers 2025, covering essential and advanced Bootstrap concepts. Whether you’re a beginner or an experienced developer with 3-5 years of hands-on experience, these questions will help you confidently prepare for your Bootstrap-related interviews.

Table of Content

Bootstrap Interview Questions - Beginners
Bootstrap Interview Questions - Intermediate
Bootstrap Interview Questions - Advanced
Bootstrap Interview Questions And Answers - FAQs

Bootstrap Interview Questions - Beginners

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?

Bootstrap's features are

It is open-source and free to use.
All browsers are compatible with Bootstrap.
Its designs are responsive.
Quick and simple to use.

3. How many different layouts does Bootstrap have?

Bootstrap has 2 major layouts

Fluid: This layout is required for generating a 100 percent broader app that spans the entire screen width.
Fixed: It is only used for a normal display. Both of these layouts can be combined to make a responsive design.

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/[email protected]/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 progress bar is used to display the progress of a process on a computer. It displays the range of completion of progress. The progress bar can be added to a web page using inbuilt bootstrap classes. Bootstrap has many types of progress bars. For Ex: .bg-success, .bg-info, bg-warning etc.

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

When compared to other web development platforms, Bootstrap provides more functionalities. It has significant browser support for practically all popular browsers, like Chrome, Firefox, Safari, etc. Web creation with Bootstrap is simple if you are familiar with CSS and HTML.

7. What is the difference between Bootstrap and Foundation?

Feature	Bootstrap	Foundation
Developer	Developed by Twitter	Developed by ZURB
Popularity	Most widely used CSS framework	Less popular compared to Bootstrap but still widely used
Responsive Design	Built-in responsive utilities and breakpoints	Provides flexible grid and media queries
Performance	Can be heavy due to the number of components included	Typically lighter and more modular than Bootstrap
Browser Support	Supports modern browsers and IE 10+	Supports modern browsers and IE 11+

8. What are collapsing elements in Bootstrap?

When the user clicks or hovers over the element then it shows data called Collapsing Element. This is the modern way to show a large amount of data to the user. We can also create our own collapsing element by using HTML, CSS, and JS. It makes the website very clean by collapsing the data while hovering or clicking on it. But Bootstrap facilitates the collapsing element property in its components. Bootstrap facilitates the collapsing element property

9. Suggests the lists that Bootstrap supports.

There are 3 types of lists supported by Bootstrap are:

Unordered Lists: In Unordered lists, items are marked with bullets.
Ordered Lists: In Ordered lists items are marked with numerical bullets such as 1,2, i, ii, etc.
Definition Lists: In Definition lists, items are defined with their description.

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.

Now, let us understand with the help of the example:

HTML

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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.

Bootstrap media objects such as images or videos can be easily and efficiently aligned to the left or right of some content. Bootstrap media objects are used to place some data next to content to create complex and repetitive content components.
The media object classes available are:

.media
.media-body

12. Why is Jumbotron used in Bootstrap and what steps to add jumbotron?

A jumbotron is a big grey box used to indicate some text which requires extra attention. Any text that seems to be important can be written inside a jumbotron to make it appear big and noticeable.

Steps to add a jumbotron

Use a jumbotron class inside a div element.
Write any text inside the div tag.
Close the div element.

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

Carousel is the slideshow component of bootstrap that is widely used for slideshow or cycling through different elements of an HTML document especially image containers or texts. The major use of the carousel plugin is to implement a slider or a slideshow of images. The HTML div containing images can also contain text.

14. How can you make responsive images?

By adding the class .img-responsive to the <img> tag in Bootstrap, images may be made responsive. This class gives the picture max-width: 100%; and height: auto; so that it scales well with the parent element.

Bootstrap Navbar is a navigation header that is located at the top of the webpage and can be extended or collapsed, depending on the screen size. Responsive navigation of our website is created by the bootstrap navbar.We can create a standard navigation bar with <nav class=” navbar navbar-default”>.

Navbar variations

navbars with drop-down menus
search boxes
a fixed navbar with minimal effort.

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?

CSS: It is made up of several CSS files.
Scaffolding: It gives a basic framework with a grid system, link styles, and backdrop.
Layout Components: This displays a list of layout elements.
JavaScript Plugins: Many jQuery and JavaScript plugins are included.
Customization: You can customize your components to create your own version of the framework.

19. What are glyphicons? How to use them?

Icon fonts which can be used in web application are called Glyphicons. Bootstrap includes 260 glyphicons. These glyphicons are used for web projects from Bootstrap Glyphicons Halflings Set. Glyphicons Halflings are not available to free of cost, but their creator has made them available for Bootstrap free of cost.

For using the Glyphicons icon in Bootstrap, you can add the following code just about anywhere in your code. We can also leave a space for proper padding in between the icon and text:

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

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

Forms are the most important and basic template of the website which is used for creating table, signup, login and feedback etc. Thus the availability of form templates in bootstrap has made it easy and we can directly use form templates from bootstrap.

Step 1: Include the Bootstrap CDN links in the code in order to use Bootstrap.
Step 2: Now you can use bootstrap forms with the input fields whatever you want in the forms inside the body tag.

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 the default form controls by adding text or buttons on either side of textual inputs, custom file selectors, or custom inputs.
Basic input groups: The following classes are the base classes that are used to add the groups to either side of the input boxes.

The .input-group-prepend class is used to add groups to the front of the input.
The .input-group-append class is used to add it behind the input.
The .input-group-text class is used to style the text that is displayed inside the group.

Bootstrap Interview Questions - Intermediate

Bootstrap 5 is the latest major release by Bootstrap in which they have revamped the UI and made various changes. Breadcrumbs are used to indicate the current page’s location within a navigational hierarchy.

<ol class="breadcrumb">
  <li class="breadcrumb-item"> Content .. </li>
</ol>

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

Bootstrap Alerts are a technique for styling user messages. They send contextual feedback messages in response to common user behaviors. To alert, you can add an optional close icon. Create a wrapper <div> and add a class of .alert and one of the four contextual classes to create a basic alert.

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.

Feature	Bootstrap 4	Bootstrap 5
jQuery Dependency	Requires jQuery	Removed jQuery, using vanilla JavaScript
Grid System	Uses .row and .col-* classes	Introduced .g-* for gutters and improved grid system
Flexbox	Flexbox-based layout	Improved Flexbox support and new utility classes
Form Controls	Custom form controls required jQuery	Redesigned form controls with improved styles and no dependency
Card Columns	.card-columns used for card layout	Removed .card-columns, replaced with CSS Grid layout
Colors	Limited color palette	Expanded color palette with more variations

When the user hover the element through mouse-pointer, the Tooltip component appears as a little pop-up box. The Popover component shows as a pop-up box when the user clicks on an element. More info might be stored in the popover.

The popover will show on the right side of the element by default, while the tooltip will appear on the top.

28. What is column ordering in Bootstrap?

Column ordering classes in Bootstrap help to change the order of our grid system based on different screen sizes eg: desktop, mobile, tablet, and smartwatches. This makes the website more responsive to different screen sizes.

29. What Are Bootstrap Media Queries?

We use a handful of media queries for delivering different style sheets to different devices, to create sensible breakpoints for our layouts and interfaces. Most of the breakpoints are based on the minimum viewport width and allow the element to resize as the viewport changes.
Bootstrap uses the following media query ranges or breakpoints in Sass source files for layouts, grid systems and components by default.

30. What is Normalize in Bootstrap?

Bootstrap provides cross-browser uniformity by using normalize. CSS resets have been replaced by normalize.css, a modern, HTML5-ready alternative. By default styling, it improves cross browser uniformity in HTML element.

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

To display the code on our webpage, bootstrap has some tags that can be used to display the code.

Method 1: The inline snippet of code wrapped in <code> tag. Inline code should be wrapped in <code> tags. The text which will be displayed is fixed-width and of red font color.

Method 2: Code block using <pre> tag to display the code as a standalone block element. For displaying multiple lines of code we can use this tag.

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

A panel is a rectangular component of Bootstrap, typically used to add content to the website. It can also have a header or footer, or both. Bootstrap also provides various classes to add padding to the content or multiple colors to make it more attractive.

CDN Link: First, include the style sheet in the code to use Bootstrap for creating the panel.

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css%E2%80%9D>

Add the following syntax to have a panel with the heading. The panel-heading class enables us to have a heading for our panel.

33. Explain the purpose of using the Scrollspy plugin?

Scrollspy works according to the scroll position or the position at which the user is currently seeing.It targets the navigation bar contents automatically on scrolling the area. Scrollspy can be implemented in two ways:

Horizontal scrollspy
Vertical scrollspy

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

For affixing a <div> to a certain area on a webpage, we utilize the affix plugin in Bootstrap. The plugin also lets you toggle pinning for the attached <div> on and off. The most common application of the affix plugin in Bootstrap is social icons.

The attached <div> starts at a specific point on the page and scrolls with it. However, beyond a certain point, it will be stuck in place, preventing the remainder of the webpage from scrolling.

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?

Faster and Easier Web Development.
It creates Platform-independent web pages.
It creates Responsive Web-pages.
It is mobile web application.

37. How to create thumbnails using Bootstrap?

Step-by-step guide for the implementation:

Step 1: Include Bootstrap and jQuery CDN into the <head> tag before all other stylesheets to load our CSS.
Step 2: Add <div> tag in the HTML body with class row. In that <div> create four div sections to create four images.
Step 3: Add “col-sm-6” and “col-md-3” to four div sections which creates a webpage responsive.
Step 4: Add <a> tag with class value thumbnail to define the link of the image in the next line.

<a href="#" class="thumbnail">

38. What do you mean by the Bootstrap well?

In Bootstrap, a well is a box that makes content appear inset. It's a way to style content on a web page.

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

Bootstrap Interview Questions - Advanced

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 a series of classes that can be used to apply various styling to the tables such as changing the heading appearance, making the rows stripped, adding or removing borders, making rows hoverable, etc. Bootstrap also provides classes for making tables responsive.

.table class is used to create a simple Bootstrap table. This class name is used with the <table> tag to create a table.
.table-stripped class is used to create alternate dark and light rows. For creating striped table we can use the combination of table and table-stripped classes within the <table> tag.
.table-bordered class is used to add borders on all sides of the table and cell. Use the combination of table and table-bordered classes within the <table> tag to create a bordered table.
.table-hover class is used to add the hover effect on table rows. Use the combination of table and table-hover classes within the <table> tag to create a hover rows table.

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/[email protected]/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 simple and basic components that are used to display an indicator or count a number. This is quite useful for mail count and alerting purposes, among other things. Badges are identical to labels, with the exception that they have more rounded corners.

The .badge-pill class is used to make the badges more rounded.

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

Step By Step Guide to Animate Progress Bar

Step 1: Add Bootstrap and jQuery CDN inside the <head> tag before the other stylesheets.
Step 2: Add a HTML <div> with a class of .progress and .progress-striped. Also add class .active to .progress-striped. Inside the <div> add an empty <div> with a class of .progress-bar and .progress-bar-success. Using CSS attribute specify the width for progress bar.
Step 3: Add jQuery in <script> tag to animate progress bar to show progress.

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?

List Groups are used to display a series of content. We can modify them to support any content as per our needs. The use of List-Groups is just to display a series or list of content in an organized way.

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.

Foundation
Bulma
Materialize
Material Design Lite
Skeleton
Pure CSS
Semantic UI

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/[email protected]/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 5 Introduction

sahilintern

Improve

Article Tags :

Bootstrap Interview Questions And Answers -2025

Bootstrap Interview Questions - Beginners

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 what steps to add jumbotron?

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?

Bootstrap Interview Questions - Intermediate

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?

Bootstrap Interview Questions - Advanced

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?

Similar Reads

Layout

Content

Forms

Forms Layout

Components

Navbar

Helpers

Extend

Thank You!

What kind of Experience do you want to share?