Bootstrap Interview Questions

Want to become an expert in cracking Bootstrap interview questions?

Start with practicing the questions below. Whether a question involves multiple choice or live coding, we will give you hints as you go and tell you if your answers are correct or incorrect.

After that, take our timed public Bootstrap Interview Questions Test.

To use our service for testing candidates, buy a pack of candidates.

1. Info Button

Bootstrap Styling Public New

Write the HTML markup, using Bootstrap classes, to display a Button that looks like this.

Difficulty

Easy

Time

5min

HTML5, CSS3

Show starting code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Info Button</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  </head>
  <body>
    <!-- Insert HTML code here -->
  </body>
</html>

Run OK, but 4 out of 4 test cases fail:

Button text: Wrong answer
Button type: Wrong answer
Button shape: Wrong answer
Button color: Wrong answer

2. Modal Dialog

Bootstrap Plugins Public New

The HTML page contains a button and modal dialog.

Using just Bootstrap's HTML attributes and no JavaScript, add attributes to the elements so that:

When the Open button is clicked, the modal dialog is opened.
When the Close button is clicked, the modal dialog is closed.

Difficulty

Easy

Time

5min

HTML5, CSS3

Show starting code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Modal Dialog</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>    
  </head>
  <body>
    <button type="button" class="btn btn-primary">Open</button>

    <div class="modal" id="dialog">
      <div class="modal-dialog">
        <div class="modal-body modal-content">
          <button type="button" class="btn btn-danger">Close</button>
        </div>
      </div>
    </div>
  </body>
</html>

Run OK, but 4 out of 4 test cases fail:

Open button has correct attributes : Wrong answer
Close button has correct attributes: Wrong answer
Open button shows dialog: Wrong answer
Close button hides dialog: Wrong answer

3. Tooltip

Bootstrap Plugins Public New

Using only Bootstrap's style classes alter the anchor so that when mouse is hovered over it, the following tooltip is displayed:

A bootstrap hover-over effect.

Difficulty

Easy

Time

5min

HTML5, CSS3

Show starting code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Tooltip</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> 
    <script>
      $(document).ready(function() {
        $('[data-toggle="tooltip"]').tooltip()
      });
    </script>
  </head>
  <body>
    <a href="#">Hover over me!</a>
  </body>
</html>

Run OK, but 3 out of 3 test cases fail:

Tooltip visibility: Wrong answer
Tooltip location: Wrong answer
Tooltip contents: Wrong answer

If you feel ready, take one of our timed public Bootstrap Interview Questions tests:

HTML/CSS and Bootstrap Online Test (Easy / Hard)
HTML/CSS, JavaScript with jQuery, and Bootstrap Online Test (Easy / Hard)
HTML/CSS, JavaScript, and Bootstrap Online Test (Easy / Hard)

Not exactly what you are looking for? Go to our For Jobseekers section.