Bootstrap Interview Questions | Page 5


Question 41:

How to create stacked tab in bootstrap?

Bootstrap provide .nav-pills .nav-stacked class to create stacked tabs.

Example

<ul class="nav nav-pills nav-stacked">
  <li role="presentation" class="active"><a href="#">MyProfile</a></li>
  <li role="presentation"><a href="#">My Settings</a></li>
  <li role="presentation"><a href="#">Open Tasks</a></li>
  <li role="presentation"><a href="#">Overdue Tasks</a></li>
</ul>

Preview

Question 42:

How to create breadcrumbs in bootstrap?

Breadcrumbs are used to display hierarchy of the navigation items till the current content page. Use .breadcrumb class to create breadcrumb in bootstrap.

Example

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Bootstrap</a></li>
  <li class="active">Interview</li>
</ol>

Preview

Question 43:

How to create quote block?

Bootstrap provide <blockquote>..</blockquote>

to display quote

Example

<blockquote>
  <p>Learning bootstrap is fun with Modern Pathshala</p>
  <footer>Someone famous in <cite title="Source Title">Ashish</cite></footer>
</blockquote>

Preview

Learning bootstrap is fun with Modern Pathshala.

Source- Ashish

Alternate display

<blockquote class="blockquote-reverse" >
  <p>Learning bootstrap is fun with Modern Pathshala</p>
  <footer>Someone famous in <cite title="Source Title">Ashish</cite></footer>
</blockquote>

Preview

Learning bootstrap is fun with Modern pathshala.

Source- Ashish
Question 44:

How to implement paging using bootstrap?

Bootstrap provide pagination functionality for the multi-page content website. Paging is quite helpful in improving the performance of the website by loading only a few records per page instead of all at once.

Example

<nav>
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Preview

Question 45:

How to create badges in bootstrap?

Bages are generally used to show unread notifications in a website. By adding a <span class="badge"> to links, Bootstrap navs we can create badges.</span>

Example

<a href="#">Notifications<span class="badge">99</span></a>

<button class="btn btn-success" type="button">
  Messages <span class="badge">16</span>
</button>

Preview

Notifications99


Question 46:

How to create stacked progress bar in bootstrap?

Progress bars provide up-to-date feedback on the progress of a workflow or action or any running process.

Note:- Progress bar is not supported in Internet Explorer 9 and below or older versions of Firefox as it uses CSS3.

Example

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 55%">
    <span class="sr-only">55% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 15%">
    <span class="sr-only">15% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 11%">
    <span class="sr-only">11% Complete (danger)</span>
  </div>
</div>

Preview

55% Complete (success)
15% Complete (warning)
11% Complete (danger)
Question 47:

What is Carousel?

Carousel is a slideshow component to display content/ images in a cyclic repetition. Bootstrap provide carousel.js to implement carousel.

Example

<div id="carousel-example-captions" class="carousel carousel-images slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-captions" data-slide-to="1"></li>
<li data-target="#carousel-example-captions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="..." alt="First slide image">
<div class="carousel-caption animated fadeInUpBig">
    <h3>First slide label</h3>
    <p>...</p>
</div>
</div>
<div class="item">
<img src="..." alt="Second slide image">
<div class="carousel-caption animated fadeInUpBig">
    <h3>Second slide label</h3>
    <p>...</p>
</div>
</div>
<div class="item">
<img src="..." alt="Third slide image">
<div class="carousel-caption animated fadeInUpBig">
    <h3>Third slide label</h3>
    <p>...</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-captions" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-captions" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>

Preview

Question 48:

How to create a model popup in bootstrap?

Bootstrap provide Model.js javascript library to support model popup. You may use model popup to display important information as an overlay. Below is the code to display a model popup. Example

<!-- Button trigger modal -->
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">
  Open Demo Model
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Demo Model</h4>
      </div>
      <div class="modal-body">
<p>This is demo model</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-info" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-success">Save changes</button>
      </div>
    </div>
  </div>
</div>

Preview

For more details and refer.

Question 49:

What is scroll spy in bootstrap?

Bootstrap provides scrollspy.js to implement scroll spy effect in web pages.

Bootstrap ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The drop-down sub items will be highlighted as well.

To add scroll spy behavior to navigation item, add data-spy="scroll" to the element you want to spy on (most typically this would be the). Then add the data-target attribute with the ID or class of the parent element of any Bootstrap .nav component.

Example

<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>
Question 50:

How to create icons in bootstrap?

Bootstrap provide Glyphicons to support icons in bootstrap. There are 250 Glyphicons available with bootstrap free of cost. Full list of icons can be found here.

Share interview questions

Comments

Comments
comments powered by Disqus

Navigation

Social Media