Scribd
Upload
66 views41 pages

Boo Strap

Bootstrap is a free front-end framework that provides HTML and CSS templates for common interface elements like navigation, buttons, forms, and grids. It also includes optional JavaScript plugins. This document demonstrates how to create a basic responsive website using Bootstrap, including adding the necessary HTML structure, linking the Bootstrap CSS file, and using Bootstrap classes to add typography, containers, and responsive columns.

Uploaded by

ponmadhan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
66 views41 pages

Boo Strap

Bootstrap is a free front-end framework that provides HTML and CSS templates for common interface elements like navigation, buttons, forms, and grids. It also includes optional JavaScript plugins. This document demonstrates how to create a basic responsive website using Bootstrap, including adding the necessary HTML structure, linking the Bootstrap CSS file, and using Bootstrap classes to add typography, containers, and responsive columns.

Uploaded by

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

Bootstrap 5

What is Bootstrap?
 Bootstrap is a free front-end framework for faster and easier web
development
 Bootstrap includes HTML and CSS based design templates for
typography, forms, buttons, tables, navigation, modals, image
carousels and many other, as well as optional JavaScript plugins
 Bootstrap also gives you the ability to easily create responsive designs

<!DOCTYPE html>

<html lang="en">

<head>

<title>Bootstrap 5 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-fluid p-5 bg-primary text-white text-center">

<h1>My First Bootstrap Page</h1>

<p>Resize this responsive page to see the effect!</p>

</div>

<div class="container mt-5">

<div class="row">

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

<h3>Column 1</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>


<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>

</div>

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

<h3>Column 2</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>

<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>

</div>

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

<h3>Column 3</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>

<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>

</div>

</div>

</div>

</body>

</html>

Create Your First Web Page With


Bootstrap 5
1. Add the HTML5 doctype

Bootstrap 5 uses HTML elements and CSS properties that require the HTML5
doctype.

Always include the HTML5 doctype at the beginning of the page, along with
the lang attribute and the correct title and character set:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap 5 Example</title>
    <meta charset="utf-8">
  </head>
</html>
2. Bootstrap 5 is mobile-first

Bootstrap 5 is designed to be responsive to mobile devices. Mobile-first styles


are part of the core framework.

To ensure proper rendering and touch zooming, add the following <meta> tag


inside the <head> element:

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

The width=device-width part sets the width of the page to follow the screen-


width of the device (which will vary depending on the device).

The initial-scale=1 part sets the initial zoom level when the page is first
loaded by the browser.

3. Containers

Bootstrap 5 also requires a containing element to wrap site contents.

There are two container classes to choose from:

1. The .container class provides a responsive fixed width container


2. The .container-fluid class provides a full width container,
spanning the entire width of the viewport

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

<h1>My First Bootstrap Page</h1>


<p>This part is inside a .container class.</p>

<p>The .container class provides a responsive fixed width container.</p>

<p>Resize the browser window to see that the container width will change at different
breakpoints.</p>

</div>

</body>

</html>

<!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-fluid">

<h1>My First Bootstrap Page</h1>

<p>This part is inside a .container-fluid class.</p>

<p>The .container-fluid class provides a full width container, spanning the entire width of the
viewport.</p>

</div>

</body>

</html>
Bootstrap 5 Containers
<!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">

<h1>My First Bootstrap Page</h1>

<p>This part is inside a .container class.</p>

<p>The .container class provides a responsive fixed width container.</p>

<p>Resize the browser window to see that the container width will change at different
breakpoints.</p>

</div>

</body>

</html>

Fluid Container
Use the .container-fluid class to create a full width container, that will always
span the entire width of the screen (width is always 100%):

<!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-fluid">

<h1>My First Bootstrap Page</h1>

<p>This part is inside a .container-fluid class.</p>

<p>The .container-fluid class provides a full width container, spanning the entire width of the
viewport.</p>

</div>

</body>

</html>

Container Padding
By default, containers have left and right padding, with no top or bottom
padding. Therefore, we often use spacing utilities, such as extra padding
and margins to make them look even better. For example, .pt-5 means "add
a large top padding":

<!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 pt-5">

<h1>My First Bootstrap Page</h1>

<p>This container has an extra top padding.</p>

<p>Try to remove the .pt-5 class to see the difference.</p>

</div>

</body>

</html>

Typography Classes
Makes a paragraph stand out
<!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>

<div class="container mt-3">

<h2>Typography</h2>

<p>Use the .lead class to make a paragraph "stand out":</p>


<p class="lead">This paragraph stands out.</p>

<p>This is a regular paragraph.</p>

</div>

</body>

</html>

Class Description

.lead Makes a paragraph stand out

.text-left Indicates left-aligned text

.text-break Prevents long text from breaking layout

.text-center Indicates center-aligned text

.text- Removes the underline from a link


decoration-
none

.text-end Indicates right-aligned text

.text-nowrap Indicates no wrap text

.text- Indicates lowercased text


lowercase
.text- Indicates uppercased text
uppercase

.text- Indicates capitalized text


capitalize

.initialism Displays the text inside an <abbr> element in a slightly smaller font si

.list-unstyled Removes the default list-style and left margin on list items (works on
both <ul> and <ol>). This class only applies to immediate children list
(to remove the default list-style from any nested lists, apply this class
nested lists as well)

.list-inline Places all list items on a single line (used together with .list-inline
each <li> elements)

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

<div class="container mt-3">

<h2>Typography</h2>

<p class="text-left">Left-aligned text.</p>


<p class="text-end">Right-aligned text.</p>

<p class="text-center">Center-aligned text.</p>

<p class="text-nowrap">No wrap text. No wrap text. No wrap text. No wrap text.</p>

</div>

</body>

</html>

Prevents long text from breaking layout


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

<div class="container mt-3">

<h2>Text break / Word break</h2>

<p>The .text-break class prevents long text from breaking layout.</p>

<p>With .text-break:</p>

<p class="text-
break">AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZzAaBbCcDdEeFfGgHhIiJjKkLl
MmNnOoPpQqRrSsTtUuVvWwXxYyZzAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYy
ZzAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz</p>

<p>Without .text-break:</p>

<p>AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZzAaBbCcDdEeFfGgHhIiJjKkLlMmN
nOoPpQqRrSsTtUuVvWwXxYyZzAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZzAaB
bCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz</p>

</div>
</body>

</html>

Indicates center-aligned text

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

<div class="container mt-3">

<h2>Typography</h2>

<p class="text-left">Left-aligned text.</p>

<p class="text-end">Right-aligned text.</p>

<p class="text-center">Center-aligned text.</p>

<p class="text-nowrap">No wrap text. No wrap text. No wrap text. No wrap text.</p>

</div>

</body>

</html>

Removes the underline from a link


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

<div class="container mt-3">

<h2>Text Decoration</h2>

<p>Use the .text-decoration-none class to remove the underline from a link.</p>

<a href="#" class="text-decoration-none">A link without underline.</a>

</div>

</body>

</html>

Indicates right-aligned text


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

<div class="container mt-3">

<h2>Typography</h2>

<p class="text-left">Left-aligned text.</p>

<p class="text-end">Right-aligned text.</p>


<p class="text-center">Center-aligned text.</p>

<p class="text-nowrap">No wrap text. No wrap text. No wrap text. No wrap text.</p>

</div>

</body>

</html>

Indicates no wrap text


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

<div class="container mt-3">

<h2>Typography</h2>

<p class="text-left">Left-aligned text.</p>

<p class="text-end">Right-aligned text.</p>

<p class="text-center">Center-aligned text.</p>

<p class="text-nowrap">No wrap text. No wrap text. No wrap text. No wrap text.</p>

</div>

</body>

</html>

Indicates lowercased text


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

<div class="container mt-3">

<h2>Typography</h2>

<p class="text-lowercase">Lowercased text.</p>

<p class="text-uppercase">Uppercased text.</p>

<p class="text-capitalize">Capitalized text.</p>

</div>

</body>

</html>

Indicates uppercased text


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

<div class="container mt-3">

<h2>Typography</h2>

<p class="text-lowercase">Lowercased text.</p>


<p class="text-uppercase">Uppercased text.</p>

<p class="text-capitalize">Capitalized text.</p>

</div>

</body>

</html>

Text Colors
Bootstrap 5 has some contextual classes that can be used to provide
"meaning through colors".

The classes for text colors are: .text-muted, .text-primary, .text-success, .text-


info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-
body (default body color/often black) and .text-light:

<!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>Contextual Colors</h2>

<p>Use the contextual classes to provide "meaning through colors":</p>

<p class="text-muted">This text is muted.</p>

<p class="text-primary">This text is important.</p>

<p class="text-success">This text indicates success.</p>


<p class="text-info">This text represents some information.</p>

<p class="text-warning">This text represents a warning.</p>

<p class="text-danger">This text represents danger.</p>

<p class="text-secondary">Secondary text.</p>

<p class="text-dark">This text is dark grey.</p>

<p class="text-body">Default body color (often black).</p>

<p class="text-light">This text is light grey (on white background).</p>

<p class="text-white">This text is white (on white background).</p>

</div>

</body>

</html>

Background Colors
The classes for background colors are: .bg-primary, .bg-success, .bg-info, .bg-
warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.

Note that background colors do not set the text color, so in some cases you'll
want to use them together with a .text-* color class.

<!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>Contextual Backgrounds</h2>

<p>Use the contextual background classes to provide "meaning through colors".</p>

<p>Note that you can also add a .text-* class if you want a different text color:</p>

<p class="bg-primary text-white">This text is important.</p>

<p class="bg-success text-white">This text indicates success.</p>

<p class="bg-info text-white">This text represents some information.</p>

<p class="bg-warning text-white">This text represents a warning.</p>

<p class="bg-danger text-white">This text represents danger.</p>

<p class="bg-secondary text-white">Secondary background color.</p>

<p class="bg-dark text-white">Dark grey background color.</p>

<p class="bg-light text-dark">Light grey background color.</p>

</div>

</body>

</html>

Bootstrap 5 Tables
Bootstrap 5 Basic Table
A basic Bootstrap 5 table has a light padding and horizontal dividers.

The .table class adds basic styling to a table:

<!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>Basic Table</h2>

<p>The .table class adds basic styling (light padding and horizontal dividers) to a table:</p>

<table class="table">

<thead>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Email</th>

</tr>

</thead>

<tbody>

<tr>

<td>John</td>

<td>Doe</td>

<td>[email protected]</td>

</tr>

<tr>

<td>Mary</td>

<td>Moe</td>

<td>[email protected]</td>

</tr>

<tr>

<td>July</td>

<td>Dooley</td>

<td>[email protected]</td>

</tr>

</tbody>
</table>

</div>

</body>

</html>

The .table-striped class adds zebra-stripes to a table:

Bordered Table
The .table-bordered class adds borders on all sides of the table and cells:

Hover Rows
The .table-hover class adds a hover effect (grey background color) on table
rows:

<!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>Hover Rows</h2>

<p>The .table-hover class enables a hover state (grey background on mouse over) on table
rows:</p>

<table class="table table-hover">


<thead>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Email</th>

</tr>

</thead>

<tbody>

<tr>

<td>John</td>

<td>Doe</td>

<td>[email protected]</td>

</tr>

<tr>

<td>Mary</td>

<td>Moe</td>

<td>[email protected]</td>

</tr>

<tr>

<td>July</td>

<td>Dooley</td>

<td>[email protected]</td>

</tr>

</tbody>

</table>

</div>

</body>

</html>
Black/Dark Table
The .table-dark class adds a black background to the table:

<!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>Black/Dark Table</h2>

<p>The .table-dark class adds a black background to the table:</p>

<table class="table table-dark">

<thead>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Email</th>

</tr>

</thead>

<tbody>

<tr>

<td>John</td>

<td>Doe</td>
<td>[email protected]</td>

</tr>

<tr>

<td>Mary</td>

<td>Moe</td>

<td>[email protected]</td>

</tr>

<tr>

<td>July</td>

<td>Dooley</td>

<td>[email protected]</td>

</tr>

</tbody>

</table>

</div>

</body>

</html>

Bootstrap 5 Images
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="cinqueterre.jpg" class="rounded" alt="Cinque Terre" width="304" height="236">

</div>

</body>

</html>

Circle
The .rounded-circle class shapes the image to a circle:

<!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>Circle</h2>

<p>The .rounded-circle class shapes the image to a circle:</p>


<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre" width="304" height="236">

</div>

</body>

</html>

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>

<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>
Aligning Images
Float an image to the left with the .float-start class or to the right
with .float-end:

<!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>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="paris.jpg" class="float-end" alt="Paris" width="304" height="236">

</div>

</body>

</html>

Centered Image
Center an image by adding the utility classes .mx-auto (margin:auto) and .d-
block (display:block) to the 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>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>

Bootstrap 5 Alerts
Alerts are created with the .alert class, followed by one of the contextual
classes .alert-success, .alert-info, .alert-warning, .alert-danger, .ale
rt-primary, .alert-secondary, .alert-light or .alert-dark:
<!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>Alerts</h2>

<p>Alerts are created with the .alert class, followed by a contextual color classes:</p>

<div class="alert alert-success">

<strong>Success!</strong> This alert box could indicate a successful or positive action.

</div>

<div class="alert alert-info">

<strong>Info!</strong> This alert box could indicate a neutral informative change or action.

</div>

<div class="alert alert-warning">

<strong>Warning!</strong> This alert box could indicate a warning that might need attention.

</div>

<div class="alert alert-danger">

<strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative action.

</div>

<div class="alert alert-primary">

<strong>Primary!</strong> Indicates an important action.

</div>

<div class="alert alert-secondary">

<strong>Secondary!</strong> Indicates a slightly less important action.

</div>

<div class="alert alert-dark">

<strong>Dark!</strong> Dark grey alert.

</div>

<div class="alert alert-light">


<strong>Light!</strong> Light grey alert.

</div>

</div>

</body>

</html>

Alert Links
Add the .alert-link class to any links inside the alert box to create "matching
colored links":

<!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>Alert Links</h2>

<p>Add the alert-link class to any links inside the alert box to create "matching colored links".</p>

<div class="alert alert-success">

<strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.

</div>

<div class="alert alert-info">

<strong>Info!</strong> You should <a href="#" class="alert-link">read this message</a>.

</div>
<div class="alert alert-warning">

<strong>Warning!</strong> You should <a href="#" class="alert-link">read this message</a>.

</div>

<div class="alert alert-danger">

<strong>Danger!</strong> You should <a href="#" class="alert-link">read this message</a>.

</div>

<div class="alert alert-primary">

<strong>Primary!</strong> You should <a href="#" class="alert-link">read this message</a>.

</div>

<div class="alert alert-secondary">

<strong>Secondary!</strong> You should <a href="#" class="alert-link">read this message</a>.

</div>

<div class="alert alert-dark">

<strong>Dark!</strong> You should <a href="#" class="alert-link">read this message</a>.

</div>

<div class="alert alert-light">

<strong>Light!</strong> You should <a href="#" class="alert-link">read this message</a>.

</div>

</div>

</body>

</html>

Closing Alerts
To close the alert message, add a .alert-dismissible class to the alert
container. Then add class="btn-close" and data-bs-dismiss="alert" to a
link or a button element (when you click on this the alert box will disappear).
<!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>Alerts</h2>

<p>The button with class="btn-close" and data-bs-dismiss="alert" is used to close the alert
box.</p>

<p>The alert-dismissible class aligns the button to the right.</p>

<div class="alert alert-success alert-dismissible">

<button type="button" class="btn-close" data-bs-dismiss="alert"></button>

<strong>Success!</strong> This alert box could indicate a successful or positive action.

</div>

<div class="alert alert-info alert-dismissible">

<button type="button" class="btn-close" data-bs-dismiss="alert"></button>

<strong>Info!</strong> This alert box could indicate a neutral informative change or action.

</div>

<div class="alert alert-warning alert-dismissible">

<button type="button" class="btn-close" data-bs-dismiss="alert"></button>

<strong>Warning!</strong> This alert box could indicate a warning that might need attention.

</div>

<div class="alert alert-danger alert-dismissible">

<button type="button" class="btn-close" data-bs-dismiss="alert"></button>

<strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative action.

</div>

<div class="alert alert-primary alert-dismissible">

<button type="button" class="btn-close" data-bs-dismiss="alert"></button>

<strong>Primary!</strong> Indicates an important action.


</div>

<div class="alert alert-secondary alert-dismissible">

<button type="button" class="btn-close" data-bs-dismiss="alert"></button>

<strong>Secondary!</strong> Indicates a slightly less important action.

</div>

<div class="alert alert-dark alert-dismissible">

<button type="button" class="btn-close" data-bs-dismiss="alert"></button>

<strong>Dark!</strong> Dark grey alert.

</div>

<div class="alert alert-light alert-dismissible">

<button type="button" class="btn-close" data-bs-dismiss="alert"></button>

<strong>Light!</strong> Light grey alert.

</div>

</div>

</body>

</html>

Animated Alerts
The .fade and .show classes adds a fading effect when closing the alert
message:

<!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>Animated Alerts</h2>

<p>The .fade and .show classes adds a fading effect when closing the alert message.</p>

<div class="alert alert-success alert-dismissible fade show">

<button type="button" class="btn-close" data-bs-dismiss="alert"></button>

<strong>Success!</strong> This alert box could indicate a successful or positive action.

</div>

<div class="alert alert-info alert-dismissible fade show">

<button type="button" class="btn-close" data-bs-dismiss="alert"></button>

<strong>Info!</strong> This alert box could indicate a neutral informative change or action.

</div>

<div class="alert alert-warning alert-dismissible fade show">

<button type="button" class="btn-close" data-bs-dismiss="alert"></button>

<strong>Warning!</strong> This alert box could indicate a warning that might need attention.

</div>

<div class="alert alert-danger alert-dismissible fade show">

<button type="button" class="btn-close" data-bs-dismiss="alert"></button>

<strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative action.

</div>

<div class="alert alert-primary alert-dismissible fade show">

<button type="button" class="btn-close" data-bs-dismiss="alert"></button>

<strong>Primary!</strong> Indicates an important action.

</div>

<div class="alert alert-secondary alert-dismissible fade show">

<button type="button" class="btn-close" data-bs-dismiss="alert"></button>

<strong>Secondary!</strong> Indicates a slightly less important action.

</div>

<div class="alert alert-dark alert-dismissible fade show">

<button type="button" class="btn-close" data-bs-dismiss="alert"></button>


<strong>Dark!</strong> Dark grey alert.

</div>

<div class="alert alert-light alert-dismissible fade show">

<button type="button" class="btn-close" data-bs-dismiss="alert"></button>

<strong>Light!</strong> Light grey alert.

</div>

</div>

</body>

</html>

Bootstrap Buttons
Button Styles
Bootstrap provides different styles of buttons:

To achieve the button styles above, Bootstrap has the following classes:

 .btn
 .btn-default
 .btn-primary
 .btn-success
 .btn-info
 .btn-warning
 .btn-danger
 .btn-link

<!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 rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

<h2>Button Styles</h2>

<button type="button" class="btn">Basic</button>

<button type="button" class="btn btn-default">Default</button>

<button type="button" class="btn btn-primary">Primary</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-link">Link</button>

</div>

</body>

</html>

<a href="#" class="btn btn-info" role="button">Link Button</a>


<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">

The classes that define the different sizes are:

 .btn-lg
 .btn-sm
 .btn-xs

<!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 rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

<h2>Button Sizes</h2>

<button type="button" class="btn btn-primary btn-lg">Large</button>

<button type="button" class="btn btn-primary">Normal</button>

<button type="button" class="btn btn-primary btn-sm">Small</button>

<button type="button" class="btn btn-primary btn-xs">XSmall</button>

</div>

</body>

</html>

<!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 rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

</head>
<body>

<div class="container">

<h2>Block Level Buttons</h2>

<button type="button" class="btn btn-primary btn-block">Button 1</button>

<button type="button" class="btn btn-default btn-block">Button 2</button>

<h2>Large Block Level Buttons</h2>

<button type="button" class="btn btn-primary btn-lg btn-block">Button 1</button>

<button type="button" class="btn btn-default btn-lg btn-block">Button 2</button>

<h2>Small Block Level Buttons</h2>

<button type="button" class="btn btn-primary btn-sm btn-block">Button 1</button>

<button type="button" class="btn btn-default btn-sm btn-block">Button 2</button>

</div>

</body>

</html>

Active/Disabled Buttons
A button can be set to an active (appear pressed) or a disabled (unclickable)
state:

The class .active makes a button appear pressed, and the


class .disabled makes a button unclickable:

<!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 rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

<h2>Button States</h2>

<button type="button" class="btn btn-primary">Primary Button</button>

<button type="button" class="btn btn-primary active">Active Primary</button>

<button type="button" class="btn btn-primary disabled">Disabled Primary</button>

</div>

</body>

</html>

Bootstrap Button Groups
Button Groups
Bootstrap allows you to group a series of buttons together (on a single line)
in a button group

<!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 rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

<h2>Button Group</h2>

<p>The .btn-group class creates a button group:</p>

<div class="btn-group">

<button type="button" class="btn btn-primary">Apple</button>

<button type="button" class="btn btn-primary">Samsung</button>

<button type="button" class="btn btn-primary">Sony</button>

</div>

</div>

</body>

</html>

 Instead of applying button sizes to every button in a group, use class .btn-


group-lg|sm|xs to size all buttons in the group:

<div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

Vertical Button Groups


Bootstrap also supports vertical button groups:

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>
Justified Button Groups
To span the entire width of the screen, use the .btn-group-justified class:

<!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 rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

<h2>Justified Button Groups</h2>

<p>To span the entire width of the screen, use the .btn-group-justified class:</p>

<div class="btn-group btn-group-justified">

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

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

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

</div>

</div>

</body>

</html>
Nesting Button Groups & Dropdown
Menus
<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-
toggle="dropdown">
    Sony <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Tablet</a></li>
      <li><a href="#">Smartphone</a></li>
    </ul>
  </div>
</div>

Split Button Dropdowns


<!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 rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

<h2>Split Buttons</h2>

<div class="btn-group">

<button type="button" class="btn btn-primary">Sony</button>


<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

<span class="caret"></span>

</button>

<ul class="dropdown-menu" role="menu">

<li><a href="#">Tablet</a></li>

<li><a href="#">Smartphone</a></li>

</ul>

</div>

</div>

</body>

</html>

You might also like