fbpx

Top 100 Bootstrap Interview Questions and Answers

Top 100 Bootstrap Interview Questions and Answers

Contents show

1. What is Bootstrap and why is it used in web development?

Answer:

Bootstrap is a popular front-end framework that simplifies the process of designing and styling web pages. It provides a set of pre-built CSS and JavaScript components, making it easier to create responsive and visually appealing websites.


2. How do you include Bootstrap in a web project?

Answer:

You can include Bootstrap in a project by linking to its CSS and JavaScript files. Here’s an example:

<!-- Add this in the head section of your HTML file -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.0.9/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

3. How do you create a responsive grid layout using Bootstrap?

Answer:

Bootstrap uses a grid system based on a 12-column layout. You can create rows and columns like this:

<div class="container">
  <div class="row">
    <div class="col-md-6">Column 1</div>
    <div class="col-md-6">Column 2</div>
  </div>
</div>

4. Explain the difference between container and container-fluid in Bootstrap.

Answer:

container provides a fixed-width container, while container-fluid creates a full-width container that spans the entire viewport.

<div class="container"> <!-- Fixed-width container -->
  ...
</div>

<div class="container-fluid"> <!-- Full-width container -->
  ...
</div>

5. How do you create a responsive navigation bar in Bootstrap?

Answer:

Bootstrap provides a pre-styled navigation bar. Here’s an example:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      ...
    </ul>
  </div>
</nav>

6. How can you add a responsive image in Bootstrap?

Answer:

Bootstrap provides the .img-fluid class for responsive images. Example:

<img src="image.jpg" alt="Responsive Image" class="img-fluid">

7. Explain what Bootstrap modals are and how to create one.

Answer:

Modals are pop-up windows that overlay the current page. Here’s an example of creating a modal:

<!-- Button to trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Open Modal
</button>

<!-- The Modal -->
<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Modal body -->
      <div class="modal-body">
        Content goes here
      </div>
    </div>
  </div>
</div>

8. How do you add alerts in Bootstrap?

Answer:

You can add alerts using the .alert class. Example:

<div class="alert alert-success" role="alert">
  This is a success alert!
</div>

9. How can you create a responsive table in Bootstrap?

Answer:

Bootstrap provides the .table class for creating responsive tables. Example:

<table class="table table-striped">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      ...
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      ...
    </tr>
    ...
  </tbody>
</table>

10. Explain what Bootstrap badges are and how to use them.

Answer:

Badges are used to highlight or indicate the status of an element. Example:

<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
...

11. How do you create a form using Bootstrap?

Answer:

Bootstrap provides styles for forms. Example:

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

12. Explain the purpose of Bootstrap’s utility classes.

Answer:

Bootstrap utility classes are small, single-purpose classes that can be used to quickly apply styles or make layout adjustments. For example, mt-3 adds a top margin of 1rem.


13. How do you create a card in Bootstrap?

Answer:

Bootstrap cards are flexible and extensible content containers. Example:

<div class="card" style="width: 18rem;">
  <img src="image.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

14. What is the purpose of Bootstrap’s carousel component?

Answer:

The carousel component in Bootstrap allows you to display a series of content in a slide show format. It’s useful for showcasing images or content in an interactive way.


15. How can you create a collapsible accordion in Bootstrap?

Answer:

Bootstrap provides the accordion component to collapse content and only show one section at a time. Example:

<div id="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Section 1
        </button>
      </h5>
    </div>
    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        Content for section 1
      </div>
    </div>
  </div>
  ...
</div>

16. How can you add a tooltip in Bootstrap?

Answer:

Bootstrap provides a built-in way to add tooltips to elements. Example:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>

17. What is the purpose of Bootstrap’s pagination component?

Answer:

Bootstrap’s pagination component is used to divide content into multiple pages. It provides navigation links for easy page switching.


18. How can you add a progress bar in Bootstrap?

Answer:

You can use Bootstrap’s progress bar component. Example:

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>

19. Explain the purpose of Bootstrap’s collapse component.

Answer:

The collapse component in Bootstrap allows you to toggle the visibility of content. It’s commonly used for collapsible menus or content sections.


20. How do you create a responsive embed video in Bootstrap?

Answer:

Bootstrap provides the .embed-responsive class for responsive video embedding. Example:

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/VIDEO_ID"></iframe>
</div>

21. How can you add a navbar in Bootstrap?

Answer:

Bootstrap provides a navbar component for creating navigation bars. Example:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

22. How can you add a modal in Bootstrap?

Answer:

Bootstrap modals are dialog boxes that are useful for displaying information. Example:

<!-- Button to trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Open Modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Content goes here...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

23. How do you create a form with inline elements using Bootstrap?

Answer:

You can use the .form-inline class to create a form with inline elements. Example:

<form class="form-inline">
  <div class="form-group">
    <label for="inputName">Name</label>
    <input type="text" class="form-control" id="inputName" placeholder="John Doe">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

24. What is the purpose of Bootstrap’s grid system?

Answer:

Bootstrap’s grid system is used for creating responsive layouts. It divides a webpage into rows and columns, allowing for easy alignment of content.


25. How can you add a badge in Bootstrap?

Answer:

You can use the .badge class to add a badge. Example:

<span class="badge badge-primary">New</span>

26. How do you create a responsive image in Bootstrap?

Answer:

You can use the .img-fluid class to make an image responsive. Example:

<img src="image.jpg" class="img-fluid" alt="Responsive Image">

27. What is the purpose of Bootstrap’s utility classes?

Answer:

Bootstrap’s utility classes provide quick and easy styling for various elements. For example, you can use .text-center to center-align text.


28. How can you create a dropdown menu in Bootstrap?

Answer:

Bootstrap provides a dropdown component for creating dropdown menus. Example:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

29. How can you add a carousel in Bootstrap?

Answer:

Bootstrap provides a carousel component for creating image sliders. Example:

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="slide1.jpg" class="d-block w-100" alt="Slide 1">
    </div>
    <div class="carousel-item">
      <img src="slide2.jpg" class="d-block w-100" alt="Slide 2">
    </div>
    <!-- Add more slides as needed -->
  </div>
</div>

30. How do you create a responsive table in Bootstrap?

Answer:

You can use the .table-responsive class to make a table responsive. Example:

<div class="table-responsive">
  <table class="table">
    <!-- Table content goes here -->
  </table>
</div>

31. What is Bootstrap’s grid system based on?

Answer:

Bootstrap’s grid system is based on a 12-column layout. This allows for flexible and responsive designs.


32. How can you add a progress bar in Bootstrap?

Answer:

You can use the .progress and .progress-bar classes to add a progress bar. Example:

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

33. How can you create a navigation bar in Bootstrap?

Answer:

Bootstrap provides the .navbar class for creating a navigation bar. Example:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <!-- Add more menu items as needed -->
    </ul>
  </div>
</nav>

34. How do you create a form in Bootstrap?

Answer:

Bootstrap provides styling for forms. Example:

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

35. How can you add a modal in Bootstrap?

Answer:

You can use the .modal class to create a modal. Example:

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Content goes here
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

36. How can you add tooltips in Bootstrap?

Answer:

You can use the data-toggle and data-placement attributes for tooltips. Example:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>

37. How do you add a badge in Bootstrap?

Answer:

You can use the .badge class to add a badge. Example:

<span class="badge badge-primary">New</span>

38. How can you create a responsive grid system in Bootstrap?

Answer:

Bootstrap provides a responsive grid system using rows and columns. Example:

<div class="container">
  <div class="row">
    <div class="col-sm">Column 1</div>
    <div class="col-sm">Column 2</div>
    <div class="col-sm">Column 3</div>
  </div>
</div>

39. What is the purpose of the Bootstrap container class?

Answer:

The container class is used to create a fixed-width container to center the content. Example:

<div class="container">
  <!-- Content goes here -->
</div>

40. How can you create a carousel in Bootstrap?

Answer:

Bootstrap provides a carousel component for creating image sliders. Example:

<div id="carouselExample" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="image1.jpg" class="d-block w-100" alt="Image 1">
    </div>
    <div class="carousel-item">
      <img src="image2.jpg" class="d-block w-100" alt="Image 2">
    </div>
    <!-- Add more slides as needed -->
  </div>
</div>

41. How do you create a responsive embed video in Bootstrap?

Answer:

Bootstrap provides a responsive utility class for embedding videos. Example:

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="video-url"></iframe>
</div>

42. How can you customize the Bootstrap theme?

Answer:

You can customize Bootstrap by overriding its variables in your own CSS file or by using the Bootstrap theme customizer.


43. How do you add a dropdown menu in Bootstrap?

Answer:

You can use the .dropdown class along with .dropdown-toggle for creating dropdown menus. Example:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <!-- Add more dropdown items as needed -->
  </div>
</div>

44. How can you add a navigation bar in Bootstrap?

Answer:

You can use the Bootstrap navigation components to create a navigation bar. Example:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <!-- Add more navigation items as needed -->
    </ul>
  </div>
</nav>

45. How do you create a modal in Bootstrap?

Answer:

Bootstrap provides a modal component for displaying content in a pop-up window. Example:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Content goes here
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

46. How can you create a form in Bootstrap?

Answer:

You can use Bootstrap’s form components for creating forms. Example:

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <!-- Add more form fields as needed -->
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

47. How do you add a tooltip in Bootstrap?

Answer:

You can use the Bootstrap tooltip component. Example:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>

48. How can you create a progress bar in Bootstrap?

Answer:

Bootstrap provides a progress bar component. Example:

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>

49. How can you create a carousel in Bootstrap?

Answer:

Bootstrap provides a carousel component for creating image sliders. Example:

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <!-- Add more indicators as needed -->
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="image1.jpg" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="image2.jpg" alt="Second slide">
    </div>
    <!-- Add more carousel items as needed -->
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

50. How do you create a list group in Bootstrap?

Answer:

You can use the Bootstrap list group component. Example:

<ul class="list-group">
  <li class="list-group-item">Item 1</li>
  <li class="list-group-item">Item 2</li>
  <!-- Add more list items as needed -->
</ul>

51. How can you create a responsive table in Bootstrap?

Answer:

Bootstrap provides responsive table classes. Example:

<div class="table-responsive">
  <table class="table">
    <!-- Table content goes here -->
  </table>
</div>

52. How do you add badges in Bootstrap?

Answer:

You can use the Bootstrap badge component. Example:

<span class="badge badge-primary">Primary</span>

53. How can you create a pagination in Bootstrap?

Answer:

Bootstrap provides a pagination component. Example:

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item"><a class="page-link" href="#">2</a></li>
  <!-- Add more pages as needed -->
</ul>

54. How do you create a form with inline elements in Bootstrap?

Answer:

You can use the .form-inline class for creating inline forms. Example:

<form class="form-inline">
  <div class="form-group mx-sm-3 mb-2">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>

55. How can you create a navigation bar in Bootstrap?

Answer:

You can use the Bootstrap navigation component to create a responsive navigation bar. Example:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <!-- Add more navigation items as needed -->
    </ul>
  </div>
</nav>

56. How do you create a modal in Bootstrap?

Answer:

Bootstrap provides a modal component for creating dialog boxes. Example:

<!-- Button to trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Content goes here...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

57. How can you create a tooltip in Bootstrap?

Answer:

You can use the Bootstrap tooltip component. Example:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>

Make sure to initialize tooltips by adding the following JavaScript:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

58. How do you create an alert in Bootstrap?

Answer:

Bootstrap provides an alert component. Example:

<div class="alert alert-success" role="alert">
  This is a success alert.
</div>

59. How can you create a progress bar in Bootstrap?

Answer:

You can use the Bootstrap progress bar component. Example:

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>

60. How can you create a carousel in Bootstrap?

Answer:

You can use the Bootstrap carousel component to create an image slider. Example:

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="image1.jpg" class="d-block w-100" alt="Image 1">
    </div>
    <div class="carousel-item">
      <img src="image2.jpg" class="d-block w-100" alt="Image 2">
    </div>
    <!-- Add more carousel items as needed -->
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

61. How do you create a form in Bootstrap?

Answer:

You can use Bootstrap’s form components to create a variety of form elements. Example:

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

62. How can you create a responsive grid layout in Bootstrap?

Answer:

Bootstrap’s grid system allows you to create responsive layouts. Example:

<div class="row">
  <div class="col-sm-4">Column 1</div>
  <div class="col-sm-4">Column 2</div>
  <div class="col-sm-4">Column 3</div>
</div>

This will create a row with three equally spaced columns on small-sized screens.


63. How do you create a card in Bootstrap?

Answer:

You can use the Bootstrap card component to create a flexible and extensible content container. Example:

<div class="card" style="width: 18rem;">
  <img src="card-image.jpg" class="card-img-top" alt="Card Image">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

64. How can you add a dropdown menu in Bootstrap?

Answer:

You can use the Bootstrap dropdown component to create a dropdown menu. Example:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

65. How do you create a navigation bar in Bootstrap?

Answer:

You can use the Bootstrap navbar component to create a responsive navigation bar. Example:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <!-- Add more navigation items as needed -->
    </ul>
  </div>
</nav>

66. How can you create a modal in Bootstrap?

Answer:

You can use the Bootstrap modal component to create a pop-up window. Example:

<!-- Button to trigger the modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Content goes here...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

67. How do you create a tooltip in Bootstrap?

Answer:

You can use the Bootstrap tooltip component to create interactive tooltips. Example:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>

Initialize tooltips using JavaScript:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

68. How can you create a progress bar in Bootstrap?

Answer:

You can use the Bootstrap progress component to create progress bars. Example:

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

69. How do you create a list group in Bootstrap?

Answer:

You can use the Bootstrap list group component to create stylized lists. Example:

<ul class="list-group">
  <li class="list-group-item">Item 1</li>
  <li class="list-group-item">Item 2</li>
  <!-- Add more list items as needed -->
</ul>

70. How can you create a carousel in Bootstrap?

Answer:

You can use the Bootstrap carousel component to create image sliders. Example:

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="image1.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="image2.jpg" class="d-block w-100" alt="...">
    </div>
    <!-- Add more carousel items as needed -->
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

71. How do you create a form in Bootstrap?

Answer:

You can use the Bootstrap form components to create user input forms. Example:

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

72. How can you create a card in Bootstrap?

Answer:

You can use the Bootstrap card component to create panels with various content. Example:

<div class="card" style="width: 18rem;">
  <img src="card-image.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

73. How do you create a dropdown menu in Bootstrap?

Answer:

You can use the Bootstrap dropdown component to create menus with toggleable functionality. Example:

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <!-- Add more dropdown items as needed -->
  </div>
</div>

74. How can you create a modal in Bootstrap?

Answer:

You can use the Bootstrap modal component to create pop-up dialogs. Example:

<!-- Button to trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Content goes here...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

75. How do you create a navbar in Bootstrap?

Answer:

You can use the Bootstrap navbar component to create a navigation bar. Example:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <!-- Add more navigation items as needed -->
    </ul>
  </div>
</nav>

76. How can you create a progress bar in Bootstrap?

Answer:

You can use the Bootstrap progress bar component to show the progress of a task. Example:

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

77. How do you create a list group in Bootstrap?

Answer:

You can use the Bootstrap list group component to create a list of items. Example:

<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>
  <!-- Add more list items as needed -->
</ul>

78. How can you create a tooltip in Bootstrap?

Answer:

You can use the Bootstrap tooltip component to provide additional information on hover. Example:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>

<script>
  $(function () {
    $('[data-toggle="tooltip"]').tooltip()
  })
</script>

79. How can you create a carousel in Bootstrap?

Answer:

You can use the Bootstrap carousel component to create a slideshow. Example:

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <!-- Add more indicators as needed -->
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="image1.jpg" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="image2.jpg" alt="Second slide">
    </div>
    <!-- Add more carousel items as needed -->
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

80. How do you create a form in Bootstrap?

Answer:

You can use the Bootstrap form components to create stylish forms. Example:

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

81. How can you create a responsive table in Bootstrap?

Answer:

You can use the Bootstrap table classes to create responsive tables. Example:

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">First Name</th>
        <th scope="col">Last Name</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>John</td>
        <td>Doe</td>
      </tr>
      <!-- Add more table rows as needed -->
    </tbody>
  </table>
</div>

82. How do you create a badge in Bootstrap?

Answer:

You can use the Bootstrap badge component to display notifications. Example:

<span class="badge badge-primary">Primary</span>

83. How can you create a jumbotron in Bootstrap?

Answer:

You can use the Bootstrap jumbotron component to create a large callout. Example:

<div class="jumbotron">
  <h1 class="display-4">Hello, world!</h1>
  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <hr class="my-4">
  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>

84. How can you create a modal in Bootstrap?

Answer:

You can use the Bootstrap modal component to display content in a pop-up window. Example:

<!-- Button to trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch Modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Content goes here...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

85. How do you create a dropdown menu in Bootstrap?

Answer:

You can use the Bootstrap dropdown component to create a toggleable menu. Example:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <!-- Add more dropdown items as needed -->
  </div>
</div>

86. How can you create a nav bar in Bootstrap?

Answer:

You can use the Bootstrap nav component to create a navigation bar. Example:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <!-- Add more nav items as needed -->
    </ul>
  </div>
</nav>

87. How do you create a card in Bootstrap?

Answer:

You can use the Bootstrap card component to create a flexible and extensible content container. Example:

<div class="card" style="width: 18rem;">
  <img src="image.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

88. How can you create a form in Bootstrap?

Answer:

You can use Bootstrap’s form components to create forms easily. Example:

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

89. How can you add alerts in Bootstrap?

Answer:

You can use Bootstrap’s alert component to display messages. Example:

<div class="alert alert-success" role="alert">
  This is a success alert!
</div>

90. How can you create a carousel in Bootstrap?

Answer:

You can use Bootstrap’s carousel component to create image sliders. Example:

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="image1.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="image2.jpg" class="d-block w-100" alt="...">
    </div>
    <!-- Add more carousel items as needed -->
  </div>
</div>

91. How can you create a progress bar in Bootstrap?

Answer:

You can use Bootstrap’s progress component to create progress bars. Example:

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

92. How can you create a modal in Bootstrap?

Answer:

You can use Bootstrap’s modal component to create dialog boxes. Example:

<!-- Button to trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch Modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Content goes here.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

93. How can you create a navbar in Bootstrap?

Answer:

You can use Bootstrap’s navbar component to create a navigation bar. Example:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <!-- Add more navigation items as needed -->
    </ul>
  </div>
</nav>

94. How can you create a card in Bootstrap?

Answer:

You can use Bootstrap’s card component to create content boxes. Example:

<div class="card" style="width: 18rem;">
  <img src="card-image.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

95. How can you create a carousel in Bootstrap?

Answer:

You can use Bootstrap’s carousel component to create an image slider. Example:

<div id="carouselExample" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="slide1.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="slide2.jpg" class="d-block w-100" alt="...">
    </div>
    <!-- Add more carousel items as needed -->
  </div>
  <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

96. How can you create a form in Bootstrap?

Answer:

You can use Bootstrap’s form components to create a form. Example:

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

97. How can you create a progress bar in Bootstrap?

Answer:

You can use Bootstrap’s progress component to display a progress bar. Example:

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

98. How can you create a list group in Bootstrap?

Answer:

You can use Bootstrap’s list group component to display a list of items. Example:

<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>
  <!-- Add more list items as needed -->
</ul>

99. How can you create a popover in Bootstrap?

Answer:

You can use Bootstrap’s popover component to display additional information. Example:

<button type="button" class="btn btn-secondary" data-toggle="popover" title="Popover title" data-content="Content goes here.">Popover Button</button>

100. How can you create a tooltip in Bootstrap?

Answer:

You can use Bootstrap’s tooltip component to display additional information when hovering over an element. Example:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip text">Tooltip Button</button>