Bootstrap Navigation Bar Handson Solution Cognizant
Here is the solution for Navigation bar bootstrap program from cognizant mandatory handson.
Requirements:
- Create a nav tag for a dark horizontal navbar that becomes vertical on medium screens with dark background using Bootstrap classes. It should be within the header tag with the class “container”.
- Add a navigation brand name as “TrackIt” using anchor tag and appropriate Bootstrap class.
- Add a button with a navigation toggler class. Use a span tag to display the navigation toggler icon as a button.
- Make the navigation bar collapsible by using a ‘div’ tag with its id as “myNavbar” inside the nav tag.
- Create an unordered list of links for: ‘Home’, ’About Us’, and ‘Contact’ belongs to the bootstrap navigation bar class and make the list anchor value ‘Home’ as active.
- Create another unordered list for ‘Login’ which should belong to the bootstrap navigation bar and it should be right aligned by using the bootstrap class to set its left margin as auto.
- Create a bootstrap hover table with the table column headings as: No., Bill, Payment Date and Payment status.(as given in the table below)
- According to the payment status, choose appropriate contextual classes for each row.
- Pending status: Indicates a warning that might need attention
- Paid status: Indicates a successful or positive action
- Due status: Indicates a dangerous or potentially negative action
Table contents should be the same as given below. The table should be created within the <div> with id=”tableContainer” as given in the code template.
Table Contents:
| No. | Bill | Payment Date | Payment Status |
| 1 | Credit Card | 05/07/2022 | Pending |
| 2 | Internet | 05/07/2022 | Paid |
| 3 | Telephone | 05/07/2022 | Due |
The table structure expected is a <table> with 4 rows<tr> and 4 columns<td> at each row.
Note:
- Fill in only the specified part of the given template.
- Refer to the given sample screen for more clarifications
navigation.html
<!-- FILL ONLY THE SPECIFIED PART ALONE -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 4 Responsive Navbar</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style type="text/css" media="all">
body{
padding: 0;
margin: 0;
}
ul{
list-style-type: none;
}
.clr
{ color: rgba(255,255,255,.5);
}
</style>
</head>
<body>
<header class="container">
<!-- FILL YOUR CODE FOR NAVIGATION BAR HERE -->
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="#">TrackIt</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<ul class="ml-auto mb-0 clr">
<li>Login</li>
</ul>
</div>
</nav>
</header>
<section 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>
<div class="row justify-content-center">
<div class="col-md-8" id="tableContainer">
<!-- FILL YOUR CODE FOR TABLE HERE -->
<table class="table table-hover">
<td>No.</td>
<td>Bill</td>
<td>Payment Date</td>
<td>Payment Status</td>
<tr class="table-warning">
<th>1</th>
<th>Credit Card</th>
<th>05/07/2022</th>
<th>Paid</th>
</tr>
<tr class="table-success">
<th>2</th>
<th>Internet</th>
<th>05/07/2022</th>
<th>Paid</th>
</tr>
<tr class="table-danger">
<th>3</th>
<th>Telephone</th>
<th>05/07/2022</th>
<th>Due</th>
</tr>
</table>
</div>
</div>
</section>
</body>
</html>
