Assignments Of Class 1: Introduction to Bootstrap
Assignment 1: Set up a Basic HTML Page with Bootstrap Using a CDN
Objective: To create a basic HTML page and include Bootstrap via CDN.
Instructions:
1. Create a new HTML file named index.html
.
2. Include the Bootstrap CSS and JavaScript files via CDN.
3. Add a simple header element (e.g., a heading) to the page.
4. Style the header with Bootstrap classes.
5. Save and view the page in your browser.
Solution Steps:
1. Create a New HTML File: Open your text editor (like Visual Studio Code, Sublime Text, etc.) and create a new file named index.html
.
2. Include Bootstrap CSS via CDN: In the <head>
section of your HTML, include the following link to the Bootstrap CSS file:
html
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
3. Add the Header: In the <body>
section of your HTML file, add the following header (you can use <h1>
or another header tag):
html
<h1 class="text-center">Welcome to Bootstrap
</h1>
The text-center
class from Bootstrap will center the header on the page.
4. Include Bootstrap JavaScript via CDN: At the end of the <body>
section, include the following script tag to link to the Bootstrap JavaScript file:
html
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
5. Save and Open the File: Save the index.html
file and open it in your browser to see the result.
Assignment 2: Add a Simple Header with Bootstrap Styling
Objective: To create a responsive navigation bar (header) using Bootstrap classes.
Instructions:
1. Create a new HTML file named index.html
.
2. Include Bootstrap CSS and JavaScript files via CDN.
3. Add a Bootstrap navigation bar to the page with the following structure:
o Logo or Brand name
o Links for Home, About, and Contact
4. Save and view the page in your browser.
Solution Steps:
1. Create a New HTML File: Open your text editor and create a new file named index.html
.
2. Include Bootstrap CSS and JavaScript: In the <head>
section, include the Bootstrap CSS link:
html
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
In the <body>
section, add the Bootstrap JavaScript file:
html
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
3. Create a Navbar Using Bootstrap: Add the following code inside the <body>
section to create a basic responsive navbar:
html
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">My Website
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact
</a>
</li>
</ul>
</div>
</nav>
4. Save and Open the File: Save the file and open it in your browser. You should now see a responsive navigation bar.
No comments:
Post a Comment