Bootstrap Interview Questions And Answers

bootstrap interview questions and answers   Top 30 Bootstrap Interview Questions And Answers

1) What is bootstrap technology?

● Bootstrap is an open source front-end framework developed for faster and easier web development.
● Bootstrap comprises HTML and CSS based web design templates for forms, buttons, tables, navigation, modals, image carousels etc.
● It also enables you to easily create responsive designs i.e. the designs which fit in different devices smartly automatically.

2) Who developed bootstrap?

Mark Otto and Jacob Thornton developed bootstrap in June 2014.

3) What are the advantages of bootstrap?

● Bootstrap is very easy to use.
● It is responsive in nature that is it can easly fits in multiple devices like mobile, web, tab etc.
● Its compatibility with multiple browsers and devices.
● Bootstrap is open source and has big community for its support.
● It can be easily customizable.
● It provides lots of helper classes which makes it easy to develop the responsive site.

4) What is bootstrap CDN?

Bootstrap CDN is Content Delivery Network, that is if you don't want to download the bootstrap files or don't want to keep them locally, you can use this CDN to include the in your project.

5) How to use bootstrap CDN?

MaxCDN can be used for this support.

CDN CSS file can be included as mentioned below:

<link rel="stylesheet" href="">

CDN JS file can be included as mentioned below:
<script src=""></script>

6) How to make bootstrap design responsive for mobile devices?

Mobile first is the part of bootstrap core framework. For proper rendering and touch zooming across different mobile device following meta tag can be included in HTML.

<meta name="viewport" content="width=device-width, initial-scale=1">

device-width : This enables the design to adjust according to the device

initial-scale=1 : Initial zoom set when design first loaded in the browser of different devices.

7) In bootstrap, what is the difference between container and container-fluid?

Container class gives fixed width container whereas container-fluid provides full width container.

8) What is bootstrap grid? And what are there classes?

While working on the designing part of your responsive website or project, bootstrap grid allows upto 12 columns in the screen where these can be adjusted according to the screen size of different devices like desktop, laptop, mobile, tablets etc.

In bootstrap grid there are four different classes for different devices:
xs - This class can be use for mobiles with screen less than 768px width
sm - This class can be use for tablets with screen more than 768px width
md - This class can be use for small laptops with screen greater than 992px width
lg - This class can be use for laptops and desktops with screen greater than 1200px width

9) In bootstrap, how this bootstrap grid works?

Below are the sample code of two equal columns using bootstrap grid. This will automatically gets adjusted according to the devices.

<div class="row">
    <div class="col-sm-4">.col-sm-4</div>
    <div class="col-sm-4">.col-sm-4</div>

10) In bootstrap grid what does .col-sm-4 signifies?

It signifies spans 4 columns, similarly .col-sm-6 signifies spans 6 columns. While choosing the classes you need to make sure that there sum always ends up to 12.

11) What is the default setting of bootstrap typography?

The default font size is 14px, which is applicable to all the body and paragraph tags.

12) What are contextual classes in bootstrap?

Contextual classes are the classes that we can use color the table rows and columns based on the action that we need to perform. Suppose for negative scenario we can use danger class which will put the background color of the row to light red.
Following are the different contextual classes:
● active
● success
● info
● warning
● danger

13) What are responsive images in bootstrap? And how we can achieve the same?

Responsive images are the images which can be adjusted automatically according to the screen size. We can use the same by adding img-responsive class to the img HTML tag.

This helps scaling up the images in smoother and nicely manner. One thing that we need to take care is the width and height of the image. Make sure to set the following:

height: auto;<br>
max-width: 100%;<br>
display: block;

14) How we can make responsive videos using bootstrap?

We have different classes in bootstrap that can be applied to different HTML elements like iframe, video, embed etc. embed-responsive-item class of bootstrap framework can be used to make responsive videos.

15) What is Bootstrap Jumbotron?

Bootstrap Jumbotron is a big box which can be used to highlight the content. This box will have round corners and grey text. It also enlarge the text mentioned inside this box.

16) What is Bootstrap Wells?

Wells is the class in bootstrap which adds the rounded border, gray background and padding to the element to which it is applied.

We can have different well sizes as well. Following classes can be used to apply different sizes:
well-sm - For small wells
well-lg - For large wells
By default the size of wells is medium.

17) What is Bootstrap Alert?

In bootstrap we have all together different classes which can be use to include predefined alerts. Following are the alert classes which can be use as per the need of the project: alert-success, alert-info, alert-warning, alert-danger.

 <div class="alert alert-warning">

18) What are Bootstrap Button Groups?

Bootstrap allows to group the series of buttons in a group. This can be aligned vertically or horizontally.
Following are the some of the classes: btn-group, btn btn-primary, btn-group btn-group-lg, btn-group-vertical, btn-group btn-group-justified, btn-group btn-group-justified etc. For dropdown we can use class btn btn-primary dropdown-toggle.

19) What are Bootstrap Glyphicons?

Bootstrap provides 260 glyphicons which can be used in buttons, forms, toolbars, navigation, text etc.

<p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p>

20) What are bootstrap badges and labels?

Badges in bootstrap are the numeric value associated with the items or links.Badge class can be use to create badge for the element.
Label class are used to provide the information. Following are the additional contextual label class: label-default, label-primary, label-success, label-info, label-warning and label-danger.

21) What are Bootstrap Progress Bars?

Bootstrap provides the cool progress bars classes which can be easily used to depict the progress of the activity.
Different contextual classes are: progress-bar progress-bar-success, progress-bar progress-bar-info, progress-bar progress-bar-warning, progress-bar progress-bar-danger, progress-bar progress-bar-info progress-bar-striped, progress-bar progress-bar-striped active etc.

Bootstrap Progress bars are not supported in IE 9 and earlier browsers.

22) What is the significance of breadcrumb class in bootstrap?

Breadcrumb class indicates the location of the current page. That is it shows the navigational path from the home page something like this.
Home/search etc.

23) What is bootstrap pager?

Pager is nothing but pagination having previous and next buttons. To use this we need to use pager class in

    HTML element. Other classes that we can use is previous and next. Below is the sample example:

    <ul class="pager">
      <li class="previous"><a href="#">Previous</a></li>
      <li class="next"><a href="#">Next</a></li>

24) What is Bootstrap Carousel Plugin? And how to use it?

Bootstrap Carousel Plugin is a component which is used to cycle through the elements of the carousel. carousel slide class is used to set the carousel effect for the images.

25) What is Bootstrap Modal Plugin?

This is pop up window which will fade the background and display on top of the window. Following things to be used to create this effect in bootstrap: class="btn btn-info btn-lg" data-toggle="modal"

26) How to create tooltip in bootstrap?

Tool tip can be created by using data-toggle="tooltip" attribute. Below is the sample code to create tooltip in bootstrap:

<a href="#" data-toggle="tooltip" title="click">Click</a>

27) How we can position the tooltips data in bootstrap?

data-placement attribute can be used to position the data. Example:

<a href="#" data-toggle="tooltip" data-placement="top" title="Hover!">Hover</a>

28) What is popover plugin in bootstrap?

When user clicks on the link a pop up box will"popover" attribute can be used for this affect.

29) What is Bootstrap Scrollspy Plugin in bootstrap?

It is used to update the links automatically based on scroll positions. In order to create scrollspy we need to include data-spy="scroll" attribute to the element which we need to include as scrollable area.

30) What is Bootstrap Affix Plugin in bootstrap?

This allows the elements to be locked to the area in the page. This is used in navigation menus.

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">