Page 213 - Computer Software Application TP - Volume 1
P. 213
COMPUTER SOFTWARE APPLICATION - CITS
EXERCISE 49 : Demonstrate on Bootstrap Styling
essentials like Breakpoints for
components, layouts and grid systems.
Practice on typography, floats, flex,
alignment, borders, position of elements,
shadow and visibility
Objectives
At the end of this exercise you shall be able to
• use bootstrap break point components,layouts and grid systerms in HTML
• use bootsrap typography, floats,flex,and alignment in HTML
• use bootsrap borders,position of elements and shadow & visibility in HTML.
Requirements
Tools/Materials
• Desktop/Laptop with latest configuration
• web browser
• Internet connection
Procedure
TASK 1: Applying Breakpoints to Components
1 Open the text editor
2 Write the following codes
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<title>Bootstrap Breakpoints</title>
<!-- Bootstrap CSS -->
<link href=https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css rel=”stylesheet”>
<style>
/* Additional custom styles */
.custom-component {
background-color: lightblue;
padding: 20px;
margin-bottom: 20px;
}
</style>
<!-- Bootstrap JS (optional) -->
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js”></script>
</head>
<body>
198
