Google News
Bootstrap-3 Interview Questions
The Affix plugin allows an <div> element to become affixed (locked) to an area on the page. This is often used with navigation menus or social icon buttons, to make them "stick" at a specific area while scrolling up and down the page.
The bootstrap affix plugin toggles between three classes, each representing a particular state: .affix, .affix-top, and .affix-bottom. You must provide the styles, with the exception of position: fixed; on the  .affix class.

View More :
Collapsing elements are useful for concealing and depicting a lot of content. The .collapse class shows the presence of a collapsible element. 
The .collapse conceals the content
The .collapse .show depicts the content
The .collapsing is applied at the time of content transition.
Panel components are used when you want to put your DOM component in a box. To get a basic panel, just add class . In most basic form the panel component applies some border and padding around the content. 
Total bootstrap panels are :  Basic Pnael,  Panel with Heading,  Contextual Alternatives,  panel with Footer,  Panel with tables, Panel with list groups.
Example : 
<div class="container-fluid">
   <div class="panel panel-default">
        <div class="panel-body">Hi this is basic panel !</div>
You need to follow a few steps to build a dismissal alert :
First, you have to add a basic alert by creating a wrapper <div> and adding a class of .alert and one of the four contextual classes.
Also add optional .alert-dismissable to the above <div> class.
Next, you have to add a close button.
Finally, use the <button> element with the data-dismiss = “alert” data attribute.

Example : 

<div class="alert alert-success alert-dismissable">
        <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
         Free Time Learning is successfully updated !
The steps for creating basic or vertical forms include :
* Add a role form to the parent <form> element

* Wrap labels and controls in a <div> with class .form-group. This is required to achieve optimum spacing

* Add a class of .form-control to all texturl <input> , <textarea> , and <select> elements
There are three ways of toggling the dropdown plugin’s hidden content in Bootstrap :
With data attributes : Add data-toggle = “dropdown” to some button or link to toggle a dropdown. For example,

<div class = "dropdown">
    <a data-toggle = "dropdown" href = "#"> Dropdown trigger </a>
    <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">

With JavaScript :  Following method is used for calling the dropdown toggle via JS:


Using data-target attribute in place of href=“#” – If the web browser isn’t enabling JavaScript, then it is better to keep links intact. For this, the data-target attribute is preferred over href=“#”. For example,

<div class = "dropdown">
	<a id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/somepage.html"> 
		 Dropdown <span class = "caret"></span>	
	<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">
The .media class allows a media object, such as audio, images, or video, to float to the left or right of a content block. For adding article lists or comment threads to an unordered list, we use the .useful class.
Bootstrap uses very fewer preprocessors as it supports less and it allows the designing and development for both mobile and desktop. On the other hand, Foundation supports sass processors and it is used only for mobile UI designing.