Bootstrap Interview Questions

Bootstrap interview questions

These Bootstrap questions have been designed for various interviews, competitive exams and entrance tests. We have covered questions on both basic and advanced concepts which will help you improve your skills to face interview questions on Bootstrap.

Who are these Bootstrap interview questions designed for?

All the Front End developers, UI/ UX developers and designers will find these questions extremely useful. All freshers, BCA, BE, BTech, MCA and college students wanting to make a career in front end designing will be highly benefitted by these questions.

Bootstrap interview questions topics


This section covers Bootstrap topics like - Bootstrap Grid System, Tables, Forms, Navigation Elements, Breadcrumb, Pagination, Jumbotron, Thumbnails, Progress Bars, Panels, Wells etc.

1. How to add badge to list group in Bootstrap?

Answer:

List group in Bootstrap is a flexible and powerful component for displaying a series of content.

The purpose of list group is to provide complex and customized content in lists.

Example:

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap List Group</title>
        <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <script src="/scripts/jquery.min.js"></script>
        <script src="/bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class = "container">
            <h4>List Group With Badges</h4>
            <ul class = "list-group">
                <li class = "list-group-item">First Item<span class="badge">12</span></li>
                <li class = "list-group-item">Second Item<span class="badge">5</span></li>
                <li class = "list-group-item">Third Item<span class="badge">1</span></li>
            </ul>
        </div>
    </body>
</html>


list group badges

2. How many Container class are there in Bootstrap?

Answer:

There are two Container class in Bootstrap: .container class and .container-fluid class

The .container class provides a responsive fixed width container.

<div class=".container">
. . .
</div>


The .container-fluid class provides a full width container, spanning the entire width of the viewport.

<div class=".container-fluid">
. . .
</div>


Containers are not nestable (you cannot put a container inside another container).

3. What is Jumbotron in Bootstrap?

Answer:

Jumbotron is a lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site.

Jumbotron shows some special content on website. It can optionally increase the size of headings and add a lot of margin for landing page content.

It provides an excellent way to showcase the key content or information on a web page. Add your featured content like heading, descriptions etc. in a <div> element and apply the class '.jumbotron' on it.

Example:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Example</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    </head>
    <body>
        <div class="jumbotron">
            <div class="container">
                <h2>Bootstrap Tutorial</h2>   
                <p>
                    <a class = "btn btn-primary btn-lg" role = "button">Learn with CareerRide</a></p>
            </div>
        </div>
    </body>
</html>


jumbotron

4. How to create warning notification alerts in Bootstrap?

Answer:

Bootstrap warning notification alert provides an easy way to create predefined alert messages.

These alert messages are used to stand out the information that requires immediate attention of the end users such as warning, error or confirmation messages.

Example:

<!DOCTYPE html>
<html lang="en">
    <body>
        <div class="alert alert-warning">
            <a href=”#” class=”close” data-dismiss=”alert”>×</a>
            <strong>Warning!</strong> There was a problem with your Internet connection.
        </div>
    </body>
</html>


warning alert

5. How to insert a search icon in Bootstrap?

Answer:

Bootstrap includes 260 glyphicons from the Glyphicons Halflings set.

These Glyphicons are normally not available for free, but their creator has made them available for Bootstrap free of cost.

Following example shows how to insert a search icon in Bootstrap:

Example:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    </head>
    <body>
        <div class="container">
            <h2>Search Icon Examples</h2>
            <p>Search icon: <span class="glyphicon glyphicon-search"></span></p>
            <p>Search icon on a button:
                <button type="button" class="btn btn-default">
                    <span class="glyphicon glyphicon-search"></span> Search
                </button>
            </p>
            <p>Search icon on a styled button:
                <button type="button" class="btn btn-info">
                    <span class="glyphicon glyphicon-search"></span> Search
                </button>
            </p>
        </div>   
    </body>
</html>


search icon
▲