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