Scribd
Upload
5 views4 pages

Program 3

The document provides an HTML code example demonstrating the use of Bootstrap 5.0 framework classes for creating lists, colors, and buttons. It includes a structured layout with a list group, various colored divs, and multiple styled buttons, all utilizing Bootstrap's utility classes. Additionally, it links to Bootstrap's CSS and JavaScript files via a CDN for styling and functionality.

Uploaded by

yogeshneelappa.atme
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
5 views4 pages

Program 3

The document provides an HTML code example demonstrating the use of Bootstrap 5.0 framework classes for creating lists, colors, and buttons. It includes a structured layout with a list group, various colored divs, and multiple styled buttons, all utilizing Bootstrap's utility classes. Additionally, it links to Bootstrap's CSS and JavaScript files via a CDN for styling and functionality.

Uploaded by

yogeshneelappa.atme
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/ 4

Program 3: Develop a Web page(s) with suitable HTML elements to demonstrate Bootstrap

5.0 framework classes for Lists, Colors and Bootstrap Buttons.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Bootstrap Demo</title>

<!-- Bootstrap CSS -->

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">

</head>

<body>

<div class="container mt-5">

<h2>Bootstrap 5.0 Demo</h2>

<!-- List Group -->

<h3 class="mt-4">List Group</h3>

<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>

<!-- Colors -->

<h3 class="mt-4">Colors</h3>

<div class="bg-primary text-white p-3 mb-3">Primary Color</div>

<div class="bg-secondary text-white p-3 mb-3">Secondary Color</div>


<div class="bg-success text-white p-3 mb-3">Success Color</div>

<div class="bg-danger text-white p-3 mb-3">Danger Color</div>

<div class="bg-warning text-dark p-3 mb-3">Warning Color</div>

<div class="bg-info text-white p-3 mb-3">Info Color</div>

<div class="bg-light text-dark p-3 mb-3">Light Color</div>

<div class="bg-dark text-white p-3 mb-3">Dark Color</div>

<!-- Buttons -->

<h3 class="mt-4">Buttons</h3>

<button type="button" class="btn btn-primary mr-2">Primary Button</button>

<button type="button" class="btn btn-secondary mr-2">Secondary Button</button>

<button type="button" class="btn btn-success mr-2">Success Button</button>

<button type="button" class="btn btn-danger mr-2">Danger Button</button>

<button type="button" class="btn btn-warning mr-2">Warning Button</button>

<button type="button" class="btn btn-info mr-2">Info Button</button>

<button type="button" class="btn btn-light mr-2">Light Button</button>

<button type="button" class="btn btn-dark">Dark Button</button>

</div>

<!-- Bootstrap JS (Optional, for certain components like dropdowns, modals, etc.) -->

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

</body>

</html>
Explanation

Sure, here's a breakdown of the HTML code provided and how it demonstrates Bootstrap 5.0
framework classes for Lists, Colors, and Bootstrap Buttons:

List Group:

The <ul> element with the class list-group is used to create a list group.

Each list item (<li>) within the list group has the class list-group-item, which styles the list items as
part of the list group.

Colors:

Various <div> elements are used to demonstrate different background colors.

Each <div> has a combination of Bootstrap's color utility classes, such as bg-primary, bg-secondary,
etc., to set the background color.

Additionally, text-white class is added to ensure the text color contrasts well with the background
color.

Buttons:

<button> elements are used to demonstrate different types of buttons.

Each button has the class btn, which is a general class for styling buttons in Bootstrap.

Each button also has a specific contextual class like btn-primary, btn-secondary, etc., to apply different
styles based on their purpose or importance.

The mr-2 class is used to add some margin to the right side of each button, ensuring proper spacing
between buttons.

Container:

The content is placed inside a <div> element with the class container to provide a responsive layout.

The mt-5 class adds top margin to provide spacing between the content and the top of the viewport.

Bootstrap CDN:
Bootstrap CSS and JavaScript files are linked from a Content Delivery Network (CDN) to ensure that
Bootstrap styles and functionality are applied to the page.

Overall, this HTML code provides a simple demonstration of how Bootstrap 5.0 framework classes can
be used to style lists, apply colors, and create buttons with various styles.

You might also like