Scribd
Upload
7 views2 pages

bootstrap

This document is an HTML template for a sample webpage using Bootstrap components. It includes a navigation bar, breadcrumb, jumbotron for welcoming users, and a grid layout with a contact form and an about section. The page is designed to be responsive and user-friendly, showcasing basic web design elements.

Uploaded by

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

bootstrap

This document is an HTML template for a sample webpage using Bootstrap components. It includes a navigation bar, breadcrumb, jumbotron for welcoming users, and a grid layout with a contact form and an about section. The page is designed to be responsive and user-friendly, showcasing basic web design elements.

Uploaded by

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

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Sample Page</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/
bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<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">
<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" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>

<!-- Breadcrumb -->


<nav aria-label="breadcrumb" class="container mt-3">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Sample Page</li>
</ol>
</nav>

<!-- Jumbotron -->


<div class="container mt-4">
<div class="p-5 mb-4 bg-light rounded-3">
<div class="container-fluid py-5">
<h1 class="display-5 fw-bold">Welcome to Our Website</h1>
<p class="col-md-8 fs-4">This is a sample page using various
Bootstrap components.</p>
<button class="btn btn-primary btn-lg" type="button">Learn
more</button>
</div>
</div>
</div>

<!-- Grid System and Form -->


<div class="container mt-4">
<div class="row">
<div class="col-md-6">
<h2>Contact Us</h2>
<form>
<div class="mb-3">
<label for="name" class="form-label">Name</label>
<input type="text" class="form-control" id="name" required>
</div>
<div class="mb-3">
<label for="email" class="form-control">Email</label>
<input type="email" class="form-control" id="email"
required>
</div>
<div class="mb-3">
<label for="message" class="form-label">Message</label>
<textarea class="form-control" id="message" rows="3"
required></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div class="col-md-6">
<h2>About Us</h2>
<p>This is a sample text about our company. You can replace this
with your own content.</p>
</div>
</div>
</div>

<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.m
in.js"></script>
</body>
</html>

You might also like