Bootstrap Interview Questions

Prepare better with the best interview questions and answers, and walk away with top interview tips. These interview questions and answers will boost your core interview skills and help you perform better. Be smarter with every interview.

  • 4.7 Rating
  • 40 Question(s)
  • 35 Mins of Read
  • 6324 Reader(s)

Beginner

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.

Bootstrap ships with vanilla CSS, but its source code utilizes the two most popular CSS preprocessors, Less and Sass. Quickly get started with precompiled CSS or build on the source. Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries. With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.

Bootstrap can be simply included in a web project by using the <link> and <script> tags in the in header of the HTML document. The <link> tag is used to include the Bootstrap stylesheet in the project while the <script> tag is used to include the JavaScript files that come with Bootstrap. 

You can choose to download all the files and put them in the project but you can also choose to use a CDN to include the Bootstrap files. Both ways have their own advantages.

The current stable version of Bootstrap is 4.1.

Bootstrap is a CSS framework. It lets you build your websites quickly without writing all the basic building blocks from scratch all over again. It saves a lot of times and let the developers focus on the business logic. It also ships with a lot of built-in styles, standard components and CSS classes that we use out-of-the-box to scaffold a web app easily.

Bootstrap also lets us build completely responsive websites which means that the websites adjust themselves according to the site of the screen and therefore they look equally good on all screen sizes and platforms.

All these things are built right into the framework and we can simply use these features.

The Bootstrap Grid System is used for layout, specifically Responsive Layouts. Understanding how it works is vital to understanding Bootstrap. The Grid is made up of groupings of Rows & Columns inside 1 or more Containers.

There are 3 simple rules that you need to follow when using Bootstrap Grids to create layouts.

  • Columns must be the immediate child of a Row.
  • Rows are only used to contain Columns, nothing else.
  • Rows should be placed inside a Container.

Those rules are very important. The Rows & Columns always work together, and you should never have one without the other.

The Container acts as the outermost box inside which the rows live. In each row, there must be columns that divide the row, width-wise. The Bootstrap row can be thought of already divided into 12-columns, width-wise. You cannot see these columns but all these columns are of equal width. Columns create horizontal divisions across the viewport. The space between the columns is called the “gutter”.

When you create your own Columns inside the Row, you have to define how many width units (of the total available 12 units) do you want to allocate to a column. You can do that by adding certain classes to the column divs. However, if you do not specify classes specifying the width for each column, all the columns will divide the available width equally.

Here is an example code that creates three equal-width-columns.

<div class="container">
   <div class="row">
     <div class="col-sm">
       One of three columns
     </div>
     <div class="col-sm">
       Two of three columns
     </div>
     <div class="col-sm">
       Three of three columns
     </div>
   </div>
</div>
 

Columns in the same Row layout horizontally across, and then stack vertically down. This vertical “stacking” or “wrapping” occurs when the Column units in a single Row exceed 12. This is known as “Column Wrapping”.

The main colors classes in Bootstrap 4 are:

  • Primary
  • Secondary
  • Success
  • Danger
  • Warning 
  • Info
  • Light
  • Dark

Bootstrap, originally named Twitter Blueprint, was developed by Mark Otto and Jacob Thornton at Twitter as a framework to encourage consistency across internal tools. Before Bootstrap, various libraries were used for interface development, which led to inconsistencies and a high maintenance burden.

Since Bootstrap is developed to be mobile first, we use a handful of media queries to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes.

Bootstrap primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components.

// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap
 
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
 
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
 
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
 
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

While Bootstrap uses ems or rems for defining most sizes, pxs are used for grid breakpoints and container widths. This is because the viewport width is in pixels and does not change with the font size.

We use the margin and padding spacing utilities to control how elements and components are spaced and sized. Bootstrap 4 includes a five-level scale for spacing utilities, based on a 1rem value default $spacer variable. The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.

Where property is one of:

m - for classes that set margin

p - for classes that set padding 

Where sides is one of:

t - for classes that set margin-top or padding-top

b - for classes that set margin-bottom or padding-bottom

l - for classes that set margin-left or padding-left

r - for classes that set margin-right or padding-right

x - for classes that set both *-left and *-right

y - for classes that set both *-top and *-bottom

blank - for classes that set a margin or padding on all 4 sides of the element

Where size is one of:

0 - for classes that eliminate the margin or padding by setting it to 0

1 - (by default) for classes that set the margin or padding to $spacer * .25

2 - (by default) for classes that set the margin or padding to $spacer * .5

3 - (by default) for classes that set the margin or padding to $spacer

4 - (by default) for classes that set the margin or padding to $spacer * 1.5

5 - (by default) for classes that set the margin or padding to $spacer * 3

auto - for classes that set the margin to auto

We can add more sizes by adding entries to the $spacers Sass map variable.

Following are the available styles for buttons in Bootstrap.

  • .btn-primary
  • .btn-secondary
  • .btn-success
  • .btn-info
  • .btn-warning
  • .btn-danger
  • .btn-light
  • .bht-dark
  • .btn-link

We can do that using the btn-lg class. It changes the button’s size to larger than the default size.

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>

We can do that using the btn-sm class. It changes the button’s size to larger than the default size.

<button type="button" class="btn btn-primary btn-sm">Large button</button>
<button type="button" class="btn btn-secondary btn-sm">Large button</button>

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. If you’re familiar with Bootstrap 3, cards replace the old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards. 

<div class="card">
   <img class="card-img-top" src="..." alt="Card image cap">
   <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>

The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.

Here is an example.

<div class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
</div>

Alert in Bootstrap provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. There, colors can be configured so as to display success messages, errors and information to the user.

Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight required contextual classes (e.g., .alert-success).

In Bootstrap, Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don’t use the HTML5 <progress> element, ensuring that we can stack progress bars, animate them, and place text labels over them.

  • We use the .progress as a wrapper to indicate the max value of the progress bar.
  • We use the inner .progress-bar to indicate the progress so far.
  • The .progress-bar requires an inline style, utility class, or custom CSS to set their width.
  • The .progress-bar also requires some role and aria attributes to make it accessible.

Put that all together, and you have the following examples.

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

In Bootstrap, we can choose to have all or some borders around a div. With additive borders, we get all the borders and we can also choose the ones that we want to have. With subtractive borders, we get no borders and we can also choose to remove the ones we do not want. 

Here is an example of additive and subtractive borders.

<span class="border"></span>
<span class="border-top"></span>
<span class="border-right"></span>
<span class="border-bottom"></span>
<span class="border-left"></span>

<span class="border-0"></span>
<span class="border-top-0"></span>
<span class="border-right-0"></span>
<span class="border-bottom-0"></span>
<span class="border-left-0"></span>

To specify border colors, we can simply use the colors classes with the border- prefix. Here are a few example.

<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>

We can use the following classes to get rounded borders.

<img src="..." alt="..." class="rounded">
<img src="..." alt="..." class="rounded-top">
<img src="..." alt="..." class="rounded-right">
<img src="..." alt="..." class="rounded-bottom">
<img src="..." alt="..." class="rounded-left">
<img src="..." alt="..." class="rounded-circle">
<img src="..." alt="..." class="rounded-0">

Here is the example output for the above code snippets.

In Bootstrap, we can use the bg-<color-name> classes to specify background colors in Bootstrap. Here are a few examples.

<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>

In Bootstrap, we use the classes text-lowercase, text-uppercase and text-capitalize to change the case of the text as and when required. Here is an example of the three classes.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>

Output:

lowercased text.

UPPERCASED TEXT.

CapiTaliZed Text.

Bootstrap doesn’t include an icon library by default, but we have a handful of options to choose from. While most icon sets include multiple file formats, Bootstrap recommends SVG implementations for their improved accessibility and vector support.

Iconic and Octicons are ones recommended by Bootstrap.

To use Iconic, for example, all we have to do is include the link tag to include the CSS file in the project, in the document’s header.

<link href="/open-iconic/font/css/open-iconic-bootstrap.css" rel="stylesheet">

And then, use it like this.

<span class="oi oi-icon-name" title="icon name" aria-hidden="true"></span>

In the above snippet, io-icon-name needs to be replaced with the correct name for an icon. 

Breadcrumbs depict the navigational hierarchy of a site, separators in the hierarchy are automatically added by means of CSS.

Bootstrap breadcrumb used for,

  • Documentation page
  • Magazine
  • ERP system

A breadcrumb in Bootstrap is simply an unordered list with a class of .breadcrumb.

A jumbotron indicates a big grey box for calling extra attention to some special content or information. Inside a jumbotron you can put nearly any valid HTML, including other Bootstrap elements/classes.

All we have to do is use a <div> element with class .jumbotron to create a jumbotron.

<div class="jumbotron">
   <h1>Bootstrap Tutorial</h1> 
   <p>Bootstrap is the most popular HTML, CSS...</p> 
</div>

If you want a full-width jumbotron without rounded borders, add the .jumbotron-fluid class and a .container or .container-fluid inside of it.

Form controls automatically receive some global styling with Bootstrap. All textual <input>, <textarea>, and <select> elements with class .form-control have a width of 100%.

Normally, a .from-group and a .form-control class is used for each input inside the form. Here is an example.

<form action="/action_page.php">
   <div class="form-group">
     <label for="email">Email address:</label>
     <input type="email" class="form-control" id="email">
   </div>
   <div class="form-group">
     <label for="pwd">Password:</label>
     <input type="password" class="form-control" id="pwd">
   </div>
   <div class="form-group form-check">
     <label class="form-check-label">
       <input class="form-check-input" type="checkbox"> Remember me
     </label>
   </div>
   <button type="submit" class="btn btn-primary">Submit</button>
</form>

A wrapper element with .form-group is added around each form control to ensure proper margins.

Foundation is a CSS framework designed by ZURB in September 2011. It has a slightly more advanced interface compared to other frameworks. Foundation is compatible on multiple browsers and hand-held devices. The responsive menu is one of its greatest assets. The menu is incredible when it comes to functionality and can also be easily styled using CSS. This responsive framework allows designers and developers to create elegant websites with more of a design-it-yourself approach.

Pros:

  • Design-it-yourself approach
  • Immense customization settings
  • Strong grid system
  • Provides rapid development of code
  • Easy to use templates available for download
  • Lightweight

Cons:

  • More complex when trying to customize
  • Not a great framework for beginners
  • Less popular than Bootstrap

Websites built in Foundation: Adobe, Amazon, Washington Post, Herschel Supply, Pixar Projection, EBay.

Bootstrap is the most commonly used CSS framework composed of HTML, JavaScript and CSS scripts. It was designed by former Twitter employees Mark Toto and Jacob Thornton. It was originally designed to be the interface used by Twitter to keep all the components and elements of their website consistent. Bootstrap has an immense amount of features that make coding a website easy and quick.

Pros:

  • Massive community support
  • Widest variety of themes
  • Best browser capability
  • Has both a fluid and fixed pattern grid system
  • More development tools available
  • Many popular websites are built on this framework

Cons:

  • Not as lightweight when compared to others
  • Difficult to use jQuery plugins
  • Websites are easily recognizable

Websites build in Bootstrap: Newsweek, Vogue, Indeed, NBA, Walmart, Code Academy.

container has one fixed width for each screen size in bootstrap (xs,sm,md,lg) whereas container-fluid expands to fill the available width.

Depending on the width of the viewport that the webpage is being viewed on, the container class gives its div a specific fixed width. These lines don't exist in any form for container-fluid, so its width changes every time the viewport width changes.

With Bootstrap, a navigation bar can extend or collapse, depending on the screen size.

A standard navigation bar is created with the .navbar class, followed by a responsive collapsing class: .navbar-expand-xl | lg | md |sm (stacks the navbar vertically on extra large, large, medium or small screens).

To add links inside the navbar, use a <ul> element with class="navbar-nav". Then add <li> elements with a .nav-item class followed by an <a> element with a .nav-link class.

Here is the code using all the above classes creating the simplest navigation bar.

<!-- A grey horizontal navbar that becomes vertical on small screens -->
<nav class="navbar navbar-expand-sm bg-light">
   <!-- Links -->
   <ul class="navbar-nav">
     <li class="nav-item">
       <a class="nav-link" href="#">Link 1</a>
     </li>
     <li class="nav-item">
       <a class="nav-link" href="#">Link 2</a>
     </li>
     <li class="nav-item">
       <a class="nav-link" href="#">Link 3</a>
     </li>
   </ul>
</nav>

Bootstrap 4 allows us to group a series of buttons together (on a single line) in a button group. We use a <div> element with class .btn-group to create a button group. Here is a simple example with its output.

<div class="btn-group" role="group" aria-label="Basic example">
   <button type="button" class="btn btn-secondary">Left</button>
   <button type="button" class="btn btn-secondary">Middle</button>
   <button type="button" class="btn btn-secondary">Right</button>
</div>

Badges are used to add additional information to any content. Use the .badge class together with a contextual class (like .badge-secondary) within <span> elements to create rectangular badges. Note that badges scale to match the size of the parent element.

<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>

To create a pill-like badge in Bootstrap, we can use the .badge-pill modifier class.

<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>

The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the height from its current value to 0. Given how CSS handles animations, we cannot use padding on a .collapse element. Instead, we have to use the class as an independent wrapping element.

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">

    Button with data-target

  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">

    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

  </div>
</div>

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>.

The .active class can be used to highlight the currently selected menu item.

<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 active"><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="#">Next</a></li>
</ul>\

We can use the utility classes to align the pagination.

<!-- Default (left-aligned) -->
<ul class="pagination" style="margin:20px 0">
   <li class="page-item">...</li>
</ul>
 
<!-- Center-aligned -->
<ul class="pagination justify-content-center" style="margin:20px 0">
   <li class="page-item">...</li>
</ul>
 
<!-- Right-aligned -->
<ul class="pagination justify-content-end" style="margin:20px 0">
   <li class="page-item">...</li>
</ul>

The Tooltip component is a small pop-up box that appears when the user moves the mouse pointer over an element. 

To create a tooltip, we add the data-toggle="tooltip" attribute to an element and we use the title attribute to specify the text that should be displayed inside the tooltip.

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>

Tooltips must be initialized with jQuery: select the specified element and call the tooltip() method.

The .table-striped class adds zebra-stripes to a table. This can be used in combination with .table-dark class to get a dark-striped table.

To create an outline button, we need to use the btn-outline class. We can also use it in combination with the color classes as shown below.

<button type="button" class="btn btn-outline-primary">Primary Outline Button</button>

The .disabled class uses pointer-events: none to try to disable the link functionality of <a>s, but that CSS property is not yet standardized. In addition, even in browsers that do support pointer-events: none, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links.

Description

Prepare better with the best interview questions and answers, and walk away with top interview tips. These interview questions and answers will boost your core interview skills and help you perform better. Be smarter with every interview.
Levels