Scribd
Upload
2 views

Program 6

The document is an HTML example demonstrating the Bootstrap 5.0 grid system with multiple rows and columns. It includes custom styling for visual separation using the 'custom-box' class, which adds borders, padding, and margins. The layout is responsive, allowing columns to adjust based on screen size, showcasing the capabilities of Bootstrap's grid system.

Uploaded by

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

Program 6

The document is an HTML example demonstrating the Bootstrap 5.0 grid system with multiple rows and columns. It includes custom styling for visual separation using the 'custom-box' class, which adds borders, padding, and margins. The layout is responsive, allowing columns to adjust based on screen size, showcasing the capabilities of Bootstrap's grid system.

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 6: Develop a Web page(s) with suitable HTML elements to demonstrate Bootstrap 5.

0
framework classes for Grid System.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Grid System Demo</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<style>
/* Adding some custom styles for demonstration purpose */
.custom-box {
border: 1px solid #ccc;
padding: 20px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>Bootstrap Grid System Demo</h1>

<!-- Four rows -->


<div class="row">
<!-- First row -->
<div class="col">
<div class="custom-box">Row 1, Column 1</div>
</div>
<div class="col">
<div class="custom-box">Row 1, Column 2</div>
</div>
<div class="col">
<div class="custom-box">Row 1, Column 3</div>
</div>
<div class="col">
<div class="custom-box">Row 1, Column 4</div>
</div>
<div class="col">
<div class="custom-box">Row 1, Column 5</div>
</div>
</div>

<div class="row">
<!-- Second row -->
<div class="col">
<div class="custom-box">Row 2, Column 1</div>
</div>
<div class="col">
<div class="custom-box">Row 2, Column 2</div>
</div>
<div class="col">
<div class="custom-box">Row 2, Column 3</div>
</div>
<div class="col">
<div class="custom-box">Row 2, Column 4</div>
</div>
<div class="col">
<div class="custom-box">Row 2, Column 5</div>
</div>
</div>

<div class="row">
<!-- Third row -->
<div class="col">
<div class="custom-box">Row 3, Column 1</div>
</div>
<div class="col">
<div class="custom-box">Row 3, Column 2</div>
</div>
<div class="col">
<div class="custom-box">Row 3, Column 3</div>
</div>
<div class="col">
<div class="custom-box">Row 3, Column 4</div>
</div>
<div class="col">
<div class="custom-box">Row 3, Column 5</div>
</div>
</div>

<!-- Repeat similar structure for rows 3 and 4 -->

</div>

<!-- Bootstrap JS (Optional) -->


<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></
script>
</body>
</html>
Explanation
This HTML document demonstrates the use of the Bootstrap Grid System to create a responsive
layout.

 <meta charset="UTF-8"> ensures the document uses UTF-8 character encoding.


 <meta name="viewport" content="width=device-width, initial-scale=1.0"> makes the webpage
responsive by setting the viewport width to the device width.
 <title>Bootstrap Grid System Demo</title> sets the title of the webpage.
 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"> includes Bootstrap CSS from a CDN.
 The <style> block defines custom styles for the demonstration, applying a border,
padding, and margin to elements with the custom-box class.

 The <body> contains the content of the webpage.


 <div class="container"> is a Bootstrap container that centers the content and provides
padding.
 <h1>Bootstrap Grid System Demo</h1> is a header for the webpage.
 <div class="row"> creates a new row in the Bootstrap grid.
 <div class="col"> creates a column within that row. Bootstrap columns are responsive
and will stack on smaller screens.

Columns with Custom Styling

Each div with the col class contains another div with the custom-box class, which applies
custom styling defined in the <style> block:

The program sets up a responsive grid layout using Bootstrap. It demonstrates multiple rows, each
containing five columns, with some custom styling for visual separation. The use of the Bootstrap
grid system allows these columns to adjust automatically based on the screen size, providing a
responsive design.
1. .custom-box:
o This selector targets all elements with the class custom-box. The styles defined
within this block will be applied to any HTML element that includes the custom-
box class.
2. border: 1px solid #ccc;:
o This property sets the border of the custom-box element.
o 1px: The border's width is 1 pixel.
o solid: The border's style is solid (as opposed to dashed, dotted, etc.).
o #ccc: The border's color is a light gray, represented by the hexadecimal color
code #ccc.
3. padding: 20px;:
o This property adds 20 pixels of padding inside the custom-box element. Padding
is the space between the content of the element and its border. This padding is
applied to all four sides (top, right, bottom, and left) of the element.
4. margin-bottom: 20px;:
o This property adds 20 pixels of margin below the custom-box element. Margin is
the space outside the element's border. In this case, it specifically sets the space
below the element.

Usage Example

Here's how you might use this CSS in an HTML document:

html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Box Example</title>
<!-- Internal CSS for custom styles -->
<style>
/* Adding some custom styles for demonstration purpose */
.custom-box {
border: 1px solid #ccc;
padding: 20px;
margin-bottom: 20px;
}
</style>
</head>
<body>

<div class="custom-box">
<h2>Box 1</h2>
<p>This is a custom-styled box with a border, padding, and margin.</p>
</div>
<div class="custom-box">
<h2>Box 2</h2>
<p>This is another custom-styled box with the same styles applied.</p>
</div>

</body>
</html>

What Happens in the Browser

1. The <style> block within the <head> section of the HTML document defines the custom
styles for elements with the custom-box class.
2. In the <body>, there are two <div> elements, each with the custom-box class.
3. The styles from the .custom-box class are applied to both <div> elements:
o Each box will have a light gray border that is 1 pixel wide and solid.
o Each box will have 20 pixels of padding inside, making space between the content
and the border.
o Each box will have a margin of 20 pixels below it, creating space between the
boxes.

This results in visually distinct boxes with consistent spacing and borders, making the content
within each box neatly separated and easier to read.

4o

You might also like