Scribd
Upload
2 views

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
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

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