Top Bootstrap Interview Questions & Answers

1. What is Bootstrap?

Bootstrap is the most popular CSS framework for creating responsive websites that adjust themselves according to different devices. It is a free front-end framework for faster and easier web development. Current Version is Bootstrap 5 (Released May 5, 2021).

2. What are the key features of Bootstrap?

Some key features of Bootstrap are:

• Responsive Grid System: Bootstrap uses a 12-column responsive grid system that adapts to different screen sizes.
• Pre-styled Components: It offers a variety of pre-designed components like buttons, forms, navigation bars, modals, etc.
• Cross-Browser Compatibility: Bootstrap ensures that websites look consistent across different web browsers.
• Mobile-First Approach: Bootstrap's design and development prioritize mobile devices, and styles are progressively enhanced for larger screens.
• Customizable: It allows customization through SASS (Syntactically Awesome Style Sheets) or CSS variables to modify default styles.

3. How do you add Bootstrap to a website?

To add Bootstrap 5 to a website, you can either download the compiled CSS and JavaScript files from the official website or use a content delivery network (CDN).

4. How can you make a website responsive using Bootstrap?

To make a website responsive using Bootstrap, you need to utilize the responsive grid system, which involves placing content within container elements and using different grid classes to define how content should be displayed on various screen sizes (e.g., xs, sm, md, lg, xl). By organizing content into rows and columns, the layout adapts automatically to different devices.

5. How can you handle responsiveness for images in Bootstrap?

Bootstrap provides responsive image classes that automatically scale images based on the screen size. You can use the img-fluid class to make an image responsive.

6. What are some new features introduced in Bootstrap 5?

Some of the new features in Bootstrap 5 include:

• Dropped jQuery dependency.
• Added support for CSS custom properties (variables) in the grid system.
• New utility classes for spacing and sizing.
• Replaced JavaScript-based dropdowns and custom file input with native browser implementations.
• Improved form controls, including range inputs and floating labels.
• Added responsive font sizes using fs utilities.
• Simplified and enhanced documentation.

7. What are Bootstrap components?

Bootstrap components are pre-designed, reusable elements like buttons, forms, navbars, modals, and more, which you can use to build a website or web application quickly and consistently.

8. What are the different responsive breakpoints in Bootstrap 5?

Bootstrap 5 introduces the following responsive breakpoints:

• xs (Extra Small): For devices with a screen width less than 576px.
• sm (Small): For devices with a screen width equal to or greater than 576px.
• md (Medium): For devices with a screen width equal to or greater than 768px.
• lg (Large): For devices with a screen width equal to or greater than 992px.
• xl (Extra Large): For devices with a screen width equal to or greater than 1200px.

9. What is the purpose of Bootstrap's utility classes?

Bootstrap's utility classes provide quick and easy ways to apply common styles like spacing, alignment, typography, and display properties without writing custom CSS.

For example .mt-2 for margin-top, .text-center for text alignment, etc.

10. Explain the Bootstrap grid system.

Bootstrap's grid system is based on a 12-column layout. You can create rows and divide them into columns with classes like .col-xs, .col-sm, .col-md, .col-lg, or .col-xl to define the column behavior at different screen sizes.

11. What is a Bootstrap Container, and how does it work?

A Bootstrap container is a fundamental building block that ensures that the content is presented consistently and appropriately on different screen sizes.

Bootstrap offers two types of containers:

.container: This class creates a responsive container with a fixed width. The container's width adjusts based on the screen size, making it suitable for creating content that doesn't span the full width of the viewport.

.container-fluid: This class creates a full-width container that spans the entire viewport. It is useful for creating content that takes advantage of the entire available width.

12. What is a breadcrumb in Bootstrap?

In Bootstrap, a breadcrumb is a navigation component used to show the user's current location within the hierarchical structure of a website or web application. It is typically displayed as a horizontal series of links, separated by a symbol, representing the path the user has taken to reach the current page.

13. How can you use Bootstrap to make thumbnails?

In Bootstrap, you can create thumbnails using the .img-thumbnail class. Thumbnails are small images with rounded corners and optional borders, making them perfect for displaying a gallery of images or showcasing content in a compact format.

<img src="image3.jpg" alt="Image 3" class="img-thumbnail">

14. What is a lead?

The .lead class applies increased font size and slightly lighter font weight to the text, making it visually distinct from regular paragraphs.

<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet nisi eu mi volutpat, nec elementum ipsum lacinia.</p>

15. What are contextual classes?

In Bootstrap, contextual classes are a set of classes that can be applied to various elements, such as text, buttons, and table rows, to provide different visual styles based on contextual meaning. These classes are used to convey information, highlight important content, or indicate the state of an element.

For example: .text-primary, .bg-secondary, .table-success etc.

16. How can one create an alert in Bootstrap?

In Bootstrap, you can create an alert to display important messages, notifications, or warnings to users. To create an alert in Bootstrap, use the .alert class along with the appropriate contextual class.

<div class="alert alert-primary">
      This is a primary alert—check it out!
    </div>

    <div class="alert alert-secondary">
      This is a secondary alert—check it out!
    </div>

    <div class="alert alert-success">
      This is a success alert—check it out!
    </div>

17. What is a bootstrap card and how would you create one?

In Bootstrap, a card is a flexible and extensible content container. It is a versatile component used to display various types of content, such as images, text, links, buttons, and more.

To create a card in Bootstrap, you use the .card class and its related classes to structure the card's content.

<div class="card">
          <img src="image.jpg" class="card-img-top" alt="Image">
          <div class="card-body">
            <h5 class="card-title">Card Title</h5>
            <p class="card-text">This is a simple card with some text content.</p>
            <a href="#" class="btn btn-primary">Read More</a>
          </div>
        </div>
        

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

In Bootstrap, you can create two types of spinners to indicate loading or processing status:

Border Spinners: Border spinners are animated spinners with a border that grows and shrinks to create the spinning effect.

<div class="spinner-border text-primary">
        <span class="visually-hidden">Loading...</span>
      </div>

Growing Spinners: Growing spinners are animated spinners that grow and fade in and out to create the spinning effect.

  <div class="spinner-grow text-primary">
        <span class="visually-hidden">Loading...</span>
      </div>

19. Explain input groups in Bootstrap.

In Bootstrap, input groups are a way to enhance and extend form controls by adding additional elements or buttons before, after, or on both sides of an input field. Input groups allow you to group related form elements together, making them more visually coherent and user-friendly.

  <div class="input-group">
        <input type="text" class="form-control" placeholder="Search for something...">
        <button class="btn btn-primary" type="button">Search</button>
      </div>

20. Explain Bootstrap's table components.

Bootstrap provides a set of table components that allow you to create structured and responsive tables for displaying data. These table components include various classes, styles, and features to enhance the presentation and functionality of tables.

Here are the key components of Bootstrap's table:

• .table: This class is the core class to create a basic Bootstrap table. It provides a clean and simple table layout with default styling for borders and padding.
• .table-striped: This class adds zebra-striping to the table rows, alternating background colors to improve readability and distinguish between rows.
• .table-bordered: This class adds borders to all the cells and the table itself, making it look more structured.
• .table-hover: This class adds a hover effect to table rows, highlighting the row under the mouse pointer for better interactivity and visual feedback.
• .table-sm: This class reduces the size of the table, making it more compact and suitable for displaying large datasets or when space is limited.
• .table-responsive: This class wraps the table in a responsive container, enabling horizontal scrolling on smaller screens to avoid truncating the content.
• Contextual Classes: .table-primary, .table-secondary, .table-success, .table-danger, .table-warning, .table-info, .table-light, .table-dark: These classes can be applied to individual rows, cells, or the entire table to change the background color based on contextual meaning or status.
• Table Head & Footer Colors: .thead-light, .thead-dark, .table-light, .table-dark: These classes can be used to style the table head and footer with different background colors.
• Responsive Breakpoint for Tables: .table-responsive-{breakpoint}: This class enables you to create a responsive table at a specific breakpoint, where {breakpoint} can be sm, md, lg, or xl.

21. What is a toast?

A toast is a small & non-modal notification that appears on the screen to provide a brief message or alert to the user. It is typically used to display temporary information or updates, such as success messages, error messages, or status notifications.

22. What is the media object in Bootstrap?

In Bootstrap, the media object is a versatile and flexible component that allows you to create media-rich content layouts. It is used to display images, videos, or any other media alongside descriptive content, such as titles, text, and links.

    <div class="media">
        <img src="image.jpg" class="mr-3" alt="Media Object">
        <div class="media-body">
          <h5>Media Heading</h5>
          <p>Media content description goes here.</p>
        </div>
      </div>

23. What do you understand by column ordering in Bootstrap?

Column ordering in Bootstrap refers to the ability to rearrange the order of columns within a row for different screen sizes. It allows you to control the visual appearance and layout of your content based on the available screen space, ensuring a responsive and user-friendly design.

Bootstrap offers five responsive classes for column ordering:

• .order-first: This class is used to place a column first in the order for all screen sizes.
• .order-last: This class is used to place a column last in the order for all screen sizes.
• .order-{breakpoint}-first: This class is used to place a column first in the order for a specific breakpoint (e.g., sm, md, lg, or xl).
• .order-{breakpoint}-last: This class is used to place a column last in the order for a specific breakpoint.
• .order-{breakpoint}-X: This class is used to place a column at a specific order (X) for a specific breakpoint.

24. What are Bootstrap collapsing elements?

In Bootstrap, collapsing elements are components that allow you to toggle the visibility of content, typically by expanding or collapsing them with a smooth animation. These elements are useful for creating collapsible sections, accordions, collapsible navigation bars, and other interactive components on a website.

The key components for creating collapsing elements in Bootstrap are:

• Collapse Component: The .collapse class is used to create a collapsible element. When applied to a container, this class hides its content by default.
• Collapsible Button: To trigger the collapse functionality, you'll need a clickable element, such as a button or a link. Add the data-bs-toggle="collapse" attribute to the button, and set the data-bs-target attribute to the ID or class of the collapsible element you want to control.
• Collapsible Element: The collapsible element is the container that holds the content you want to show or hide. It is identified by the data-bs-target attribute set in the collapsible button. When the button is clicked, the content within this element will be toggled.

25. What is a scrollspy?

Scrollspy is a JavaScript component in Bootstrap that automatically updates the navigation based on the scroll position of the page. It allows you to create a navigation menu that highlights the active section as the user scrolls through the content.

26. How is the tooltip different from the popover?

Tooltips are small, simple, and triggered on hover or focus to display short messages, while popovers are larger, more detailed, and require explicit user interaction (such as a click) to show more extensive content.

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

Button groups allow multiple buttons to be stacked together on a single line. You can use this when you want to place items like alignment buttons together.

For the basic button group, the .btn-group class is used. Here, you can wrap a series of buttons with class .btn in .btn-group.

28. How would you implement a carousel in bootstrap?

A carousel is a slideshow component that allows you to display a series of images, videos, or other content in a rotating manner.

Here is an example with a detailed explanation:

<div class="container">
        <div id="myCaoursel" class="carousel slide" data-bs-ride="carousel">
          
          <div class="carousel-indicators">
            <button type="button" data-bs-target="#myCaoursel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#myCaoursel" data-bs-slide-to="1" aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#myCaoursel" data-bs-slide-to="2" aria-label="Slide 3"></button>
          </div>
  
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img src="https://i.pinimg.com/originals/40/27/18/402718db32fc6ad002568c6ffa80d68c.jpg" class="img-fluid w-100" alt="slide 1">
            </div>
            <div class="carousel-item">
              <img src="https://images.unsplash.com/photo-1618588507085-c79565432917?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8YmVhdXRpZnVsJTIwbmF0dXJlfGVufDB8fDB8fA%3D%3D&w=1000&q=80" class="img-fluid w-100" alt="slide 2">
            </div>
            <div class="carousel-item">
              <img src="https://i.pinimg.com/originals/72/b6/cb/72b6cbf828dde7026f98cc1479326dcd.jpg" class="img-fluid w-100" alt="slide 3">
            </div>
          </div>
          
          <button class="carousel-control-prev" type="button" data-bs-target="#myCaoursel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
          </button>
          <button class="carousel-control-next" type="button" data-bs-target="#myCaoursel" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
          </button>
        </div>
      </div>

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

With Bootstrap, you can easily add Pagination on any web page. This is useful if you have a lot of linked posts and pages.

To create a basic pagination, add the .pagination class to an <ul> element. Then add the .page-item to each <li> element and a .page-link class to each link inside <li>

 <div class="container">
      <ul class="pagination">
        <li class="page-item"> <a class="page-link" href="#">Previous</a> </li>
        <li class="page-item"> <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="#">5</a> </li>
        <li class="page-item"> <a class="page-link" href="#">Next</a> </li>
      </ul>
    </div>

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

Badges are used to add additional information to any content.

Use the .badge class together with a contextual class (like .bg-secondary) within <span> elements to create rectangular badges.

<span class="badge bg-primary">3</span> 

If you want to make your badge look more rounded, you can use the badge-pill class in addition to the badge class. This class adds a more rounded appearance to the badge, making it appear as a pill shape:

<span class="badge rounded-pill bg-primary">3</span> 

31. What is Typography? How it works.

Typography is a technique of arranging and designing text and characters effectively. It covers various elements, including fonts, typefaces, point size, line spacing, line length, alignment, and more.

Here's how typography works:

• Typefaces and Fonts
• Font Size
• Font Weight
• Line Spacing
• Text Alignment
• Letter and Word Spacing

32. How do you add an icon to your web page using Bootstrap?

For this, you need to include Bootstrap’s icon library via CDN in the <head> section of your HTML document:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css">

Once you have the icon library included, you can add an icon to your web page using an HTML element and the corresponding icon class.

<i class="bi bi-0-square-fill"> </i> 

33. How does Bootstrap ensure cross-browser compatibility?

Bootstrap 5 follows several practices and techniques to ensure cross-browser compatibility. These approaches help ensure that websites and web applications built with Bootstrap work consistently and correctly across different web browsers. Here are some of the ways Bootstrap achieves cross-browser compatibility:

• Responsive Design
• Modern CSS Features
• CSS Custom Properties (Variables)
• Progressive Enhancement
• Compatibility Classes
• Browser Testing and Support
• Documentation and Guidance
• Open Source Community

34. Tell me about Bootstrap's "list-group" component.

List groups are a flexible and powerful component for displaying a series of content. It allows you to display a group of items in a list format and is commonly used for elements like menus, navigation, and lists of items.

To create a basic list group, use an <ul> element with class .list-group, and <li> elements with class .list-group-item

<ul class="list-group">
          <li class="list-group-item">Web Designing</li>
          <li class="list-group-item">Digital Marketing</li>
          <li class="list-group-item">Cloud Computing</li>
          <li class="list-group-item">Artificial Intelligence</li>
          <li class="list-group-item">Business Analysis</li>
   </ul>

35. What is the process to create a multi-column form layout using Bootstrap?

To create a multi-column layout, you can use Bootstrap's grid system. Wrap your form fields in Bootstrap grid columns (e.g., <div class="col">) within a row (e.g., <div class="row">).

<form class="form">
            <div class="row">
              <div class="col">
                  <label for="inputField1" class="form-label">Field 1</label>
                  <input type="text" class="form-control" id="inputField1">
              </div>
              <div class="col">
                  <label for="inputField2" class="form-label">Field 2</label>
                  <input type="text" class="form-control" id="inputField2">
              </div>
            </div>
          </form>

36. Explain the use of Bootstrap's "offcanvas" component to create a sidebar navigation menu?

Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, top, or bottom edge of the viewport. With the "offcanvas" component, you can create a hidden sidebar that can be revealed by users when needed.

Here's how to use Bootstrap's "offcanvas" component to create a sidebar navigation menu:

Create a Toggle Button: You need a button that will trigger the display of the sidebar.

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebar">Menu</button> 

In the above code, the data-bs-toggle attribute and the data-bs-target attribute are used to link the button to the offcanvas sidebar. The data-bs-target value should match the ID of your sidebar.

Create the Offcanvas Sidebar: Create the offcanvas sidebar by adding a <div> element with the "offcanvas" class and a unique ID. Inside this container, you can place your navigation menu, links, or other content you want to display in the sidebar.

<div class="offcanvas offcanvas-start" tabindex="-1" id="sidebar">
        <div class="offcanvas-header">
          <h5 class="offcanvas-title">Sidebar</h5>
          <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
          <ul class="list-group">
            <li class="list-group-item">Item 1</li>
            <li class="list-group-item">Item 2</li>
            <li class="list-group-item">Item 3</li>
          </ul>
       </div>
      </div>

37. What is the role of the “navbar-toggler” class in Bootstrap?

The navbar-toggler class in Bootstrap is a fundamental component used in the creation of responsive navigation bars. It is typically applied to a button element within a Bootstrap Navbar, and its primary role is to toggle the visibility of the navigation menu on smaller screens, such as mobile devices.

38. How can you align elements horizontally and vertically in Bootstrap?

To align elements both horizontally and vertically, you can combine the justify-content-center and align-items- center classes within a flex container.

 <div class="d-flex justify-content-center align-items-center">
   <!-- Your content here -->
</div>

39. What is the use of modal in bootstrap?

In Bootstrap 5, the "modal" component is primarily used to create and manage modal dialogs, which are interactive pop-up windows that overlay the main content of a webpage. Here are some common use cases for models:

• Displaying Additional Information
• User Input and Forms
• Alerts and Confirmations
• Image Galleries
• Informational Messages
• Interactive Widgets
• Dynamic Content Loading
• Cookies and User Preferences

40. Explain the purpose of the “close” button in Bootstrap.

The "close" button, often represented by a small "x" or "Close" text, serves the purpose of allowing users to dismiss or close certain components, most commonly used in Bootstrap modals and alerts.

41. Explain the difference between Bootstrap's "Sticky" and "Fixed" navbar.

Sticky Navbar: A sticky navbar is a navigation bar that initially behaves like a normal navbar but becomes fixed (sticks to the top of the viewport) when the user scrolls past a certain point on the page.

Fixed Navbar: A fixed navbar remains fixed at the top (or bottom) of the viewport even when the user scrolls down the page. It is always visible and does not move with the scrolling content.

42. Explain the purpose of the Bootstrap "Nav Pills" component "Nav Tabs."

Bootstrap Nav Pills and Nav Tabs both create navigation components.

Nav Pills: Nav Pills have a rounded appearance (styled as a pill or capsules) making them suitable for secondary navigation or for emphasizing specific sections of a page. To implement Nav Pills, you use the .nav-pills class on the <ul> (unordered list) element that contains the navigation items. Each <li> (list item) represents a navigation item, and they are styled as pills.

<ul class=" nav nav-pills">
    <li class="nav-item">
        <a class="nav-link active" href="#">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Profile</a>
    </li>
</ul>

Nav Tabs: Nav Tabs, on the other hand, create a navigation component where each navigation item is styled as a horizontal tab. Nav Tabs are commonly used for the primary navigation of a page. To implement Nav Tabs, you use the .nav-tabs class on the <ul>(unordered list) element and each <li> represents a tab. The tabs are usually placed horizontally.

<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link active" href="#">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Profile</a>
    </li>
</ul>

43. Explain how the "Nav Pills" component differs from "Nav Tabs."

• The primary difference lies in the visual style – pills are rounded, while tabs are more rectangular with angular edges.
• Nav Pills are often used for secondary navigation or to highlight specific sections, whereas Nav Tabs are commonly used for the main navigation of a page.
• Pills use the .nav-pills class and tabs use the .nav-tabs class.

44. Explain the purpose of the Bootstrap "Accordion" component, and how can it be customized.

The Bootstrap "Accordion" component is designed to create collapsible content sections on a web page. Accordion allows the display of only one collapsed item at a time. Users can toggle through several text blocks with a single click, and that greatly enhances the UX of your project.

Bootstrap Accordion can be used in:

• FAQ’s (Frequently Asked Questions)
• Multiple item presentation

45. Differentiate between the "btn" and "btn-outline" classes in Bootstrap.

btn: The btn class in Bootstrap is used for solid or filled buttons with a colored background.

btn-outline: The btn-outline class creates buttons with a transparent background and a colored border.

46. Why do we need to use Bootstrap?

Bootstrap provides major benefits to a developer. Some of them include:

• It is a free and open-source Web design framework.
• Bootstrap has the support of all the web browsers like Internet Explorer, Google Chrome, Firefox, Opera, Safari, etc.
• It is a compelling mobile first front-end framework.
• Also, it is very easy to start as one needs to have an idea of HTML and CSS only to work with it.
• We can design a responsive website that adjusts to desktop, tablet, and mobile.
• It comprises functional built-in components that are easy to customize.

47. What is Bootstrap placeholders?

Placeholders can be used to enhance the experience of your application. They’re built only with HTML and CSS, meaning you don’t need any JavaScript to create them. You can use loading placeholders for your components or pages to indicate something may still be loading. Their appearance, color, and sizing can be easily customized with our utility classes.

48. How can you use Bootstrap 5's "Grid Gutter Width" utility to customize the spacing between columns, and provide examples of different gutter width options?

Bootstrap 5's Grid Gutter Width utility allows us to customize the spacing between columns using utility classes like g-0, g-2, g-4 etc. These classes control the gutter width at various breakpoints, providing flexibility in adjusting spacing.

49. Explain the concept of Bootstrap 5's "Responsive Embed" utility and how it can be used to create responsive media embeds.

Bootstrap 5's Responsive Embed utility creates responsive media embeds, such as videos and maps. It ensures that embedded content scales properly within its parent container. We can apply classes like ‘embed-responsive’ to achieve this responsive behavior.

50. What is the purpose of the offset classes in Bootstrap 5's grid system?

Offset classes in Bootstrap 5's grid system are used to create space or offset columns within a row. These classes offset the columns by simply increasing their left margin by a specified number of columns. We can use offset classes like .offset-sm-*, .offset-lg-*, and so on.