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:
- Fluid Layout.
- 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>
