Bootstrap Interview Questions | Page 3


Question 21:

What are different shapes for image in bootstrap.

By Default bootstrap provides 3 classes for image shape.

  • Rounded image
  • Circle shape image
  • Thumbnail image

Example

<img src=""; alt="rounded image" class="img-rounded">
<img src=""; alt="circle image" class="img-circle">
<img src=""; alt="thumbnail image" class="img-thumbnail">
Question 22:

How to make an image responsive in bootstrap?

Bootstrap provides pre-defined class "img-responsive" to make image responsive.

<img class="img img-responsive" src="http://modernpathshala.com/Images/bootstrap/Question/4084674120151212011257bootstrap-sample.JPG" alt="responsive image demo" />

Example: - Resize browser window to see responsiveness

Responsive image demo

Question 23:

How to create thumbnail in bootstrap?

Bootstrap provides pre-defined class "img-thumbnail" to make an image a thumbnail.

<img class="img-thumbnail" src="http://modernpathshala.com/Images/bootstrap/Question/4084674120151212011257bootstrap-sample.JPG" alt="thumbnail image demo" />

Example:

Responsive image demo

Question 24:

How to make a table responsive?

Bootstrap provides pre-defined class "table-responsive" to make table responsive.

Example

Below table is responsive and provides other classes to work with tables

<table class="table table-striped table-hover table-responsive">
<tbody>
<tr class="success">
<td>Class name</td>
<td>Description</td>
</tr>
<tr>
<td>table</td>
<td>Define a table</td>
</tr>
<tr>
<td>table-responsive</td>
<td>Class to make a table responsive</td>
</tr>
<tr>
<td>table-striped</td>
<td>Make a table like as stripe</td>
</tr>
<tr>
<td>table-bordered</td>
<td>Class to create a table with border</td>
</tr>
</tbody>
</table>

Preview

Class name Description
table Define a table
table-responsive Class to make a table responsive
table-striped Make a table like as stripe
table-bordered Class to create a table with border

Additionally bootstrap provides below classes for the table

.table-striped - Render alternate rows with different background colour as displayed in this example.

.table-hover - Generate a hover effect on hover on any row

Question 25:

How to make video responsive in bootstrap?

Use .embed-responsive-item class with iframe to make video responsive. Same class can also be applied on <iframe>, <embed>, <video>, and <object> elements.

Example

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..." width="300" height="150"></iframe>
</div>
<!-- 4:3 aspect ratio --></pre>
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..." width="300" height="150"></iframe>
</div>

Question 26:

How to create alert box in bootstrap?

Alert box provides a feedback in the response of any user action. Bootstrap provide .alert class to create an alert. In addition to .alert class you also need to supply one of the following class to define the type of alert.

.alert-success - for success alerts

.alert-info - for Information alerts

.alert-warning - for warning type of alerts

.alert-danger - for danger type of alerts

You may also use optional .alert-dismissible class to provide close functionality for alert.

Example

<div class="alert alert-success" role="alert">
 <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Success!</strong> Success alert.
</div>
<div class="alert alert-info alert-dismissible" role="alert">
 <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<strong>Info!</strong> Info alert.
</div>
<div class="alert alert-warning alert-dismissible" role="alert">
 <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<strong>Warning!</strong> Warning alert.
</div>

<div class="alert alert-danger alert-dismissible" role="alert">
 <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<strong>Danger!</strong> Danger alert.
</div>

Preview

Success! Success alert.
Info! Info alert.
Warning! Warning alert.
Danger! Danger alert.
Question 27:

How to create a form using bootstrap?

By default HTML provides styling to all form controls e.g. input, textarea, select, checkbox, radio button e.t.c. Use .form-group class to group control and its label. 

Bootstrap provide 3 types of form

Basic form - Default width of controls are 100%.

Inline form - Use .form-inline class with form tag to create inline form.

Horizontal form - Use .form-horizontal class with form tag to create horizontal form.

Example - Basic form

<form>
  <div class="form-group">
    <label for="txtEmail">Email address</label>
    <input type="email" class="form-control" id="txtEmail" placeholder="support@modernpPathshala.com">
  </div>
  <div class="form-group">
    <label for="txtPassword">Password</label>
    <input type="password" class="form-control" id="txtPassword" placeholder="Password">
  </div>
  <button type="button" class="btn btn-default btn-success">Login</button>
</form>

Preview

Question 28:

How to create an Inline Form in bootstrap?

Bootstrap provides .form-inline class with form tag to create inline form.

Example - Inline Form

<form class="form-inline">
  <div class="form-group">
    <label for="txtEmail1">Email address</label>
    <input type="email" class="form-control" id="txtEmail1" placeholder="email">
  </div>
  <div class="form-group">
    <label for="txtPassword1">Password</label>
    <input type="password" class="form-control" id="txtPassword1" placeholder="Password">
  </div>
  <button type="button" class="btn btn-default btn-success">Login</button>
</form>

Preview

Question 29:

How to create Horizontal Form in bootstrap?

Bootstrap provides .form-horizontal class to create a horizontal form. Use this class with HTML form tag.

Example - Horizontal Form

<form class="form-horizontal">
  <div class="form-group">
    <label for="txtEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="txtEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>  
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default btn-success">Login</button>
    </div>
  </div>
</form>

Preview

Question 30:

What are the different form controls supported by Bootstrap?

Bootstrap supports all the basic HTML 5 form controls. Below are supported form controls.

  • Text
  • Password
  • Datetime
  • Datetime-local
  • Date
  • Month
  • Time
  • Week
  • Number
  • Email
  • Url
  • Search
  • Tel
  • Color
Share interview questions

Comments

Comments
comments powered by Disqus

Navigation

Social Media