Lecture 20-21

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/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/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>
</head>
<body>
CONT…
<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>
</head>
<body>
Cont..

<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>
</head>
<body>
Cont..
<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>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
Cont….

<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>
</head>
<body>
Cont..

<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>
</head>
<body>
Cont…
<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>
</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">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:

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

Lecture 20-21

Uploaded by

Copyright:

Available Formats

You might also like

Lecture 20-21

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lecture 20-21

Uploaded by

Copyright:

Available Formats

Lecture 20-21

<div class="container mt-3">

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

<div class="container mt-3">

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

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

<div class="container mt-3">

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

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

<div class="container mt-3">

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

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

<div class="container mt-3">

You might also like