Thursday, 20 February 2025

Assignments Of Class 1: Introduction to Bootstrap

 


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

Search This Blog

Powered by Blogger.