Scribd
Upload
2 views

Program 7

This document provides an HTML example demonstrating the use of Bootstrap 5.0 framework classes for images, cards, and gutters. It includes sections for responsive images, card components, and gutter spacing, showcasing various Bootstrap utilities for layout and styling. The document also explains the types of gutters available in Bootstrap 5, including horizontal, vertical, and combined gutters.

Uploaded by

yogeshneelappa.atme
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

Program 7

This document provides an HTML example demonstrating the use of Bootstrap 5.0 framework classes for images, cards, and gutters. It includes sections for responsive images, card components, and gutter spacing, showcasing various Bootstrap utilities for layout and styling. The document also explains the types of gutters available in Bootstrap 5, including horizontal, vertical, and combined gutters.

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

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

0
framework classes for Images, Cards and Gutters.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Bootstrap 5 Demo</title>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0/css/bootstrap.min.css"
rel="stylesheet">

</head>

<body>

<div class="container mt-5">

<h1 class="mb-4">Bootstrap 5.0 Demo</h1>

<!-- Images Section -->

<section>

<h2>Images</h2>

<div class="row">

<div class="col-md-4">

<img src="D:/Wallpapers/abc.jpg" class="img-fluid rounded" alt="Responsive image">

<p>Responsive image with rounded corners</p>

</div>

<div class="col-md-4">

<img src="D:/Wallpapers/om.jpg" class="img-thumbnail" alt="Thumbnail image">

<p>Thumbnail image</p>

</div>

<div class="col-md-4">
<img src="D:/Wallpapers/nature.jpg" class="img-fluid rounded-circle" alt="Circular image">

<p>Circular image</p>

</div>

</div>

</section>

<!-- Cards Section -->

<section class="mt-5">

<h2>Cards</h2>

<div class="row">

<div class="col-md-4">

<div class="card">

<img src="https://via.placeholder.com/150" class="card-img-top" alt="Card image">

<div class="card-body">

<h5 class="card-title">Card title</h5>

<p class="card-text">Some quick example text to build on the card title and make up the bulk of
the card's content.</p>

<a href="#" class="btn btn-primary">Go somewhere</a>

</div>

</div>

</div>

<div class="col-md-4">

<div class="card">

<img src="https://via.placeholder.com/150" class="card-img-top" alt="Card image">

<div class="card-body">

<h5 class="card-title">Card title</h5>

<p class="card-text">Some quick example text to build on the card title and make up the bulk of
the card's content.</p>

<a href="#" class="btn btn-primary">Go somewhere</a>


</div>

</div>

</div>

<div class="col-md-4">

<div class="card">

<img src="https://via.placeholder.com/150" class="card-img-top" alt="Card image">

<div class="card-body">

<h5 class="card-title">Card title</h5>

<p class="card-text">Some quick example text to build on the card title and make up the bulk of
the card's content.</p>

<a href="#" class="btn btn-primary">Go somewhere</a>

</div>

</div>

</div>

</div>

</section>

<!-- Gutters Section -->

<section class="mt-5">

<h2>Gutters</h2>

<div class="row gy-3">

<div class="col-md-4">

<div class="p-3 border bg-light">Custom column padding with gutters</div>

</div>

<div class="col-md-4">

<div class="p-3 border bg-light">Custom column padding with gutters</div>

</div>

<div class="col-md-4">

<div class="p-3 border bg-light">Custom column padding with gutters</div>


</div>

</div>

<div class="row gx-2">

<div class="col-md-4">

<div class="p-2 border bg-light">Custom column padding with gutters</div>

</div>

<div class="col-md-4">

<div class="p-2 border bg-light">Custom column padding with gutters</div>

</div>

<div class="col-md-4">

<div class="p-2 border bg-light">Custom column padding with gutters</div>

</div>

</div>

</section>

</div>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0/js/bootstrap.bundle.min.js"></
script>

</body>

</html>
Explanation

 <!DOCTYPE html>: Declares the document type as HTML5.


 <html lang="en">: Sets the language of the document to English.
 <head>: Contains meta-information about the document.

 <meta charset="UTF-8">: Specifies the character encoding.


 <meta name="viewport" content="width=device-width, initial-scale=1.0">:
Ensures proper rendering and touch zooming on mobile devices.
 <title>Bootstrap 5 Demo</title>: Sets the title of the webpage.
 <link
href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0/css/bootstrap.m
in.css" rel="stylesheet">: Links to the Bootstrap 5.0 CSS file for styling.

Body Section

 <body>: Contains the content of the document.


 <div class="container mt-5">: A Bootstrap container with a top margin. Containers
center the content and provide responsive padding.
 <h1 class="mb-4">Bootstrap 5.0 Demo</h1>: A main heading with a bottom
margin.

Images Section

 <section>: Defines a section in the document.


 <h2>Images</h2>: A subheading for the images section.
 <div class="row">: A Bootstrap row to contain columns.
o <div class="col-md-4">: A column that takes up 4 out of 12 grid spaces on
medium and larger screens.
 <img src="D:/Wallpapers/abc.jpg" class="img-fluid rounded"
alt="Responsive image">: An image that is responsive and has rounded
corners.
 <p>Responsive image with rounded corners</p>: A description of
the image.

The same structure is repeated for two other images with different classes (img-thumbnail,
img-fluid rounded-circle).

Cards Section

 <section class="mt-5">: A section with a top margin.


 <h2>Cards</h2>: A subheading for the cards section.
 <div class="row">: A Bootstrap row to contain columns.
o <div class="col-md-4">: A column that takes up 4 out of 12 grid spaces on
medium and larger screens.
 <div class="card">: A Bootstrap card component.
 <img src="https://via.placeholder.com/150"
class="card-img-top" alt="Card image">: An image at the
top of the card.
 <div class="card-body">: The card body.
 <h5 class="card-title">Card title</h5>: The card
title.
 <p class="card-text">Some quick example
text...</p>: The card text.
 <a href="#" class="btn btn-primary">Go
somewhere</a>: A button link.

The same structure is repeated for two other cards.

Gutters Section

 <section class="mt-5">: A section with a top margin.


 <h2>Gutters</h2>: A subheading for the gutters section.
 <div class="row gy-3">: A Bootstrap row with vertical gutters (spacing between
rows).
o <div class="col-md-4">: A column that takes up 4 out of 12 grid spaces on
medium and larger screens.
 <div class="p-3 border bg-light">Custom column padding with
gutters</div>: A div with padding, a border, and a light background.

The same structure is repeated for two other columns.

 <div class="row gx-2">: A Bootstrap row with horizontal gutters (spacing between
columns).
o The same column structure is repeated with different padding.

Script Section

 <script
src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0/js/bootstrap.bun
dle.min.js"></script>: Links to the Bootstrap 5.0 JavaScript bundle, which includes
Popper.js for tooltips and popovers.

Summary

This HTML document uses Bootstrap 5.0 to create a responsive webpage with sections for
images, cards, and gutters. Each section demonstrates different Bootstrap classes and
components to style and layout the content effectively.
In Bootstrap 5, gutters are the spaces between columns. They can be controlled to create
different layouts and spacing patterns. Bootstrap 5 provides utility classes for both horizontal (x-
axis) and vertical (y-axis) gutters, allowing you to customize the spacing between columns as
needed.

Types of Gutters

1. Horizontal Gutters (gx- classes)


2. Vertical Gutters (gy- classes)
3. Combined Gutters (g- classes)

Horizontal Gutters

Horizontal gutters control the space between columns horizontally.

 Class Syntax: gx-{size}


 Example Classes: gx-0, gx-1, gx-2, gx-3, gx-4, gx-5

Vertical Gutters

Vertical gutters control the space between rows vertically.

 Class Syntax: gy-{size}


 Example Classes: gy-0, gy-1, gy-2, gy-3, gy-4, gy-5

Combined Gutters

Combined gutters control the space both horizontally and vertically.

 Class Syntax: g-{size}


 Example Classes: g-0, g-1, g-2, g-3, g-4, g-5

You might also like