Scribd
Upload
5 views3 pages

bootstrap example (1)

The document is an HTML template for a website using Bootstrap 5. It includes a navigation bar, a jumbotron for welcoming users, a warning alert, a table displaying user information, a button, pagination, and an image. The structure is designed for a simple and responsive web layout.

Uploaded by

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

bootstrap example (1)

The document is an HTML template for a website using Bootstrap 5. It includes a navigation bar, a jumbotron for welcoming users, a warning alert, a table displaying user information, a button, pagination, and an image. The structure is designed for a simple and responsive web layout.

Uploaded by

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

10/24/24, 2:50 PM tmpeh6_jr5s.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Example</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]
alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<!-- Navigation Bar -->


<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="#">My Website</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-
bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown"
role="button" data-bs-toggle="dropdown" aria-expanded="false">

</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>

<!-- Jumbotron -->


<div class="jumbotron jumbotron-fluid bg-light text-center p-5">
<h1 class="display-4">Welcome to My Website</h1>
<p class="lead">This is a simple hero unit with Bootstrap styling.</p>
file:///C:/Users/My/AppData/Local/Temp/tmpeh6_jr5s.html 1/3
10/24/24, 2:50 PM tmpeh6_jr5s.html

<a href="https://getbootstrap.com/docs/4.0/components/buttons/" class="btn


btn-danger">Learn more</a>
</div>

<!-- Alert -->


<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Warning!</strong> This is a warning alert with a close button.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-
label="Close"></button>
</div>

<!-- Table -->


<div class="container my-5">
<table class="table table-bordered table-striped">
<thead class="table-dark">
<tr>
<th scope="col">s.no</th>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Phone</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>John Doe</td>
<td>[email protected]</td>
<td>(555) 555-5555</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jane Doe</td>
<td>[email protected]</td>
<td>(555) 555-5556</td>
</tr>
</tbody>
</table>
</div>

<!-- Button -->


<div class="text-center my-3">
<button type="button" class="btn btn-success">Click Me</button>
</div>

<!-- Pagination -->


<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-
disabled="true">Previous</a>
</li>
file:///C:/Users/My/AppData/Local/Temp/tmpeh6_jr5s.html 2/3
10/24/24, 2:50 PM tmpeh6_jr5s.html

<li class="page-item"><a class="page-link"


href="https://getbootstrap.com/docs/4.0/components/buttons/">1</a></li>
<li class="page-item"><a class="page-link"
href="https://getbootstrap.com/docs/4.0/components/breadcrumb/">2</a></li>
<li class="page-item"><a class="page-link"
href="https://getbootstrap.com/docs/4.0/components/dropdowns/">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>

<!-- Image -->


<div class="text-center my-">
<img src="C:\Users\My\Downloads\pexels-mihmanduganli-27922121.jpg" class="img-
thumbnail" alt="Responsive image">
</div>

<!-- Bootstrap JS and dependencies -->


<script src="https://cdn.jsdelivr.net/npm/[email protected]
alpha1/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>

file:///C:/Users/My/AppData/Local/Temp/tmpeh6_jr5s.html 3/3

You might also like