Interview Questions

AJAX Interview Questions Android Interview Questions Angular 2 Interview Questions AngularJs Interview Questions Apache Presto Interview Questions Apache Tapestry Interview Questions Arduino Interview Questions ASP.NET MVC Interview Questions Aurelia Interview Questions AWS Interview Questions Blockchain Interview Questions Bootstrap Interview Questions C Interview Questions C Programming Coding Interview Questions C# Interview Questions C++ Interview Questions Cakephp Interview Questions Cassandra Interview Questions CherryPy Interview Questions Clojure Interview Questions Cobol Interview Questions CodeIgniter interview Questions CoffeeScript Interview Questions Cordova Interview Questions CouchDB interview questions CSS Buttons Interview Questions CSS Interview Questions D Programming Language Interview Questions Dart Programming Language Interview Questions Data structure & Algorithm Interview Questions DB2 Interview Questions DBMS Interview Questions Django Interview Questions Docker Interview Questions DOJO Interview Questions Drupal Interview Questions Electron Interview Questions Elixir Interview Questions Erlang Interview Questions ES6 Interview Questions and Answers Euphoria Interview Questions ExpressJS Interview Questions Ext Js Interview Questions F# Interview Questions Firebase Interview Questions Flask Interview Questions Flex Interview Questions Fortran Interview Questions Foundation Interview Questions Framework7 Interview Questions FuelPHP Framework Interview Questions Go Programming Language Interview Questions Google Maps Interview Questions Groovy interview Questions GWT Interview Questions Hadoop Interview Questions Haskell Interview Questions Highcharts Interview Questions HTML Interview Questions HTTP Interview Questions Ionic Interview Questions iOS Interview Questions IoT Interview Questions Java BeanUtils Interview Questions Java Collections Interview Questions Java Interview Questions Java JDBC Interview Questions Java Multithreading Interview Questions Java OOPS Interview Questions Java Programming Coding Interview Questions Java Swing Interview Questions JavaFX Interview Questions JavaScript Interview Questions JCL (Job Control Language) Interview Questions Joomla Interview Questions jQuery Interview Questions js Interview Questions JSF Interview Questions JSP Interview Questions KnockoutJS Interview Questions Koa Interview Questions Laravel Interview Questions Less Interview Questions LISP Interview Questions Magento Interview Questions MariaDB Interview Questions Material Design Lite Interview Questions Materialize CSS Framework Interview Questions MathML Interview Questions MATLAB Interview Questions Meteor Interview Questions MongoDB interview Questions Moo Tools Interview Questions MySQL Interview Questions NodeJS Interview Questions OpenStack Interview Questions Oracle DBA Interview Questions Pascal Interview Questions Perl interview questions Phalcon Framework Interview Questions PhantomJS Interview Questions PhoneGap Interview Questions Php Interview Questions PL/SQL Interview Questions PostgreSQL Interview Questions PouchDB Interview Questions Prototype Interview Questions Pure CSS Interview Questions Python Interview Questions R programming Language Interview Questions React Native Interview Questions ReactJS Interview Questions RequireJs Interview Questions RESTful Web Services Interview Questions RPA Interview Questions Ruby Interview Questions Ruby on Rails Interview Questions SAS Interview Questions SASS Interview Questions Scala Interview Questions Sencha Touch Interview Questions SEO Interview Questions Servlet Interview Questions SQL Interview Questions SQL Server Interview Questions SQLite Interview Questions Struts Interview Questions SVG Interview Questions Swift Interview Questions Symfony PHP Framework Interview Questions T-SQL(Transact-SQL) Interview Questions TurboGears Framework Interview Questions TypeScript Interview Questions UiPath Interview Questions VB Script Interview Questions VBA Interview Questions WCF Interview Questions Web icon Interview Questions Web Service Interview Questions Web2py Framework Interview Questions WebGL Interview Questions Website Development Interview Questions WordPress Interview Questions Xamarin Interview Questions XHTML Interview Questions XML Interview Questions XSL Interview Questions Yii PHP Framework Interview Questions Zend Framework Interview Questions

Top 15 Bootstrap Interview Questions for 2022

1) Explain what is Bootstrap?

It is a Framework which is used for building the web application with minimal effort. Bootstrap is also used for developing responsive, mobile-first web sites.

2) What is the use of Jumbotron in Bootstrap?

In Bootstrap, jumbotron is used for some special content that you want to highlight like marketing headlines and some slogan etc.

Jumbotron Example

<html>  

<head><title>JUMBOTRON</title>  

<link rel="stylesheet"  

href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">    

</head>  

<body>  

<div class="container">  

<div class="jumbotron">  

  <h1>JUMBOTRON EXAMPLE</h1>  

</div>  

</div>  

 <script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>    

<script  src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  

</body>  

</html>

3) Show a basic grid structure in Bootstrap?

Basic grid structure In BOOTSTRAP:
<html>  

<head><title>GRID EXAMPLE</title>  

<link rel="stylesheet"  href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">  </head>  

<body><div class="container">  

<h2>GRID EXAMPLE</h2>  

<div class="col-md-6"><b>BRAND OF CARS</b></div>  

<div class="col-md-2"><b>BMW</b></div>  

<div class="col-md-2"><b>Jaguar</b></div>  

<div class="col-md-2"><b>Audi</b></div><br><br>  

</div>  

 <script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>    

<script  src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  

</body>  

</html>

4) What are the features of Bootstrap?

Features of bootstrap are:
  • Browser compatibilty.
  • Easy to use.
  • Open Source.
  • Responsive Features.

5) Explain the use of navnav-list" in Bootstrap?

Basic example of navnav-list in Bootstrap:
<html>  

<head><title>Example of navnav-list</title>  

<link rel="stylesheet"  href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">  </head>  

<body>  

      <ul class="navnav-list">    

            <li class="nav-header"><b>Category</b></li>    

            <li><a href="https://www.tutorialandexample.com/java-interview-questions">JAVA</a></li>    

            <li><a href="https://www.tutorialandexample.com/ajax-interview-questions">AJAX</a></li>    

            <li><a href="https://www.tutorialandexample.com/php-interview-questions">PHP</a></li>    

            <li><a href="https://www.tutorialandexample.com/ruby-interview-questions">RUBY</a></li>      

        </ul>    

      

 <script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>    

<script  src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  

</body>  

</html>

6) Who developed the Bootstrap?

Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter as a framework.

7) What are different types of layout available in Bootstrap?

There are two types of layout available in bootstrap:
  1. Fluid Layout.
  2. Fixed Layout.

8) How to add badges in Bootstrap?

<html>  

<head><title>Badges Example</title>  

<link rel="stylesheet"  href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">    

</head>  

<body>  

 <div class="container-fluid">  

 <h2>Badges</h2>    

  <a href="http://www.Twitter.com">Twitter<span class="badge">10</span></a><br>    

  <a href="http://www.Facebook.com">Facebook<span class="badge">20</span></a><br>    

  <a href="http://www.Whatsapp.com">Whatsapp<span class="badge">40</span></a>   

</div>  

<script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>    

<script  src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  

</body>  

</html>

9) In Which language Bootstrap is written?

Html , CSS, LESS , Saas and JavaScript.

10) How do we create a table using bootstrap?

Example of table using bootstrap:
<html>  

<head><title>Table Example</title>  

<link rel="stylesheet"  href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">    

</head>  

<body>  

<div class="container">    

 <h1>Table Example</h1>    

  <table class="table">    

  <tr><th>Id</th><th>Name</th><th>Age</th></tr>    

  <tr><td>7014</td><td>Atul</td><td>22</td></tr>    

  <tr><td>7016</td><td>Shivaay</td><td>28</td></tr>    

  <tr><td>7018</td><td>Viraj</td><td>26</td></tr>    

  <tr><td>7002</td><td>Varun</td><td>23</td></tr>    

</table>    

  </div>    

<script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>    

<script  src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  

</body>  

</html>

11) How do we create large button groups in bootstrap?

Example of large button groups in bootstrap:
<html>  

<head>  <title>Button Example</title>  

<link rel="stylesheet"    

href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">    

</head>  

<body>  

<div class="container">    

 <h1>Large Button Group Example</h1>    

<div class="btn-group btn-group-lg">  

<button type="button" class="btn btn-default">default</button>  

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

<button type="button" class="btn btn-primary">primary</button>  

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

<button type="button" class="btn btn-info">info</button>  

<button type="button" class="btn btn-warning">warning</button>  

</div>    

</div>    

<script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>    

<script  src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  

</body>  

</html>

12) How do we create block buttons in bootstrap?

Example of block buttons in bootstrap:
<html>  

<head><title>Button Example</title>  

<link rel="stylesheet"  href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">    

</head>  

<body>  

<div class="container">    

<h1>BLOCK  Button Example</h1>    

<button type="button" class="btn btn-info btn-block">Saved</button>  

<button type="button" class="btn btn-info btn-block">Not Saved</button>  

</div>    

 <script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>    

<script  src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  

</body>  

</html>  

13) Show that how an animated striped progress-Bar is created in Bootstrap?
Example of animated striped progress-bar:
<html>  

<head><title>Button Example</title>  

<link rel="stylesheet"  href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">    

</head>  

<body>  

<div class="container">    

 <h1>Progress-Bar Example</h1>  

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

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

Downloading.....  

</div>  

</div>  

</div>    

 <script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>    

<script  src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  

</body>  

</html>

14) What are the key components of Bootstrap?

Key components of Bootstrap are:
CSS Layout Components
JavaScript Plugins Customize
Scaffolding

15) In Bootstrap show that, how panels can be created with footers?

Example of panel with footer in Bootstrap:
<html>  

<head><title>PANEL Example</title>  

<link rel="stylesheet"  href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">    

</head>  

<body>  

<div class="panel panel-info">    

  <div class="panel-heading">    

    <h3 class="panel-title"><strong>Panel title</strong></h3>    

  </div>    

  <div class="panel-body">    

    Panel content    

  </div>    

  <div class="panel-footer"><strong>Panel footer</strong>    

  </div>    

</div>  

<script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>    

<script  src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  

</body>  

</html>



ADVERTISEMENT
ADVERTISEMENT