Bootstrap Interview Questions and Answers (31) - Page 1

Latest and authentic Interview questions. You can also post an interview question and win monthly prizes as well as gain community credit points.

31 records found.

Post |

Interview Experiences |

Interview FAQs |

Online Interviews |

Exclusive Questions

Get 650+ Questpond's Interview videos on discount

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>

Write a code to show that how a Loading button works in Bootstraps ?

If you want to change the name of the button after the completion of a process.Here we use Javascript and HTML .

Example :

<script type="text/javascript"> 

$(document).ready(function ()

 {    

 $("#ldBtn .btn").click(function () {  

       $(this).button('loading').delay(2000).queue(function () { 

            $(this).button('complete'); 

            $(this).dequeue();   

      }); 

    });

 });

 </script>

HTML Content

<div id="ldbtn">

     <button type="button" class="btn btn-success" data-complete-text="Loading Completed">Load</button>

 </div>

Here we give that #ldbtn as div ID
Now run combination and see the output .

Write a program to show how toggle button works in Bootstraps ?

We have to write a little javascript and HTML for toggle function in Bootstrap .

Example :
Javascript

<script type="text/javascript"> 

$(document).ready(function ()

 {  

   $("#toggleBtn .btn").click(function () {

         $(this).button('toggle');

     });

 });

 </script>

Adding buttons for this toggle function
HTML :

<div id="toggleBtn">

     <button type="button" class="btn btn-success">True</button>

     <button type="button" class="btn btn-danger">False</button>

 </div>

Run the code combination in your browser.

Show that how an animated striped progress- Bar is created in Bootstraps ?

If you want an active progress bar in which stripes are moving linearly, Add active to the above striped progress bar.

Example :

<div class="progress progress-striped active">

     <div class="progress-bar progress-bar-info" style="width: 70%;">

             Please wait...

     </div>

 </div>

Run the code in web page.

In Bootstraps show that how panels can be created with footers. ?

We can include footer in the panel by using panel-footer predefined class of Bootstrap

Let us see an example :

<div class="panel panel-primary">

         <div class="panel-heading"><p class="panel-title">DotNetFunda</p></div>

         <div class="panel-body">DotNetFunda is the website for those who are looking for .Net Tips and Tricks.</div>

         <div class="panel-footer clearfix">

             <div class="pull-right">

                 <a href="#" class="btn btn-warning">Back</a>

                 <a href="http://dotnetfunda.com" class="btn btn-success">DotNetFunda</a>

                 <a href="#" class="btn btn-info">Next</a>

             </div>

         </div>

 </div>

if you run this code you will see the following result in your browser

How do we create disable links in the NAV components ?

In order to disable links of any Nav components, Bootstrap provides disabled class.

Example :

<ul class="nav nav-pills">

         <li class="active"><a href="#">Home</a></li>

         <li><a href="#">User</a></li> 

        <li><a href="#">Settings</a></li>

         <li class="disabled"><a href="#">Admin</a></li>

 </ul>

we have given disabled class to the Admin element.
Run the the code in the browser.

How do we create grouping Input with search Button ?

Using Bootstrap, we can easily create a beautiful Search box with Button grouped to it
Example :

<form>

         <div class="row">

             <div class="col-xs-7">

                 <div class="input-group">

                     <input type="text" class="form-control" placeholder="Enter keyword to Search"> 

                    <span class="input-group-btn">

                         <button type="button" class="btn btn-success"><span class="glyphicon glyphicon-search"></span> Find</button>

                     </span>

                 </div>

             </div>

         </div>

 </form>

we have used Grouping classes of Bootstrap
Run the code in browser .

How do we create a list grouping in Bootstraps ?

There are some predefined grouping classes in bootstrap.css.

Example :

<ul class="list-group">

         <li class="list-group-item">Home</li>

         <li class="list-group-item">Favourites</li>

         <li class="list-group-item">My Cloud</li>

         <li class="list-group-item">Network</li>

         <li class="list-group-item">Messages</li>

         <li class="list-group-item">Settings</li>

 </ul>

list-group & list-group-item are the classes in bootstrap.css. These predefined classes .
Run the code in the browser and see the predefined classes that shows in the list form .

How do we create Disable buttons in Bootstraps ?

we have to disable the button to the user which doesn't been accessed

Example :

<div>

     <a href="#" class="btn btn-info disabled">Disabled Button</a>

     <a href="#" class="btn btn-info">Normal Button</a>

 </div>

Run the code in the browser and see the disable buttons

How to create Pull-left, Pull-right, Text-muted elements in Bootstraps ?

Pull-left, Pull-right, Text-muted elements are used to adjust your content to keep it where ever you want

Example :

<div class="pull-left">Text pulled to left</div> <br /><hr />

  <div class="pull-right">Text pulled to right</div> <br /><hr />

  <div class="text-muted">Text is Disabled.</div> <hr />

</div>

Run the code in browser

What is Jumbotron . Explain it with example ?

In bootstraps jumbotron is like a container in which we can place all our elements

Example :

<div class="jumbotron">

     <h1>Hello, Welcome to Bootstrap</h1>

     <h3>Bootstrap is developed by Twitter Inc. which is used to design the websites with enormous look and feel.</h3>

     <a href="http://getbootstrap.com/" class="btn btn-success btn-lg">Download Bootstrap</a>

     <a href="#" class="btn btn-warning">Learn more on Bootstrap</a>

 </div>

Run the code in the browser .

How do we create a simply warning notification alert in Bootstraps ?

Alert is for showing notifications and alerts in the browser.
Here is a simply example for alert notification .
Example :

<div class="alert alert-warning">

     This is a Warning Notification

     <a href="#" class="close" data-dismiss="alert">&times;</a>

 </div>

Give any example to create stylish images in Bootstraps ?

In Bootstrap css there are some predefined such as image circle , image rounded, image thumbnail.Image circle sets circle frame to the image.Image rounded sets curved border to the image.Image thumbnail sets thumbnail image.
Example :

<div>

         <img src="/DotNetFunda.jpg" class="img-circle" alt="Circular" />

         <img src="/DotNetFunda.jpg" class="img-rounded" alt="Rounded" />

         <img src="/DotNetFunda.jpg" class="img-thumbnail" alt="Thumbnail" />

 </div>

Note :Images which you insert in to "src" should be available in the solution explorer/ in your project file.