Scribd
Upload
19 views45 pages

Lecture 20-21

web

Uploaded by

Muhammad Abubakar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
19 views45 pages

Lecture 20-21

web

Uploaded by

Muhammad Abubakar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 45

Lecture 20-21

Bootstrap
Images (Rounded corner Image)
The .rounded class adds rounded corners to an image:Example
<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">
Rounded Corners
• The .rounded class adds rounded corners to an image:<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">


<h2>Rounded Corners</h2>
<p>The .rounded class adds rounded corners to an image:</p>
<img src= jpg_44-2 "class="rounded" alt=“.jpg" width="304" height="236">
</div>

</body>
</html>
OUTPUT
Thumbnail
The .img-thumbnail class shapes the image to a thumbnail
(bordered)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
CONT…
<div class="container mt-3">
<h2>Thumbnail</h2>
<p>The .img-thumbnail class creates a thumbnail of the image:</p>

<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque


Terre" width="304" height="236">
</div>

</body>
</html>
OUTPUT Thumnail
Aligning Images

• Float an image to the left with the .float-start class or to the right
with .float-end
Example Aligning images
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
Cont..

<div class="container mt-3">


<h2>Aligning images</h2>
<p>Use the float classes to float the image to the left or to the right:</p>
<img src="paris.jpg" class="float-start" alt="Paris" width="304" height="236">
<img src=C:\Users\hp\Desktop\jpg_44-2.jpg"" class="float-end" alt="Paris"
width="304" height="236">
</div>

</body>
</html>
output
Centered Image

• Center an image by adding the utility classes .mx-auto (margin:auto)


and .d-block (display:block) to the image:

Example
• <img src="paris.jpg" class="mx-auto d-block">
• Mx -auto horizontally centering fixed-width block level content d-
block class sets the element to be a block-level element.
Centered Image example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
Cont..
<div class="container mt-3">
<h2>Centered Image</h2>
<p>Center an image by adding the utility classes .mx-auto
(margin:auto) and .d-block (display:block) to the image:</p>
<img src="paris.jpg" class="mx-auto d-block" style="width:50%">
</div>

</body>
</html>
Output
Responsive Images
Images come in all sizes. So do screens. Responsive images automatically
adjust to fit the size of the screen.

Create responsive images by adding an .img-fluid class to the <img> tag.


The image will then scale nicely to the parent element.

The .img-fluid class applies max-width: 100%; and height: auto; to the
image:

Example
<img class="img-fluid" src="ny.jpg" alt="New York"
Responsive image
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
Cont….

<div class="container mt-3">


<h2>Image</h2>
<p>The .img-fluid class makes the image scale nicely to the parent element
(resize the browser window to see the effect):</p>
<img class="img-fluid" src="ny.jpg" alt="New York" width="1100"
height="500">
</div>

</body>
</html>
Bootstrap 5 Jumbotron

• A jumbotron was introduced in Bootstrap 3 as a big padded box for


calling extra attention to some special content or information.

• Jumbotrons are no longer supported in Bootstrap 5. However, you


can use a <div> element and add special helper classes together with
a color class to achieve the same effect
jumboTron
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
Cont..

<div class="container mt-3">


<h2>Example of Jumbotron</h2>
<div class="mt-4 p-5 bg-primary text-white rounded">
<h1>Jumbotron Example</h1>
<P> Pakistan is the fifth-most populous country, with a population of over 241.5 million, having
the second-largest Muslim population as of 2023. Islamabad is the nation's capital, while Karachi is
its largest city and financial centre. </p>
</div>
</div>

</body>
</html>
Output
buttons
Example
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
Button outline
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
Cont…
<div class="container mt-3">
<h2>Button Outline</h2>
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button type="button" class="btn btn-outline-light text-dark">Light</button>
</div>
</body>
</html>
output
Stacked Form (creates Input field and Submit button in stacked format)
All textual <input> and <textarea> elements with class .form-control get proper form styling:
Cont…
<form action="/action_page.php"> //
<div class="mb-3 mt-3">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="mb-3">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password"
name="pswd">
</div>
Cont…
<div class="form-check mb-3">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"
name="remember"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Explanation
• The action attribute defines the action to be performed when the
form is submitted.
• Usually, the form data is sent to a file on the server when the user
clicks on the submit button. In this example the form data is sent to a
file called "action_page.php
Creating Text area
class:
<label for="comment">Comments:</label>
<textarea class="form-control" rows="5" id="comment" name="text"></textarea>
Form control
You can change the size of .form-control inputs with .form-control-lg
or .form-control-sm:

Example
<input type="text" class="form-control form-control-lg"
placeholder="Large input">
<input type="text" class="form-control" placeholder="Normal input">
<input type="text" class="form-control form-control-sm"
placeholder="Small input">
OUTPUT
disabled and/or readonly
Use the disabled and/or read only attributes to disable the input field:

Example
<input type="text" class="form-control" placeholder="Normal
input">
<input type="text" class="form-control" placeholder="Disabled
input" disabled>
<input type="text" class="form-control" placeholder="Readonly
input" readonly>
OUTPUT
LIST Group In Bootstrap
Basic List Groups
The most basic list group is an unordered list with list items:

To create a basic list group, use an <ul> element with class .list-group,
and <li> elements with class .list-group-item:
List groups
• <ul class="list-group">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
List Groups
Active state Use the .active class to highlight the current item:

<ul class="list-group">
<li class="list-group-item active">Active item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
output
Horizontal List Groups

• If you want the list items to display horizontally instead of vertically


(side by side instead of on top of each other), add the .list-group-
horizontal
<ul class="list-group list-group-horizontal">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
<li class="list-group-item">Fourth item</li>
</ul>
Flex box
• The biggest difference between Bootstrap 3 and Bootstrap 4 & 5 is
that Bootstrap 5 now uses flexbox, instead of floats, to handle the
layout.

• The Flexible Box Layout Module, makes it easier to design flexible


responsive layout structure without using float or positioning
Flexbox To create a flexbox container and to transform direct children into flex
items, use the d-flex class:

<div class="container mt-3">


<h2>Flex</h2>
<p>To create a flexbox container and transform direct children into flex items, use the d-flex
class:</p>
<div class="d-flex p-3 bg-secondary text-white">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
</div>

You might also like