Scribd
Upload
32 views62 pages

Bootstrap 5 Programs .: Shivanshu 4NN21CS050 1.fixed Container

Uploaded by

debug thugs
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
32 views62 pages

Bootstrap 5 Programs .: Shivanshu 4NN21CS050 1.fixed Container

Uploaded by

debug thugs
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/ 62

BOOTSTRAP 5

PROGRAMS….

SHIVANSHU
4NN21CS050
1.FIXED CONTAINER
<!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/b
ootstrap.min.css" rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/boo
tstrap.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>
2.FLUID CONTAINER
<!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/b
ootstrap.min.css" rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/boo
tstrap.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>

3. Basic Structure of a Bootstrap 5 Grid


<!-- Control the column width, and how they should appear on
different devices -->
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>

<!-- Or let Bootstrap automatically handle the layout -->


<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>
4.THREE EQUAL COLUMNS
<!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/b
ootstrap.min.css" rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/boo
tstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid mt-3">


<h1>Three equal width columns</h1>
<p>Note: Try to add a new div with class="col" inside the row
class - this will create four equal-width columns.</p>
<div class="row">
<div class="col p-3 bg-primary text-white">.col</div>
<div class="col p-3 bg-dark text-white">.col</div>
<div class="col p-3 bg-primary text-white">.col</div>
</div>
</div>
</body>
</html>
5.RESPONSIVE COLUMNS
<!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/b
ootstrap.min.css" rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/boo
tstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid mt-3">


<h1>Responsive Columns</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other
when the screen is less than 576px wide.</p>
<div class="row">
<div class="col-sm-3 p-3 bg-primary text-white">.col</div>
<div class="col-sm-3 p-3 bg-dark text-white">.col</div>
<div class="col-sm-3 p-3 bg-primary text-white">.col</div>
<div class="col-sm-3 p-3 bg-dark text-white">.col</div>
</div>
</div>

</body>
</html>

6. Two Unequal Responsive Columns


<!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/b
ootstrap.min.css" rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/boo
tstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid mt-3">


<h1>Two Unequal Responsive Columns</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other
when the screen is less than 576px wide.</p>
<div class="row">
<div class="col-sm-4 p-3 bg-primary text-white">.col</div>
<div class="col-sm-8 p-3 bg-dark text-white">.col</div>
</div>
</div>

</body>
</html>
7. Bootstrap 5 Text/Typography
<!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/b
ootstrap.min.css" rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/boo
tstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">


<p class="h1">h1 Bootstrap heading</p>
<p class="h2">h2 Bootstrap heading</p>
<p class="h3">h3 Bootstrap heading</p>
<p class="h4">h4 Bootstrap heading</p>
<p class="h5">h5 Bootstrap heading</p>
<p class="h6">h6 Bootstrap heading</p>
</div>

</body>
</html>
8. Text Colors
<!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/c
ss/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>

9. Background Colors
<!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/c
ss/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>
<div class="bg-primary p-3"></div>
<div class="bg-success p-3"></div>
<div class="bg-info p-3"></div>
<div class="bg-warning p-3"></div>
<div class="bg-danger p-3"></div>
<div class="bg-secondary p-3"></div>
<div class="bg-dark p-3"></div>
<div class="bg-light p-3"></div>
</div>

</body>
</html>
10. Basic 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/c
ss/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>

11. Rounded Corners


<!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/c
ss/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>

12. ALERTS
<!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/c
ss/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>

13. ALERT 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/c
ss/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>

14. Button Styles


<!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/c
ss/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>Button Styles</h2>

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

</div>

</body>

</html>

15. 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/c
ss/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>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>

16. Button Sizes


<!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/c
ss/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>Button Sizes</h2>
<button type="button" class="btn btn-primary btn-
lg">Large</button>
<button type="button" class="btn btn-primary btn-
md">Default</button>
<button type="button" class="btn btn-primary btn-
sm">Small</button>
</div>

</body>
</html>

17.Basic Progress Bar


<!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/c
ss/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 Progress Bar</h2>
<p>To create a default progress bar, add a .progress
class to a container element and add the progress-bar
class to its child element. Use the CSS width property to
set the width of the progress bar:</p>
<div class="progress">
<div class="progress-bar" style="width:70%"></div>
</div>
</div>
</body>
</html>

18. Colored Progress Bars


<!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/c
ss/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>Colored Progress Bars</h2>
<p>Use any of the contextual color classes to change the
color of the progress bar:</p>
<!-- Blue -->
<div class="progress">
<div class="progress-bar" style="width:10%"></div>
</div><br>
<!-- Green -->
<div class="progress">
<div class="progress-bar bg-success"
style="width:20%"></div>
</div><br>

<!-- Turquoise -->


<div class="progress">
<div class="progress-bar bg-info"
style="width:30%"></div>
</div><br>

<!-- Orange -->


<div class="progress">
<div class="progress-bar bg-warning"
style="width:40%"></div>
</div><br>

<!-- Red -->


<div class="progress">
<div class="progress-bar bg-danger"
style="width:50%"></div>
</div><br>

<!-- White -->


<div class="progress border">
<div class="progress-bar bg-white"
style="width:60%"></div>
</div><br>

<!-- Grey -->


<div class="progress">
<div class="progress-bar bg-secondary"
style="width:70%"></div>
</div><br>

<!-- Light Grey -->


<div class="progress border">
<div class="progress-bar bg-light"
style="width:80%"></div>
</div><br>
<!-- Dark Grey -->
<div class="progress">
<div class="progress-bar bg-dark"
style="width:90%"></div>
</div>
</div>

</body>
</html>

19. Multiple Progress Bars


<!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/c
ss/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>Multiple Progress Bars</h2>
<p>Create a stacked progress bar by placing multiple
bars into the same div with class="progress":</p>
<div class="progress">
<div class="progress-bar bg-success"
style="width:40%">
Free Space
</div>
<div class="progress-bar bg-warning"
style="width:10%">
Warning
</div>
<div class="progress-bar bg-danger"
style="width:20%">
Danger
</div>
</div>
</div>

</body>
</html>

20. Colored Spinners


<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/c
ss/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>Colored Spinners</h2>
<p>Use any <strong>text color utilites</strong> to add
a color to the spinner:</p>

<div class="spinner-border text-muted"></div>


<div class="spinner-border text-primary"></div>
<div class="spinner-border text-success"></div>
<div class="spinner-border text-info"></div>
<div class="spinner-border text-warning"></div>
<div class="spinner-border text-danger"></div>
<div class="spinner-border text-secondary"></div>
<div class="spinner-border text-dark"></div>
<div class="spinner-border text-light"></div>
</div>

</body>
</html>

21. Basic Pagination


<!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/c
ss/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>Pagination</h2>
<p>To create a basic pagination, add the .pagination
class to an ul element. Then add the .page-item to each li
element and a .page-link class to each link inside li:</p>
<ul class="pagination">
<li class="page-item"><a class="page-link"
href="#">Previous</a></li>
<li class="page-item"><a class="page-link"
href="#">1</a></li>
<li class="page-item"><a class="page-link"
href="#">2</a></li>
<li class="page-item"><a class="page-link"
href="#">3</a></li>
<li class="page-item"><a class="page-link"
href="#">Next</a></li>
</ul>
</div>

</body>
</html>

22. Active State


<!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/c
ss/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>Active Item in a List Group</h2>
<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>
</div>

</body>
</html>
23. Card 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/c
ss/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>Card Image</h2>
<p>Image at the top (card-img-top):</p>
<div class="card" style="width:400px">
<img class="card-img-top"
src="../bootstrap4/img_avatar1.png" alt="Card image"
style="width:100%">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text some
example text. John Doe is an architect and engineer</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
<br>

<p>Image at the bottom (card-img-bottom):</p>


<div class="card" style="width:400px">
<div class="card-body">
<h4 class="card-title">Jane Doe</h4>
<p class="card-text">Some example text some
example text. Jane Doe is an architect and engineer</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
<img class="card-img-bottom"
src="../bootstrap4/img_avatar6.png" alt="Card image"
style="width:100%">
</div>
</div>

</body>
</html>

24. Dropdown Header


<!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/c
ss/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>Dropdowns</h2>
<p>The .dropdown-header class is used to add headers
inside the dropdown menu:</p>

<div class="dropdown">
<button type="button" class="btn btn-primary
dropdown-toggle" data-bs-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu">
<li><h5 class="dropdown-header">Dropdown header
1</h5></li>
<li><a class="dropdown-item" href="#">Link
1</a></li>
<li><a class="dropdown-item" href="#">Link
2</a></li>
<li><a class="dropdown-item" href="#">Link
3</a></li>
<li><h5 class="dropdown-header">Dropdown header
2</h5></li>
<li><a class="dropdown-item" href="#">Another
link</a></li>
</ul>
</div>
</div>

</body>
</html>

25. Navigation Bars


<!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/c
ss/bootstrap.min.css" rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/
bootstrap.bundle.min.js"></script>
</head>
<body>

<nav class="navbar navbar-expand-sm bg-light">


<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid mt-3">
<h3>Basic Navbar Example</h3>
<p>A navigation bar is a navigation header that is placed
at the top of the page.</p>
<p>The navbar-expand-xxl|xl|lg|md|sm class determines
when the navbar should stack vertically (on xxlarge, extra
large, large, medium or small screens).</p>
</div>

</body>
</html>

26. Carousel / Slideshow


<!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/c
ss/bootstrap.min.css" rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/
bootstrap.bundle.min.js"></script>
</head>
<body>

<!-- Carousel -->


<div id="demo" class="carousel slide" data-bs-
ride="carousel">

<!-- Indicators/dots -->


<div class="carousel-indicators">
<button type="button" data-bs-target="#demo" data-
bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#demo" data-
bs-slide-to="1"></button>
<button type="button" data-bs-target="#demo" data-
bs-slide-to="2"></button>
</div>
<!-- The slideshow/carousel -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="la.jpg" alt="Los Angeles" class="d-block"
style="width:100%">
</div>
<div class="carousel-item">
<img src="chicago.jpg" alt="Chicago" class="d-block"
style="width:100%">
</div>
<div class="carousel-item">
<img src="ny.jpg" alt="New York" class="d-block"
style="width:100%">
</div>
</div>

<!-- Left and right controls/icons -->


<button class="carousel-control-prev" type="button"
data-bs-target="#demo" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button"
data-bs-target="#demo" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>

<div class="container-fluid mt-3">


<h3>Carousel Example</h3>
<p>The following example shows how to create a basic
carousel with indicators and controls.</p>
</div>

</body>
</html>

27. Modals
<!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/c
ss/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">


<h3>Modal Example</h3>
<p>Click on the button to open the modal.</p>

<button type="button" class="btn btn-primary" data-bs-


toggle="modal" data-bs-target="#myModal">
Open modal
</button>
</div>

<!-- The Modal -->


<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">

<!-- Modal Header -->


<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="btn-close" data-bs-
dismiss="modal"></button>
</div>

<!-- Modal body -->


<div class="modal-body">
Modal body..
</div>

<!-- Modal footer -->


<div class="modal-footer">
<button type="button" class="btn btn-danger" data-
bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

</body>
</html>

28. Toasts
<!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/c
ss/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">


<h3>Toast Example</h3>
<p>A toast is like an alert box that is only shown for a
couple of seconds when something happens (i.e. when a
user clicks on a button, submits a form, etc.).</p>
<p>In this example, we use the .show class to always
show the toast by default. You can close it by clicking on
the close (x) icon inside the toast header.</p>

<div class="toast show">


<div class="toast-header">
<strong class="me-auto">Toast Header</strong>
<button type="button" class="btn-close" data-bs-
dismiss="toast"></button>
</div>
<div class="toast-body">
<p>Some text inside the toast body</p>
</div>
</div>
</div>

</body>
</html>

29. Offcanvas
<!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/c
ss/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="offcanvas offcanvas-start" id="demo">


<div class="offcanvas-header">
<h1 class="offcanvas-title">Heading</h1>
<button type="button" class="btn-close" data-bs-
dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<p>Some text lorem ipsum.</p>
<p>Some text lorem ipsum.</p>
<p>Some text lorem ipsum.</p>
<button class="btn btn-secondary" type="button">A
Button</button>
</div>
</div>

<div class="container-fluid mt-3">


<h3>Offcanvas Sidebar</h3>
<p>Offcanvas is similar to modals, except that it is often
used as a sidebar.</p>
<button class="btn btn-primary" type="button" data-bs-
toggle="offcanvas" data-bs-target="#demo">
Open Offcanvas Sidebar
</button>
</div>

</body>
</html>

30. Stacked Form


<!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/c
ss/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>Stacked form</h2>
<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>
<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>
</div>

</body>
</html>

31. Form Validation


<!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/c
ss/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">


<h3>Form Validation</h3>
<p>Try to submit the form.</p>

<form action="/action_page.php" class="was-


validated">
<div class="mb-3 mt-3">
<label for="uname"
class="form-label">Username:</label>
<input type="text" class="form-control" id="uname"
placeholder="Enter username" name="uname" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this
field.</div>
</div>
<div class="mb-3">
<label for="pwd"
class="form-label">Password:</label>
<input type="password" class="form-control"
id="pwd" placeholder="Enter password" name="pswd"
required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this
field.</div>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox"
id="myCheck" name="remember" required>
<label class="form-check-label" for="myCheck">I
agree on blabla. </label>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Check this checkbox to
continue.</div>
</div>
<button type="submit" class="btn btn-
primary">Submit</button>
</form>
</div>

</body>
</html>

You might also like