Bootstraps Navigation Bar cognizant handson

Bootstraps Navigation Bar

Design a web page as indicated in the snapshot below:

Topics Coverage: Bootstrap Navigation and table classes

Key Points:

1. Create a div tag for an inverted navigation bar using Bootstrap classes. It should be within the header tag with the class “container”.

2. Make the navigation bar collapsible by using a ‘div’ tag.

3. Create an unordered list of links for: ‘Home’, ’About Us’, and ‘Contact’ belongs to the bootstrap navigation bar class and makes the list anchor value ‘Home’ active.

4. Create another unordered list for ‘Login’ which should belong to the bootstrap navigation bar aligned to right.

5. Create a bootstrap hover table with the table column headings: No, Bill, Payment Date, and Payment status.

Table contents should be the same as given below.

Table Contents:

No	Bill	Payment Date	Payment Status
1	Credit Card	05/07/2018	Pending
2	Internet	05/07/2018	Paid
3	Electricity	03/09/2018	Pending
4	Telephone	05/07/2018	Due

According to the payment status, choose appropriate contextual classes for each row.

Pending status: Indicates a warning that might need attention
Success status: Indicates a successful or positive action
Due status: Indicates a dangerous or potentially negative action

Note:

Fill in only the specified part of the given template.
Refer to the given snapshot for more clarifications

Solution:

navigation.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Bootstrap 3 Responsive Navbar</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style type="text/css">

.navbar{

margin-top: 5px;

}

table{

position:absolute;

left:50%;

}

.navbar-inverse {

background-color:#546d88;

border-color: #428BCA;

}

.navbar-inverse .navbar-nav > .active > a,

.navbar-inverse .navbar-nav > .active > a:focus,

.navbar-inverse .navbar-nav > .active > a:hover {

color: #fff;

background-color: #336699;

}

</style>

</head>

<header class="container">

<div class="navbar navbar-inverse">

<div class="container-fluid collapse navbar-collapse">

<ul class="nav navbar-nav">

<li class="active"><a href="#">Home</a></li>

<li><a href="#">About Us</a></li>

<li><a href="#">Contact</a></li>

</ul>

<ul class="nav navbar-nav navbar-right">

<li><a href="#">Login</a></li>

</ul>

</div>

</header>

<div class="container">

<div class="row">

<div class="col-lg-12 text-center">

<h2 class="mt-5">Track the Payment - TrackIt</h2>

<ul class="list-unstyled">

<li>Allows you to track your Bill Payment</li>

<li>Help to automate delivery for customers with no need to install or download anything</li>

<li>A customizable tool for ensuring that any payments you have to make are paid on time.</li>

</ul>

<br>

<h4 >Greater comfort. Stronger performance. Improved Security. No Compromise</h4>

<br>

</div>

<div class="col-md-6">

<table class="table table-hover">

<thead>

<tr>

<th scope="col">No</th>

<th scope="col">Bill</th>

<th scope="col">Payment Date</th>

<th scope="col">Payment Status</th>

</tr>

</thead>

<tbody>

<tr class="warning">

<th scope="row">1</th>

<td>Credit Card</td>

<td>Otto</td>

<td>Pending</td>

</tr>

<tr class="success">

<th scope="row">3</th>

<td>Jacob</td>

<td>Thornton</td>

<td>Paid</td>

</tr>

<tr class="warning">

<th scope="row">4</th>

<td colspan="2">Larry the Bird</td>

<td>Pending</td>

</tr>

<tr class="danger">

<th scope="row">5</th>

<td colspan="2">Larry the Bird</td>

<td>Due</td>

</tr>

</tbody>

</table>

</div>

</body>

</html>

Bootstraps Navigation Bar cognizant handson