Bootstrap Interview Questions Part 2

6. Which class is use to display black navigation bar?

Answer:

The .navbar-inverse class is used to display black navigation bar.

The navbar is one of the important features of Bootstrap. Navbars are responsive 'meta' components that serve as navigation headers for your application or website.

Example:

<!DOCTYPE html>
<html lang="en">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <body>
            <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">Webpage</a>
                </div>
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Page 1</a></li>
                    <li><a href="#">Page 2</a></li>
                </ul>
                <button class="btn btn-danger navbar-btn">Button</button>
            </div>
        </nav>
    </body>
</html>


black navigation bar

7. What is the actual work of Pagination in Bootstrap?

Answer:

The actual work of Pagination is to handle an unordered list by Bootstrap.

Pagination links indicate a series of related content exists across multiple pages. Typically these are used where a multi-page approach to long lists of content improves general performance, such as in search results or inboxes.

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="container">
            <ul class="pagination">
                <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="#">Next</a></li>
            </ul>
        </div>
    </body>
</html>


pagination

8. Which contextual classes are used with progress bars in Bootstrap?

Answer:

The contextual classes are used with progress bars are:

1. .progress-bar-info
2. .progress-bar-success
3. .progress-bar-danger
4. .progress-bar-warning

The progress bar can be used to show a user how far along he/she is in a process.

Example:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Progress Bar Example</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    </head>
    <body>
        <div class="container">
            <h2>Progress Bar</h2>
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%">
                    50%
                </div>
            </div>
        </div>
    </body>
</html>


progress bar

9. What is meant by a Bootstrap Breadcrumb?

Answer:

A Bootstrap Breadcrumb is a navigation scheme. It indicates current page's location to the user within a website or application.

Example:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Breadcrumbs Example</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    </head>
    <body>
        <ul class="breadcrumb">
            <li><a href="#">Home</a></li>
            <li><a href="#">Products</a></li>
            <li class="active">Accessories</li>
        </ul>
    </body>
</html>


breadcrumbs

10. Why is .media class use in Bootstrap?

Answer:

The .media class allows to float a media objects (like images or videos) to the left or right of a content block

Example:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Media Object Example</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    </head>
    <body>
        <div class="container">
            <!-- Left-aligned media object -->
            <div class="media">
                <div class="media-left">
                    <img src="/home/careerride2/Downloads/media-object1.png" class="media-object" style="width:60px">
                </div>
                    <div class="media-body">
                    <h4 class="media-heading">Left Block</h4>
                    <p>Some text here</p>
                </div>
            </div>
            <hr>
            <!-- Right-aligned media object -->
            <div class="media">
                <div class="media-body">
                    <h4 class="media-heading">Right Block</h4>
                    <p>Some text here</p>
                </div>
                <div class="media-right">
                    <img src="/home/careerride2/Downloads/media-object2.png" class="media-object" style="width:60px">
                </div>
            </div>
        </div>
    </body>
</html>


media class
▲