Bootstrap Interview Questions | Page 4


Question 31:

What is the input group in bootstrap?

Bootstrap input group allow to easily extend the form controls by adding text, buttons, or button groups. To extend an input control place one add-on or button on either side of an input. You may also place one on both sides of an input.

Example

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="txtUsername">Username</label>
    <div class="input-group">
      <input type="text" class="form-control" id="txtUsername" placeholder="username">
      <div class="input-group-addon">@modernPathshala.com</div>
    </div>
  </div>
</form>

Preview

@modernPathshala.com
Question 32:

How to create control validation states with icons in bootstrap?

To add icons with validation state use optional feedback icons with the addition of .has-feedback class and the right icon. Feedback icon only works with input type controls.

Example

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>

<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Warning</label>
  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Error</label>
  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span>
</div>

Preview

Question 33:

How to implement tool-tip?

Bootstrap provide tooltip.js file to display tool-tip. Tootip.js display tool-tip using data- attribute and CSS3.

Example

<button type="button" class="btn btn-success" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-success" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-warning" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

Preview

Question 34:

What is difference between Read-only and disabled field?

Both read-only and disabled field make the input control unavailable to edit for the user. So user can not insert data in both fields but the main difference is that when we submit the form on the server the browser ignores the disabled field i.e. browser does not send the data in the disabled field on the server while in the case of read-only field it does.

Another difference is the that we can not set the focus on disabled fields on the other side we can do on read-only fields.

Creating Read-only and disabled field in Bootstrap

Creating Read-only field

Add read-only attribute on input control

<div class="form-group">
   <label for="Name">Name</label>
   <input id="Name" class="form-control" readonly="readonly" type="text" value="Ashish" placeholder="Name" />
</div>

Creating disabled field

Add disabled attribute on input control

<div class="form-group">
  <label for="Email">Email</label>
   <input id="Email" class="form-control" type="email" value="ashish@modernpathshala.com" placeholder="Email" disabled />
</div>

Preview

Question 35:

What is pop over and how to implement popover in bootstrap?

Popover is used to display a small overlay for secondary information. Bootstrap provide popover.js to display popover.

popover.js has dependency over tooltip.js

Example

<button type="button" class="btn btn-lg btn-success" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Preview


Question 36:

How to display code in UI using bootstrap?

There are two ways to display code in bootstrap.

  • using code block - use this for inline code block
  • using pre block - use this for the separate code block

Example

<pre>
public class Bootstap
{
//here is code
}
</pre>

Preview

public class Bootstap
{
//here is code
}

Note: There are other different client side javascript libraries available for displaying code for different programming language. I have used syntax highlighter in Modern Pathshala for displaying code block.

Question 37:

What are the default buttons in bootstrap?

Bootstrap provide a large set of classes to create buttons. Use .btn .btn-default class to create a default button in bootstrap. Bootstrap provides the following default buttons

Bootstrap provides the following classes to provide different styling to buttons.

Default - Use .btn-default class to display default button.

Primary - Use .btn-primary class to display primary button.

Success - Use .btn-success class to display success button.

Info - Use .btn-info class to display info button.

Warning - Use .btn-warning class to display warning button.

Danger - Use .btn-Danger class to display Danger button.

Link button - Use .btn-link class to display link button.

Example

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

<button type="button" class="btn btn-primary">Primary</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-warning">Warning</button>

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

<button type="button" class="btn btn-link">Link</button>

Preview

Question 38:

What is description list in bootstrap?

Description List is a special type of list. This is a list of items with the associated description of each item.

Example

<dl>
  <dt>Item 1</dt>
  <dd>Description of Item 1</dd>
<dt>Item 2</dt>
  <dd>Description of Item 2</dd>
</dl>

Preview

Item 1
Description of Item 1
Item 2
Description of Item 2
Question 39:

How to create menu items?

Bootstrap provide responsive navbar to display at the top of the application containing all navigation items. Navbar comes with toggle functionality which allow navbar to stack vertically in mobile devices. Use .navbar .navbar-default class to create navbar.

We can add Brand name, logo, links, buttons, form and drop-down control in the navbar.

Navbar have 3 sections left, middle and right.

Example

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Item 1<span class="sr-only">(current)</span></a></li>
        <li><a href="#">Item 2</a></li>
      </ul>
      
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Item 3</a></li>        
      </ul>
    </div>
  </div>
</nav>

Preview

Question 40:

How to create tabs in bootstrap?

Bootstrap provide .nav-tabs class to create tabs.

Example

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Message</a></li>
  <li role="presentation"><a href="#">Settings</a></li>
</ul>

Preview

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, consequuntur error ad sint accusantium molestias recusandae esse culpa doloremque labore fuga officia perspiciatis beatae mollitia earum voluptatibus numquam inventore dolorem ipsa modi molestiae porro illum pariatur nisi eligendi laudantium architecto rerum deserunt distinctio repellendus sit quod nemo obcaecati laboriosam quibusdam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, at, laboriosam, possimus, nam rem quia reiciendis sit vel totam id eum quasi aperiam officiis omnis ipsum quo praesentium quaerat unde mollitia maiores. Dignissimos, deleniti, eos, quibusdam quae voluptatibus obcaecati voluptatum iure quas voluptates cupiditate incidunt voluptate dolorem delectus exercitationem earum?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, ipsam, distinctio, ea quas quam mollitia enim dolorem aliquam laboriosam exercitationem ullam iste quis possimus aut atque est beatae temporibus impedit deleniti explicabo ratione esse molestias maiores minima odit? Tempore, omnis, possimus praesentium minus iusto laboriosam vitae officiis deserunt voluptate odio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, blanditiis, ea quam minus aliquid libero quibusdam eos incidunt quo accusantium itaque veritatis reprehenderit optio provident nostrum ipsam aliquam voluptate officia voluptatem magni vitae nisi error maiores dolor natus at perferendis. Eligendi, a deserunt voluptatibus facere dolores rem molestias ad magnam!
Share interview questions

Comments

Comments
comments powered by Disqus

Navigation

Social Media