Google News
logo
Bootstrap-3 Interview Questions
Bootstrap is a powerful front-end framework for faster and easier web development. Bootstrap is the most popular HTML, CSS and JavaScript framework for developing responsive, mobile-first web sites.
Inside the container, the .row class is used to contain the grid columns. Rows should always be placed inside of a container (.container or .container-fluid) to ensure 

proper spacing (between page content and the edge of the browser). 

The Bootstrap .row uses negative margins (-15px) to counteract the padding (15px) of the container. The end result is no visual spacing (margin or padding) on the 

sides of the row within the container. There are several reasons why the “negative margin” approach is used in Bootstrap.
The key components of Bootstrap are:

CSS : It comes with plenty of CSS files
Layout Components : List of layout components
JavaScript Plugins : It contains many jQuery and JavaScript plugins
Scaffolding : It gives a basic structure with link styles, Grid system and background
Customize : To get your own version of framework you can modify your components.
All grid systems have spacing or “gutters” around columns. In the case of Bootstrap, the gutter is created using padding of 15px around each column. The effective 

gutter displayed between neighboring columns in 30px. The outer columns (leftmost & rightmost) need to have 1/2 of the gutter (15px) on the outside to keep spacing 

consistent.

The relationship between .container and .row is made complete with columns (col-*). Each row is divided horizontally using Bootstrap’s column classes col-*.
Bootstrap has a 12-unit grid (instead of 10, 16, etc..) is that 12 evenly divides into 6 (halves), 4 (quarters) and 3 (thirds). This makes adapting to a variety of 

layouts much easier. Bootstrap’s grid columns are identified by different col-(breakpoint)-(units) CSS classes. So for example, col-md-3 would be a column that takes up 3 of the 12 units (or 25%) across in a row.

These grid sizes enable you to change the layout of columns to best match different screen widths and devices__ the essence of responsive design.

xs  :  for the smallest screen widths like smartphones < 768 px
sm  : for small screen widths like smartphones and tablets >= 768 px
md  : â€Šfor medium screen widths like tablets and laptops >= 992 px
lg  :  for large screen widths like desktops >= 1200 px.
Bootstrap 3 supports all the modern browsers with latest version i.e. Firefox, Google Chrome, IE (Internet Explorer), Opera and Safari.
Tables can be easily made with basic html tag and specific classes provided in Bootstrap 3. You can make table with Striped rows, bordered table, hover rows, condensed 

table and responsive table using their specific classes for right results. Read more about Bootstrap 3 tables here.
Yes we can make images responsive by adding class .img-responsive which in turn applies CSS properties with max-width(100%)  as well as height (auto) for covering parent element.
Offset columns are used for more specialized layouts. For more spacing they can be used by pushing column over.

For example :  .col-xs=* classes do not support offset but they are easily simulated using an empty cell.
In bootstrap you can display code in two ways :

<code> tag :  If you are going to display code inline, you should use <code> tag
<pre> tag :  If you want to display the code as a standalone block element or it has several lines then you should use <pre> tag.
The Bootstrap jumbotron a lightweight, flexible  component provides an excellent way to showcase the key content or information on a your website. 

A Bootstrap tooltip is a small pop up that appears when user places the mouse pointer over an element such as link or buttons to provide hint or information about the element being hovered.

The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.
Via data attributes : To add a tooltip, add data-toggle = "tooltip" to an anchor tag. The title of the anchor will be the text of a tooltip.

Ex : <a href="#" data-toggle="tooltip" title="Sample tooltip"> Mouse Hover over </a>

The bootstrap popover plugin is very similar to tooltips.  To create a popover, add the data-toggle="popover" attribute to an element and the title attribute to 

specify the header text of the popover, the data-content attribute to specify the text that should be displayed inside the popover's body.
Glyphicons are icon fonts which you can use in your web projects. Glyphicons Halflings are not free and require licensing, however their creator has made them available for Bootstrap projects free of cost.

To use the icons, simply use the following code just about anywhere in your code. Leave a space between the icon and text for proper padding.
Bootstrap sets a basic global display (background), typography, and link styles :

a) Basic Global display : Sets background-color: #fff; 
b) Typography : Uses the @font-family-base, @font-size-base, and@line-height-base attributes as the typographic base
c) Link styles : Sets the global link color via attribute @link-color and apply link underlines only on :hover
The ".collapse" class is used to specify the collapsible element.  Flexible plugin that utilizes a handful of classes for easy toggle behavior. Click on the button to 

toggle between showing and hiding content.

.collapse hides content
.collapsing is applied during transitions
.collapse.in shows content

You can use a link with the href attribute, or a button with the data-target attribute. In both cases, the data-toggle="collapse" is required.
Media objects in Bootstrap allow you to put media object like image, video or audio to the left or right of the content blocks. Media element can be created using the 

class .media and the source is identified in using the class .media-object. Media-objects are of two types,They are : 
.media
.media-list
The Carousel plugin is used to add a slider to your site. It is useful in condition where you want to display huge amount of contents within a small space on the web pages. Some of the standard carousel includes are :

.carousel (options)
.carousel (‘cycle’)
.carousel (‘pause’)
.carousel (‘number’)
.carousel (‘prev’)
.carousel (‘next’)
To add badge to list group in Bootstrap you have to simply add <span class = “badge”> within the <li> element.
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)
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%.
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.
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>
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>
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.
Class loaders in Bootstrap are responsible for loading classes that are utilized by the JVM to function in a proper manner. 
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.
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' })
 
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>
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 : https://www.freetimelearning.com/bootstrap/bootstrap-affix.php
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>
    </div>
 
</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 !
</div>​
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">
        ...
    </ul>
</div>

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

$('.dropdown-toggle').dropdown()​


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>	
	</a>
	<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">
	      ...
	</ul>
</div>
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.
Advertisement