Scribd
Upload
9 views5 pages

Lists, Colors, Buttons

The document outlines the development of web pages using Bootstrap 5.0 to demonstrate lists, colors, and buttons. It provides a structured procedure for creating HTML documents that utilize Bootstrap classes for unordered and ordered lists, various alert color messages, and different button styles. Each section includes HTML code examples and emphasizes linking Bootstrap's CSS and JavaScript for functionality.

Uploaded by

BENAZIR AE
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
9 views5 pages

Lists, Colors, Buttons

The document outlines the development of web pages using Bootstrap 5.0 to demonstrate lists, colors, and buttons. It provides a structured procedure for creating HTML documents that utilize Bootstrap classes for unordered and ordered lists, various alert color messages, and different button styles. Each section includes HTML code examples and emphasizes linking Bootstrap's CSS and JavaScript for functionality.

Uploaded by

BENAZIR AE
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

3.

Develop web pages with suitable HTML elements to


demonstrate Bootstrap 5.0 framework classes for Lists,
colors and bootstrap buttons.
LISTS:

Aim:

To create a web page demonstrating the use of unordered and ordered lists using Bootstrap 5.0
classes.

Procedure:

1. Create a basic HTML document structure with <!DOCTYPE html>.

2. Include the Bootstrap 5.0 CSS link inside the <head> section.

3. Inside the <body>, add a container to hold the list content.

4. Create an unordered list (<ul>) and style it using Bootstrap's list-group class.

5. Create an ordered list (<ol>) and style it using Bootstrap's list-group-numbered class

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5.0 Lists</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]
alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
/* Optional custom styles */ body {
padding: 20px;
}

</style>
</head>
<body>
<div class="container">
<h1>Bootstrap 5.0 Lists</h1>

<ul class="list-group">
<li class="list-group-item">Item 1</li>
<li class="list-group-item">Item 2</li>
<li class="list-group-item">Item 3</li>
</ul>

<ol class="list-group list-group-numbered">


<li class="list-group-item">Item 1</li>
<li class="list-group-item">Item 2</li>
<li class="list-group-item">Item 3</li>
</ol>
</div>

<!-- Bootstrap Bundle with Popper -->


<script src="https://cdn.jsdelivr.net/npm/[email protected]
alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

OUTPUT:

COLORS:

Aim:

To demonstrate the use of different Bootstrap 5.0 color classes for alert messages on a web page.

Procedure:

1. Create an HTML document with the <!DOCTYPE html> declaration.

2. Link Bootstrap 5.0 CSS in the <head> section.

3. Create a container in the <body> to hold the alert messages.


4. Use Bootstrap's alert and color-specific classes (e.g., alert-primary, alert-secondary, etc.) to
display different colored alert boxes.

5. Add Bootstrap's JS bundle with Popper at the end of the document.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5.0 Colors</title>
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/
bootstrap.min.css" rel="stylesheet">

<style>
/* Optional custom styles */ body {
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>Bootstrap 5.0 Colors</h1>

<div class="alert alert-primary" role="alert"> Primary color


</div>
<div class="alert alert-secondary" role="alert"> Secondary color
</div>
<div class="alert alert-success" role="alert"> Success color
</div>
<div class="alert alert-danger" role="alert"> Danger color
</div>
<div class="alert alert-warning" role="alert"> Warning color
</div>
<div class="alert alert-info" role="alert"> Info color
</div>
<div class="alert alert-light" role="alert"> Light color
</div>
<div class="alert alert-dark" role="alert"> Dark color
</div>
</div>

<!-- Bootstrap Bundle with Popper -->


<script src="https://cdn.jsdelivr.net/npm/[email protected]
alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
BUTTONS:

Aim:

To demonstrate the usage of various button styles provided by Bootstrap 5.0.

Procedure:

1. Create an HTML document with the <!DOCTYPE html> declaration.

2. Link the Bootstrap 5.0 CSS in the <head> section of the document.

3. Add a <div class="container"> to wrap the content.

4. Use Bootstrap button classes like btn btn-primary, btn btn-secondary, etc., to create buttons
with different styles.

5. Link the Bootstrap 5.0 JavaScript bundle (with Popper) before the closing </body> tag to
enable any interactive elements.
RESULT:

Thus the output was successfully executed and verified.

You might also like