Bootstrap 3 Interview Questions
1 .
What are the different button styles in Bootstrap? Explain
Bootstrap has many predefined button styles, and each button reflects either a message to the user or an action to be performed.
 
The different button styles and classes are :
 
* Default (.btn-default)
* Primary (.btn-primary)
* Success (.btn-success)
* Info (.btn-info)
* Warning (.btn-warning)
* Danger (.btn-danger)
2 .
What is form control in bootstrap?
Form control in bootstrap automatically recieves the global styling.All the textual <input>, <textarea>, and <select> elements with class .form-control have a specific width of 100%.
3 .
Explain the types of layouts are used in Bootstrap?
There are two types of layouts available in Bootstrap
 
Fluid Layout (.container-fluid) : In the Fluid layout, the width is 100 %, this layout changes its width as you are browsing content.

Fixed Layout (.container) : In the Fixed layout, the width is adjusted in pixels, it changes in parts (not continuous), and size will be updated at specified intervals.

Both the layouts are responsive, so any of the above two containers can be chosen to create a responsive design website.
4 .
What is bootstrap pagination and how we can use it?
When your site contains a lot of pages, then pagination comes into the picture. Pagination is the handling of the unordered list on your site
 
To create basic pagination add the .pagination class

Example : 

<ul class="pagination">
        <li><a href="#">&laquo;</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">&raquo;</a></li>
 </ul>
5 .
How we can create a progress bar using bootstrap?
Progress bars are used to show the progress of a particular task or the specific action to the user.
 
Here is the example of creating a progress bar with the vertical gradient :
 
Example : 
                                                    
<div class="progress">
	<div class="progress-bar" style="width: 50%;">
		<span class="sr-only">50% Complete</span>
	</div>
</div>
6 .
What are the features of Bootstrap?
One of the highlighting traits of Bootstrap is that it is front-end focused. So, let’s take a glance at other major features. 
 
* Bootstrap is easily customizable
* Bootstrap is free to use library and share library for designing applications
* Bootstrap is quite easy to start with
* Bootstrap comprises of both the LESS and CSS files
* Bootstrap has responsive utility classes
* Bootstrap comprises of readily available templates
* Bootstrap has some pre styles components like Dropdowns, Navigation Bar, Labels, and Badges, etc.
* Bootstrap has many Javascript Plugins.
7 .
Class loaders in Bootstrap – what do you know?
Class loaders in Bootstrap are responsible for loading classes that are utilized by the JVM to function in a proper manner. 
8 .
What is normalizing in bootstrap?
Normalize in Bootstrap refers to the phenomenon where the browsers can be made to display elements in a consistent manner. It is also referred to as browser reset.
9 .
Explain Scrollspy Plugin in Bootstrap and how to use it?
The ScrollSpy plugin is for automatically updating nav targets based on scroll position.  In its basic implementation, as you scroll, you can add <code>.active </code> classes to the navbar based on the scroll position. The dropdown sub items will be highlighted as well.
 
Via Data attributes  : To easily add scrollspy behavior to your topbar navigation, add <code>data-spy="scroll"</code> to the element you want to spy on (most typically this would be the <body>). Then add the data-target attribute with the ID or class of the parent element of any Bootstrap <code>.nav</code> component.
 
<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>
 
Via JavaScript : First you can add position:relative; in your CSS, call the scrollspy via JavaScript:

$('body').scrollspy({ target: '#navbar-example' })
 
10 .
Explain bootstrap well properly.
The Bootstrap well component provides a quick way to apply a simple inset effect to an element.  The class .well is used with <div> element to add well.  
 
<div class="container"> 
  <div class="well">Hi! I am a Well.</div>  
</div>