Bootstrap 3 Interview Questions and Answers
Most Frequently Asked Bootstrap 3 Interview Questions
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>`
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