10 Essential Twitter Bootstrap Interview Questions*

Consider the HTML code snippet below.

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Example tooltip">Hover over me</button>

What is missing for a tooltip to show properly?

Bootstrap’s Tooltip plugin is not CSS-only, like other plugins are. For performance reasons, the Tooltip plugin is opt-in, and to use it you must initialize it using JavaScript with the following example code:

$(function () {
  $('[data-toggle="tooltip"]').tooltip();
});
Fields marked with an asterisk (*) are required
Comment submitted succesfully. Thank you.
We are going to review the comment and get back to you as soon as possible.

What is the difference between the following two lines of code?

$('#myModalPrompt').modal({ keyboard: false });
$.fn.modal.Constructor.DEFAULTS.keyboard = false;

Explain your answer.

The first line will initialize a modal dialog prompt with id #myModalPrompt, and set only it to ignore keyboard event. The second line will change the default settings for the modal plugin by modifying the plugin’s Constructor.DEFAULTS object, and will have an impact on all modal dialog prompts.

Fields marked with an asterisk (*) are required
Comment submitted succesfully. Thank you.
We are going to review the comment and get back to you as soon as possible.

Consider the HTML code snippet below. What will the output be, and why?

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 65%">
    <span class="sr-only">65% sucesfuly completed</span>
  </div>
  <div class="progress-bar progress-bar-warning" style="width: 20%">
    <span class="sr-only">20% completed with warnings</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 15%">
    <span class="sr-only">15% did not complete</span>
  </div>
</div>

By placing multiple bars under the same .progress parent element, Bootstrap will stack them into one single progress bar. Since the sum of the progress bar is 100%, the progress bar will be full width and fully populated.

Fields marked with an asterisk (*) are required
Comment submitted succesfully. Thank you.
We are going to review the comment and get back to you as soon as possible.

What will be the default Bootstrap look of the alert created with this following code:

<div class="alert" role="alert">Warning! I'm missing something.</div>

Alert messages are used to provide feedback message that usually require the attention of the user. Here it is important to note that Bootstrap Alerts don’t have default class. If a contextual class such as .alert-success, .alert-info, .alert-warning, or .alert-danger, is not provided, a default gray alert will be created.

Fields marked with an asterisk (*) are required
Comment submitted succesfully. Thank you.
We are going to review the comment and get back to you as soon as possible.

Explain what the following code does, and where they are useful:

<a href="#">Home <span class="badge">36</span></a>

This code will generate a link with an inline badge that provides important notifications to the user, such as number received or unread messages or number of friend requests. Badges are most commonly used in message applications and social networking sites.

Fields marked with an asterisk (*) are required
Comment submitted succesfully. Thank you.
We are going to review the comment and get back to you as soon as possible.

What will be the output of the following HTML code:

<ul class="list-unstyled">
  <li>Item 1</li>
  <li>Item 2</li>
    <ul>
      <li>Nested item 2.1</li>
      <li>Nested item 2.2</li>
      <li>Nested item 2.3</li>
    </ul>     
  <li>Item 3</li>
</ul>

Explain your answer.

If we apply .list-unstyled to a list, it will remove the default list-style and left margin on the list items. But only for the immediate children. Main list items will be without any style, and nested list items will still have default unordered nested list-style.

Fields marked with an asterisk (*) are required
Comment submitted succesfully. Thank you.
We are going to review the comment and get back to you as soon as possible.

What global styles are applied as a part of Bootstrap’s default typography?

Bootstrap sets the global default font-size to 14px, with a line-height of 1.428. The default font is changed to Helvetica and Arial with sans serif fallback. All these styles are applied to the <body> and all paragraphs, with the addition that <p> (paragraphs) receive a bottom margin of half their computed line-height, which is 10px by default.

Fields marked with an asterisk (*) are required
Comment submitted succesfully. Thank you.
We are going to review the comment and get back to you as soon as possible.

Consider the following HTML code snippet:

<div class="row">
  <div class="col-xs-12 col-md-3">.col-xs-12 .col-md-3</div>
  <div class="col-xs-12 col-md-3">.col-xs-12 .col-md-3</div>
  <div class="col-xs-12 col-md-3">.col-xs-12 .col-md-3</div>
  <div class="col-xs-12 col-md-3">.col-xs-12 .col-md-3</div>
</div>

What will be the output of the following HTML code on mobile and on desktop view? Explain your answer.

.col-xs-* class defines the number of grids for extra small devices, and .col-md-* defines the number of grids for desktop devices and above. This example will render on the desktop with four columns, and on mobile the columns will have full width and will be stacked on each other.

Fields marked with an asterisk (*) are required
Comment submitted succesfully. Thank you.
We are going to review the comment and get back to you as soon as possible.

How many different media queries are used by the Bootstrap grid system by default?

The Bootstrap grid system provides four tiers of classes: xs for phones (<768px), sm for tablets (≥768px), md for desktops (≥992px), and lg for large desktops (≥1200px). The hidden trick in this question is that there are only three media queries. Bootstrap is mobile first by design, so the default styles are for small devices, and media queries are then added on for larger screens, as follow in LESS code:

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }
Fields marked with an asterisk (*) are required
Comment submitted succesfully. Thank you.
We are going to review the comment and get back to you as soon as possible.

What dependencies does Bootstrap require for it to work properly?

The only dependency that Bootsrap requires to work properly is jQuery, and this is only for Bootstrap’s JavaScript plugins. At the moment, Bootsrap v3.3.4 requires jQuery v1.9.1 or later.

Fields marked with an asterisk (*) are required
Comment submitted succesfully. Thank you.
We are going to review the comment and get back to you as soon as possible.
* There is more to interviewing than tricky technical questions, so these are intended merely as a guide. Not every “A” candidate worth hiring will be able to answer them all, nor does answering them all guarantee an “A” candidate. At the end of the day, hiring remains an art, a science — and a lot of work.
Submit an interview question
Submitted questions and answers are subject to review and editing, and may or may not be selected for posting, at the sole discretion of Toptal, LLC.
All fields are required
Thanks for submitting your question.
Our editorial staff will review it shortly. Please note that submitted questions and answers are subject to review and editing, and may or may not be selected for posting, at the sole discretion of Toptal, LLC.
Josh Smith
United States
Josh is a freelance full stack developer, from graphic design on down to systems administration. He has founded two companies and led product development and engineering work at two others. He loves data-driven design, continuous deployment, and customer development. He fully believes in applying the scientific method to everything he does.
Yaron Guez
United States
Yaron is a software architect, web developer, and entrepreneur based out of San Diego, CA with a decade of advanced programming experience and an ability to craft elegant solutions to complex problems. An active participant in the San Diego tech community and a co-organizer of the Advanced WordPress Meetup.
Andrew Onyshchuk
Ukraine
Andrew is an experienced web developer who is obsessed with learning newer and better technologies to bring the best solutions to all products and ideas. He possesses a vast range of skills and has experience with many different technologies, designs, and methods of execution.
Alvaro 1506e7

Are you hiring Twitter Bootstrap developers? We'll find you a great freelance Twitter Bootstrap developer to join your team.

Alvaro Oliveira
VP of Talent Operations