A49 WC EXP 6

EXPERIMENT- 06
A1. Aim: Write a Bootstrap program to develop a home page with tab using navigation pills.
A2. Theory:
Program code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
="bootstrap.js"></script>
</head>
<body>
<div class="container">
<ul class = "nav nav-pills">
pills">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "#">About</a></li>
<li><a href = "#">Product</a></li>
<li><a href = "#">Service</a></li>
<li><a hreff = "#">Blog</a></li>
<li><a href = "#">Contact</a></li>
</ul>
</div>
</body>
</html>
Output:
PART B
(PART B: TO BE COMPLETED BY STUDENTS)
Roll. No. A-49 Name: Soham B. Gharat
Class: AI & DS Batch: A-3
Date of Experiment: 30/08/2024 Date of Submission:30/08/2024
Grade:
B1. Program Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TERNA ENGINEERING COLLEGE</title>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
rel="stylesheet">
<style>
.content-section {
padding: 20px;
background-color: #f8f9fa;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.nav-pills .nav-link {
border-radius: 0;
}
.nav-link.active {
background-color: #007bff;
Roll. No. A-49 Name: Soham B. Gharat
Class: AI & DS Batch: A3
Date of Experiment: 21/08/2024 Date of Submission:21/08/2024
Grade:
color: #fff;
}
.card {
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="container mt-4">
<h1 class="text-center mb-4">TERNA ENGINEERING COLLEGE</h1>

<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#home">Home</a>
</li>
<a class="nav-link" data-toggle="pill" href="#profile">Profile</a>
</li>
<a class="nav-link" data-toggle="pill" href="#activities">Activities</a>
</li>
<a class="nav-link" data-toggle="pill" href="#academic">Academic</a>
</li>
</ul>

<div class="tab-content mt-3">
<div id="home" class="container tab-pane active content-section">
<h3>Home</h3>
<p>Welcome to Terna Engineering College, where excellence meets innovation.
Explore our programs, research opportunities, and vibrant campus life.</p>
<div class="card">
<div class="card-header">Latest News</div>
<div class="card-body">
<h5 class="card-title">New Engineering Programs</h5>
<p class="card-text">We are excited to announce the launch of new engineering
programs that cater to the latest industry demands.</p>
<a href="#" class="btn btn-primary">Read More</a>
</div>
</div>
<div class="card">
<div class="card-header">Upcoming Events</div>
<h5 class="card-title">Tech Fest 2024</h5>
<p class="card-text">Join us for Tech Fest 2024, a showcase of innovation and
technology from our students and faculty.</p>
<a href="#" class="btn btn-primary">View Events</a>
</div>
</div>
</div>
<div id="profile" class="container tab-pane fade content-section">
<h3>Profile</h3>
<p>Manage your personal information, view your academic progress, and update your
contact details.</p>
<div class="card">
<div class="card-header">Personal Information</div>
<p><strong>Name:</strong> Soham Gharat</p>
<p><strong>Email:</strong> Soham.gharat123@example.com</p>
<p><strong>Student ID:</strong> 123456789</p>
<a href="#" class="btn btn-primary">Edit Profile</a>
</div>
</div>
<div class="card">
<div class="card-header">Academic Progress</div>
<p><strong>GPA:</strong> 3.8</p>
<p><strong>Credits Earned:</strong> 90</p>
<a href="#" class="btn btn-primary">View Transcript</a>
</div>
</div>
</div>
<div id="activities" class="container tab-pane fade content-section">
<h3>Activities</h3>
<p>Explore the various extracurricular activities and student clubs available at
Terna
Engineering College.</p>
<div class="card">
<div class="card-header">Student Clubs</div>
<h5 class="card-title">Robotics Club</h5>
<p class="card-text">Join the Robotics Club to work on exciting projects and
participate in competitions.</p>
<a href="#" class="btn btn-primary">Join Club</a>
</div>
</div>
<div class="card">
<div class="card-header">Sports Activities</div>
<h5 class="card-title">Football Team</h5>
<p class="card-text">Be part of our football team and represent the college in
various tournaments.</p>
<a href="#" class="btn btn-primary">Get Involved</a>
</div>
</div>
</div>
<div id="academic" class="container tab-pane fade content-section">
<h3>Academic</h3>
<p>Stay updated with academic resources, course details, and research opportunities
at
Terna Engineering College.</p>
<div class="card">
<div class="card-header">Course Catalog</div>
<h5 class="card-title">Computer Science</h5>
<p class="card-text">Explore our Computer Science curriculum and available
electives.</p>
<a href="#" class="btn btn-primary">View Catalog</a>
</div>
</div>
<div class="card">
<div class="card-header">Research Opportunities</div>
<h5 class="card-title">AI Research Lab</h5>
<p class="card-text">Get involved in cutting-edge research projects in artificial
intelligence.</p>
<a href="#" class="btn btn-primary">Learn More</a>
</div>
</div>
</div>
</div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></scr
ipt>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
B2. Output:
B3. Observation:
The experiment successfully created a responsive, visually appealing home page using
Bootstrap's nav-pills for seamless tabbed navigation. Custom CSS enhanced the modern dark
theme, ensuring a consistent user-friendly experience across devices.
B4. Conclusion:
The experiment successfully demonstrated how to build a modern, responsive homepage using
Bootstrap’s navigation pills. Key aspects such as structure, styling, and interactivity were
effectively implemented, resulting in a user-friendly and visually appealing web page. The use of
Bootstrap components streamlined the development process and ensured compatibility across
various devices.
B5. Questions of curiosity
Q1. What are the features of Bootstrap?

Ans: Bootstrap is a popular front-end framework that provides a wide range of features to help
developers create responsive, mobile-first websites quickly and efficiently. Some of the key
features of Bootstrap include:
● Responsive Grid System: Bootstrap offers a 12-column grid system that adapts to
different screen sizes, ensuring that your website looks good on all devices.
● Predefined Components: It includes a vast collection of reusable components like
navigation bars, buttons, forms, modals, carousels, and more, which can be easily
customized and integrated into your project.
● CSS and JavaScript Plugins: Bootstrap comes with a set of CSS styles and JavaScript
plugins that add interactive elements like tooltips, popovers, modals, and carousels.
● Customizable: You can customize Bootstrap's default styles by overriding them with your
own CSS, or by using Bootstrap's built-in customization options through SASS or Less.
● Consistent Design: Bootstrap ensures a consistent look and feel across your website by
using a uniform design language, typography, and layout.
Q2.What are the different navigation tabs in the bootstrap?
Ans: Bootstrap provides several types of navigation tabs that you can use to organize content in
a structured and user-friendly way. The different navigation tabs are stated as follows:
1. Basic Tabs:
Basic navigation tabs allow users to switch between different sections of content within
the same page.
2. Pills Navigation:
Pills are similar to tabs but with a rounded appearance. They can be used for more
visually distinct navigation.
3. Vertical Tabs/Pills:
Vertical navigation tabs or pills align the navigation items vertically, typically on the left
side of the content.
4. Dropdown Navigation:
Dropdowns can be added to navigation tabs or pills to group related links under a single
parent item.
5. Justified Tabs/Pills:
Justified navigation tabs or pills stretch the items to fill the entire width of the container,
distributing them evenly.
*******************************

A49 WC EXP 6

Uploaded by

Copyright:

Available Formats

A49 WC EXP 6

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

A49 WC EXP 6

Uploaded by

Copyright:

Available Formats

EXPERIMENT- 06

B1. Program Code:

B5. Questions of curiosity

Q1. What are the features of Bootstrap?

You might also like