Typography
Lists
Example 22
<!doctype html>
<html lang="en">
<head>
<title>Lists</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-2">
<h1 class="display-1">Lists</h1>
<h2>Unstyled List</h2>
<ul class="list-unstyled">
<li><a href="#">Twitter</a></li>
<li><a href="#">LinkedIn</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">YouTube</a></li>
</ul>
<h2>Unstyled List Checkbox</h2>
<ul class="list-unstyled">
<li><label>Option 1</label> <input type="checkbox"></li>
<li><label>Option 2</label> <input type="checkbox"></li>
<li><label>Option 3</label> <input type="checkbox"></li>
<li><label>Option 4</label> <input type="checkbox"></li>
</ul>
<h2>Inline List</h2>
<ul class="list-inline">
<li class="list-inline-item"><a href="#">Home</a></li>
<li class="list-inline-item"><a href="#">Services</a></li>
<li class="list-inline-item"><a href="#">About</a></li>
<li class="list-inline-item"><a href="#">Help</a></li>
</ul>
<h2>Normal</h2>
<ul>
<li>Eggs</li>
<li>Milk</li>
<li>Bread</li>
<li>Cheese</li>
</ul>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
</body></html>Responsive Layout
Bootstrap Containers
Example 34
<!doctype html>
<html lang="en">
<head>
<title>Bootstrap Container</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Bootstrap Container</h1>
<p>The div below has container, and border classes attached.</p>
<div class="container border">100% wide until small breakpoint</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Bootstrap containers with breakpoints
Example 35
<!doctype html>
<html lang="en">
<head>
<title>Bootstrap Container with breakpoint</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Bootstrap Container with breakpoint</h1>
<p>The div below has container, and border classes attached.</p>
<div class="container border">100% wide until small breakpoint</div>
<div class="container-sm border">100% wide until small breakpoint</div>
<div class="container-md border">100% wide until medium breakpoint</div>
<div class="container-lg border">100% wide until large breakpoint</div>
<div class="container-xl border">100% wide until extra large breakpoint</div>
<div class="container-xxl border">100% wide until extra extra large breakpoint</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>