Bootstrap 3 Interview Questions and Answers
Most Frequently Asked Bootstrap 3 Interview Questions
Here in this article, we will be listing frequently asked Bootstrap 3 Interview Questions and Answers with the belief that they will be helpful for you to gain higher marks. Also, to let you know that this article has been written under the guidance of industry professionals and covered all the current competencies.
Bootstrap 3 is a component library built for rapid design and development of web applications while also considering the mobile first approach. Developers can use bootstrap libraries to ensure that code writing is minimum and does not need to be done from scratch. Bootstrap 3 has all the necessary collection of tools for development. This includes jQuery plugins, CSS plugins and other plugins for designers as well.
Bootstrap 3 released on 19th of August 2013. Bootstrap 3 released after 2 years after the first public release of the first version of Bootstrap.
The original name of bootstrap was twitter blueprint, and it was developed by the two twitter employees Mark Otto and Jacob Thornton. But after few months many other developers also started contributing to this project as a part of Hackathon ( Hack-week), and after then the name changed from Twitter blueprint to Twitter Bootstrap, and it got released as a completely open-source project on 19th of August 2011.
YES. Bootstrap 3 is a “mobile first.”This means that code is written to ensure that it works on cell phones screen first and then it is scaled to be looking good for the bigger screens. The responsive design is in-built in bootstrap. The tables are designed to be responsive to a particular class to make them fold according to the screen size.
| S.no | Bootstrap 3 | Bootstrap 4 |
|---|---|---|
| 1. | It has 4 grid system | It has 5 grid system |
| 2. | The offset class of Bootstrap 3 is (col-md-offset-4). | The offset class of Bootstrap 4 is (offset-md-4). |
| 3. | In Bootstrap 3, this (.img-responsive) class is used for responsive image. | In Bootstrap 4, this (.img-fluid) class is used for responsive image. |
| 4. | In Bootstrap 3 (.input-lg) and (.input-sm) is used to increase or decrease the input size. | In Bootstrap 4 (.form-control-lg) and (.form-control-sm) is used to increase or decrease the input size. |
| S.no | Bootstrap | Bootstrap 3 |
|---|---|---|
| 1. | No support for panels. | Support added with a host of classes for panels |
| 2. | Form actions | Dropped support for form actions. |
| 3. | Gridless than 768px not supported. | Extra-small (less than 768px) are now supported. |
| 4. | Only “.alert” class for the danger | Added “danger” and “warning” class. |
Affix plug-in helps in locking an HTML element to be fixed with another set. Affix Plugin is a set of classes for toggling off and on the behavior of locking and unlocking. There are 3 classes for the purpose of toggling:-“.affix,” “.affix-top,” and “.affix-bottom.”
Each class is for a specific state. We must add our own CSS properties to manipulate the actual positions; the only exception is that of “position:fixed” on the “.affix” class. Affix plugin is used as it helps in easy handling of locking elements.
Filters are part of the jQuery framework. Filters are used to select HTML elements using classes from CSS and filters from jQuery. Bootstrap uses jQuery to help with filters. For specific tasks, we can use different filters like “first” or “eq().” We can use specific search filters for searching where only the correct matching element is returned. When we use a case-insensitive search, it gives results which can be in upper case or lower case. Filters can be used in drop-downs, text areas, and menus.
The bootstrap tooltip plugin is a little box which comes out when the mouse pointer is moved over an element. The bootstrap tooltip Plugin can be added independently (using the Bootstrap's single "tooltip.js" file) or it can be added entirely at once (with the use of the bootstrap.js" or with the use of the "bootstrap.min.js").
To create a Tooltip plugin, the data-toggle="tooltip" attribute has to be added to an element. The attribute title has to be used to define the text which has to be displayed within the tooltip.
<a href="#" data-toggle="tooltip" title="Bootstrap!">Bootstrap Interview Questions</a>
The bootstrap tooltip should be initialized with jQueryby selecting the specified method and calling the tooltip()method
Majority of the web pages have a menu. The menu is displayed with the help of Bootstrap Tabs and Pills. The Menu is mostly defined in a <ul> tag which is an unordered list tag. Tab and pills are the different styles to shows menus according to functionality.
Bootstrap Tabs:-Tabs are useful for showing different content which is not to be displayed at one time in one place. When users want to navigate they can use Tabs for browsing.
The bootstrap Tabs are created with <ul class="nav nav-tabs">. The current page can be marked with <li class="active">.
Bootstrap Pills:- pills give the effect of buttons on the menu. So users feel that they are using a button instead of a hyperlink. We can use pills for navigation purpose.
The Bootstrap pills are created with <ul class="nav nav-pills">
To create navigation Bootstrap tabs:-
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home Page</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
Tabs can also have the drop-down menus to show
Example:- To create Bootstrap Pills
<ul class="nav nav-pills">
<li class="active"><a href="#">Home Page</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
We can do it in two ways.
1. If you open the popup by js then you can use
$('#Your_Popup_id').modal({backdrop: 'static', keyboard: false})
2. If you are use data attributes then you can do it by the use of
<a data-target="#Your_Popup_id" data-toggle="modal" data-backdrop="static" data-keyboard="false">
Click here to open popup
</a>`