Bootstrap Interview Questions

Who developed the Bootstrap?

Mark Otto and Jacob Thornton at Twitter


What are the key components of Bootstrap?

Plenty of CSS files
Scaffolding
List of layout components
JavaScript Plugins
Customize your components

 Why Use Bootstrap?

Easy to use
Responsive features
Mobile-first approach
Browser compatibility
Fluide & Fixed Layout available


From where we can download the Bootstrap?

http://getbootstrap.com/



Can we include bootstrap CDN instead of download the Bootstrap?

Yes sure, we can do from following
<!-- Latest compiled and minified CSS -->
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"></link>
Question: What is class loaders in Bootstrap?
Class loader is a part of Java Runtime Environment which loads Java classes into Java virtual environment.

What are different types of layout available in Bootstrap?

Fluid Layout
Fixed Layout



 What is Fluid Layout in Bootstrap?

Fluid layout adapts itself to different browser. Means design automatic adjust according to browser size.


What is Fixed Layout in Bootstrap?

Fixed layout doesn't adapts itself to different browser but it can be responsive. 



What is responsive layout?

Responsive layout which is able to adapt itself to different sizes as well, but when resizing, the number of columns changes according to the available space.


What is difference between Fluid Layout and responsive Layout?

Fluid layout adapts itself to different browser window sizes, all the values used are calculated proportionally to the viewport size, so when resizing, all the columns are resized.

Responsive layout is able to adapt itself to different sizes as well. When resizing, the number of columns changes according to the available space.



What function you can use to wrap a page content?

.container 


How to classified pagination in bootstrap?

Add class "pagination" on your page for pagination.

.disabled, .active are available

.pagination-Ig, .pagination-sm to get different sizes



What is Jumbotron?

Jumbotron is used for content that you want to highlight like some slogan OR marketing headline.


What to display code in bootstrap?

you can use following tags
<code></code>



 What is Modal plugin used for in Bootstrap?

Modal Plugin is a child window that is layered over its parent window


What is Bootstrap Container in Bootstrap?

Bootstrap container is a class which is useful and creating a centred area in the page for display.


 What is Bootstrap collapsing elements?

Bootstrap collapsing elements enables you to collapse any element without using external JavaScript.


How to add badge to list group in Bootstrap?

 in LI Tag



What is Media Object?

Media objects in Bootstrap enables to put media object like image, video or audio


How do we create a table using bootstrap ?

Bootstrap contains predefined CSS of all functions to make user easy to design.Here we create a table using bootstrap. 


<table class="table">
   <thread>
          <tr>
               <th>S/no.</th>
                <th>Name</th> 
                <th>Details</th>
                <th>Contact</th>
           </tr> 
   </thread>
        <tbody>
                 <tr>
                     <td>1</td>
                     <td>DotNetFunda</td>
                     <td>Fundamentals of .Net</td>
                     <td>support@dotnetfunda.com</td>
                 </tr>
       </tbody>




How do we create button group in Vertical manner in Bootstrap ?

There is btn-group-vertical to arrange and group them in vertical manner. 
Example of Vertical Button Groups 

<div class="btn-group-vertical">
     <button type="button" class="btn btn-primary">Home</button>
     <button type="button" class="btn btn-primary">Settings</button>
     <button type="button" class="btn btn-info">Contact us</button>
     <button type="button" class="btn btn-danger">Testimonials</button>
 </div> 

How do we create large button groups in bootstrap ?

There are different sizes of btn-group classes. They are btn-group-lg (forlarge button group), btn-group-sm (for small button group) and btn-group-xs (for extra small buttons). 
Here, we will create on for large button group. 
Example : 

<div>
     <div class="btn-group btn-group-lg">
         <button type="button" class="btn btn-primary">Home</button>
         <button type="button" class="btn btn-primary">Settings</button>
         <button type="button" class="btn btn-info">Contact us</button>
         <button type="button" class="btn btn-danger">Testimonials</button>
     </div>
</div>

In the same way we can create small button and extra small button groups by changing "btn-group btn-group-(lg)/(sm)/(xs)"

How do we create Block Buttons in Bootstraps ?

Here we added btn-block class which is responsible to create the block buttons in our web page. 

Example: 

<div>
     <button type="button" class="btn btn-success btn-block">Accept</button>
     <button type="button" class="btn btn-danger btn-block">Decline</button>
 </div> 

Different types of predefined button in Bootstraps ?

We have some predefined types of buttons such as primary, success, warning, danger and info which are of different types in terms of colors. 
Here are shown in the example 


<div>
     <button type="button" class="btn btn-default">Default</button>
     <button type="button" class="btn btn-primary">Primary</button>
     <button type="button" class="btn btn-warning">Warning</button>
     <button type="button" class="btn btn-success">Success</button>
     <button type="button" class="btn btn-info">Info</button>
     <button type="button" class="btn btn-danger">Danger</button>
     <button type="button" class="btn btn-link">Link Button</button>
 </div> 

These are visible with different colors in the browser.

Write a program to use pop overs in Bootstraps ?


To use pop overs in Bootstrap, We have to write little JavaScript code to create Popovers for HTML elements. 
Example : 
Javascript : 

<script type="text/javascript">
 $(document).ready(function ()
 {  
   $(".popover-pop a").popover() 
});
 </script>

Here is HTML Elements . '
HTML : 

<div> 
    <ul class="popover-pop list-inline">
         <li><a href="#" class="btn btn-primary" data-toggle="popover" title="DotNetFunda" data-content="Fundamentals of .Net">DotNetFunda</a></li>
     </ul>
 </div>

Run the combination code to get pop over link

Write a program to show the Pop overs with Delay ?

In Bootstraps we can also set some delay to the popovers. For that, we have to use delay property of Bootstrap.We need to write the code combination of Javascript and HTML. 

Example 
Javascript : 

<script type="text/javascript">
 $(document).ready(function ()
 {   
  $(".popover-pop a").popover({ 
       delay: { show : 1000 }   
    });
 });
 </script>
HTML element: 

<div>
     <ul class="popover-pop list-inline">
         <li><a href="#" class="btn btn-success" data-toggle="popover" title="DotNetFunda" data-content="Fundamentals of .Net">DotNetFunda</a></li>
     </ul>
 </div> 

Write a program to show a dropdown with Javascript ?

in bootstraps we can also give action to the drop menu using javascript. 

Example : 
Javascript 

<script type="text/javascript">
 $(document).ready(function ()
 {  
   $(".menuDrop").dropdown(); 
     });
 </script> 

HTML element 
Drop down page is : 

<div class="dropdown">
     <a href="#" class="btn btn-primary menuDrop">Menu<b class="caret"></b></a>
     <ul class="dropdown-menu">
         <li><a href="#">Option1</a></li>
         <li><a href="#">Option2</a></li>
         <li class="divider"></li>
         <li><a href="#">Settings</a></li>
     </ul>
 </div>



Thanks for visiting.......