Bootstrap Interview Questions

Try to solve 4 Bootstrap interview questions below. Hints can help you find answers to questions you are having trouble with.

1. Info Button

Buttons Styling

Easy

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

HTML5, CSS3, Bootstrap 4

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.2.1/css/bootstrap.min.css">
  </head>
  <body>
    <!-- Insert HTML code here -->
  </body>
</html>

Report an issue

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

2. Modal Dialog

Modals Plugins

Easy

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.

HTML5, CSS3, Bootstrap 4

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.2.1/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.14.6/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/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>

Report an issue

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

Plugins Tooltips

Easy

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.

HTML5, CSS3, Bootstrap 4

Show starting code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Tooltip</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/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.14.6/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script> 
    <script>
      $(document).ready(function() {
        $('[data-toggle="tooltip"]').tooltip()
      });
    </script>
  </head>
  <body>
    <a href="#">Hover over me!</a>
  </body>
</html>

Report an issue

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

4. Test Links

Grid layout

Hard

Using Bootstrap classes, modify the div element with the id "links" so that on extra small resolutions (<576px), each link and ad takes one whole row. It should look like this:

On small resolutions and higher (≥576px), both links should take one half of the row and the ads should be invisible. It should look like this:

HTML5, CSS3, Bootstrap 4

Show starting code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Tests</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/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.14.6/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script> 
    <style>
      a, div {
        outline: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div id="links">
      <a href="#">Aptitude tests</a>
      <div>Ads!</div>
      <a href="#">Programming tests</a>
      <div>More ads!</div>
    </div>
    <article>Here you can find various tests...</article>
  </body>
</html>

Report an issue

Each element takes the whole screen width on extra small screens: Wrong answer
Links are in the same row on larger screens: Wrong answer
Each link takes half the screen width on larger screens: Wrong answer
Ads are invisible on larger screens: 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.