Scribd
Upload
21 views8 pages

HTML Lang Enhead

Uploaded by

Shravani Saste
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
21 views8 pages

HTML Lang Enhead

Uploaded by

Shravani Saste
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/ 8

<html lang="en"><head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap
contributors">
<meta name="generator" content="Hugo 0.84.0">
<title>Headers · Bootstrap v5.0</title>

<link rel="canonical"
href="https://getbootstrap.com/docs/5.0/examples/headers/">

<!-- Bootstrap core CSS -->


<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">

<!-- Favicons -->


<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-
icon.png" sizes="180x180">
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-32x32.png"
sizes="32x32" type="image/png">
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-16x16.png"
sizes="16x16" type="image/png">
<link rel="manifest" href="/docs/5.0/assets/img/favicons/manifest.json">
<link rel="mask-icon" href="/docs/5.0/assets/img/favicons/safari-pinned-tab.svg"
color="#7952b3">
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">

<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}

@media (min-width: 768px) {


.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>

<!-- Custom styles for this template -->


<link href="headers.css" rel="stylesheet">
</head>
<body>

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">


<symbol id="bootstrap" viewBox="0 0 118 94">
<title>Bootstrap</title>
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715
5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0
44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066
20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-
12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-
5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-
20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543
72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-
4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521
28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-
9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-
3.903-8.178-11.425-8.178H49.948z"></path>
</symbol>
<symbol id="home" viewBox="0 0 16 16">
<path d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0
0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0
0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5
14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0
0-.5.5v4H2.5z"></path>
</symbol>
<symbol id="speedometer2" viewBox="0 0 16 16">
<path d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732
5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1
0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5
0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0
0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0
0-.029-.518z"></path>
<path fill-rule="evenodd" d="M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845
1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-
2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603
9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532
4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z"></path>
</symbol>
<symbol id="table" viewBox="0 0 16 16">
<path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-
2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5
0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4
4H6v3h4V8z"></path>
</symbol>
<symbol id="people-circle" viewBox="0 0 16 16">
<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"></path>
<path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-
5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8
1z"></path>
</symbol>
<symbol id="grid" viewBox="0 0 16 16">
<path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5
7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0
0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15
2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5
0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5
9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-
3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0
0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5
1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0
0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"></path>
</symbol>
</svg>

<main>
<h1 class="visually-hidden">Headers examples</h1>

<div class="container">
<header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-
bottom">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-
dark text-decoration-none">
<svg class="bi me-2" width="40" height="32"><use
xlink:href="#bootstrap"></use></svg>
<span class="fs-4">Simple header</span>
</a>

<ul class="nav nav-pills">


<li class="nav-item"><a href="#" class="nav-link active" aria-
current="page">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link">Features</a></li>
<li class="nav-item"><a href="#" class="nav-link">Pricing</a></li>
<li class="nav-item"><a href="#" class="nav-link">FAQs</a></li>
<li class="nav-item"><a href="#" class="nav-link">About</a></li>
</ul>
</header>
</div>

<div class="b-example-divider"></div>

<div class="container">
<header class="d-flex justify-content-center py-3">
<ul class="nav nav-pills">
<li class="nav-item"><a href="#" class="nav-link active" aria-
current="page">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link">Features</a></li>
<li class="nav-item"><a href="#" class="nav-link">Pricing</a></li>
<li class="nav-item"><a href="#" class="nav-link">FAQs</a></li>
<li class="nav-item"><a href="#" class="nav-link">About</a></li>
</ul>
</header>
</div>

<div class="b-example-divider"></div>

<div class="container">
<header class="d-flex flex-wrap align-items-center justify-content-center
justify-content-md-between py-3 mb-4 border-bottom">
<a href="/" class="d-flex align-items-center col-md-3 mb-2 mb-md-0 text-dark
text-decoration-none">
<svg class="bi me-2" width="40" height="32" role="img" aria-
label="Bootstrap"><use xlink:href="#bootstrap"></use></svg>
</a>

<ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">


<li><a href="#" class="nav-link px-2 link-secondary">Home</a></li>
<li><a href="#" class="nav-link px-2 link-dark">Features</a></li>
<li><a href="#" class="nav-link px-2 link-dark">Pricing</a></li>
<li><a href="#" class="nav-link px-2 link-dark">FAQs</a></li>
<li><a href="#" class="nav-link px-2 link-dark">About</a></li>
</ul>

<div class="col-md-3 text-end">


<button type="button" class="btn btn-outline-primary me-2">Login</button>
<button type="button" class="btn btn-primary">Sign-up</button>
</div>
</header>
</div>

<div class="b-example-divider"></div>

<header class="p-3 bg-dark text-white">


<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center
justify-content-lg-start">
<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-
decoration-none">
<svg class="bi me-2" width="40" height="32" role="img" aria-
label="Bootstrap"><use xlink:href="#bootstrap"></use></svg>
</a>

<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center


mb-md-0">
<li><a href="#" class="nav-link px-2 text-secondary">Home</a></li>
<li><a href="#" class="nav-link px-2 text-white">Features</a></li>
<li><a href="#" class="nav-link px-2 text-white">Pricing</a></li>
<li><a href="#" class="nav-link px-2 text-white">FAQs</a></li>
<li><a href="#" class="nav-link px-2 text-white">About</a></li>
</ul>

<form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3">


<input type="search" class="form-control form-control-dark"
placeholder="Search..." aria-label="Search">
</form>

<div class="text-end">
<button type="button" class="btn btn-outline-light me-2">Login</button>
<button type="button" class="btn btn-warning">Sign-up</button>
</div>
</div>
</div>
</header>

<div class="b-example-divider"></div>

<header class="p-3 mb-3 border-bottom">


<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center
justify-content-lg-start">
<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-dark text-
decoration-none">
<svg class="bi me-2" width="40" height="32" role="img" aria-
label="Bootstrap"><use xlink:href="#bootstrap"></use></svg>
</a>

<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center


mb-md-0">
<li><a href="#" class="nav-link px-2 link-secondary">Overview</a></li>
<li><a href="#" class="nav-link px-2 link-dark">Inventory</a></li>
<li><a href="#" class="nav-link px-2 link-dark">Customers</a></li>
<li><a href="#" class="nav-link px-2 link-dark">Products</a></li>
</ul>
<form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3">
<input type="search" class="form-control" placeholder="Search..." aria-
label="Search">
</form>

<div class="dropdown text-end">


<a href="#" class="d-block link-dark text-decoration-none dropdown-
toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
<img src="https://github.com/mdo.png" alt="mdo" width="32" height="32"
class="rounded-circle">
</a>
<ul class="dropdown-menu text-small" aria-labelledby="dropdownUser1">
<li><a class="dropdown-item" href="#">New project...</a></li>
<li><a class="dropdown-item" href="#">Settings</a></li>
<li><a class="dropdown-item" href="#">Profile</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Sign out</a></li>
</ul>
</div>
</div>
</div>
</header>

<div class="b-example-divider"></div>

<header class="py-3 mb-3 border-bottom">


<div class="container-fluid d-grid gap-3 align-items-center" style="grid-
template-columns: 1fr 2fr;">
<div class="dropdown">
<a href="#" class="d-flex align-items-center col-lg-4 mb-2 mb-lg-0 link-
dark text-decoration-none dropdown-toggle" id="dropdownNavLink" data-bs-
toggle="dropdown" aria-expanded="false">
<svg class="bi me-2" width="40" height="32"><use
xlink:href="#bootstrap"></use></svg>
</a>
<ul class="dropdown-menu text-small shadow" aria-
labelledby="dropdownNavLink">
<li><a class="dropdown-item active" href="#" aria-
current="page">Overview</a></li>
<li><a class="dropdown-item" href="#">Inventory</a></li>
<li><a class="dropdown-item" href="#">Customers</a></li>
<li><a class="dropdown-item" href="#">Products</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Reports</a></li>
<li><a class="dropdown-item" href="#">Analytics</a></li>
</ul>
</div>

<div class="d-flex align-items-center">


<form class="w-100 me-3">
<input type="search" class="form-control" placeholder="Search..." aria-
label="Search">
</form>

<div class="flex-shrink-0 dropdown">


<a href="#" class="d-block link-dark text-decoration-none dropdown-
toggle" id="dropdownUser2" data-bs-toggle="dropdown" aria-expanded="false">
<img src="https://github.com/mdo.png" alt="mdo" width="32" height="32"
class="rounded-circle">
</a>
<ul class="dropdown-menu text-small shadow" aria-
labelledby="dropdownUser2">
<li><a class="dropdown-item" href="#">New project...</a></li>
<li><a class="dropdown-item" href="#">Settings</a></li>
<li><a class="dropdown-item" href="#">Profile</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Sign out</a></li>
</ul>
</div>
</div>
</div>
</header>

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


<div class="d-grid gap-3" style="grid-template-columns: 1fr 2fr;">
<div class="bg-light border rounded-3">
<br><br><br><br><br><br><br><br><br><br>
</div>
<div class="bg-light border rounded-3">
<br><br><br><br><br><br><br><br><br><br>
</div>
</div>
</div>

<div class="b-example-divider"></div>

<nav class="py-2 bg-light border-bottom">


<div class="container d-flex flex-wrap">
<ul class="nav me-auto">
<li class="nav-item"><a href="#" class="nav-link link-dark px-2 active"
aria-current="page">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link link-dark px-
2">Features</a></li>
<li class="nav-item"><a href="#" class="nav-link link-dark
px-2">Pricing</a></li>
<li class="nav-item"><a href="#" class="nav-link link-dark
px-2">FAQs</a></li>
<li class="nav-item"><a href="#" class="nav-link link-dark
px-2">About</a></li>
</ul>
<ul class="nav">
<li class="nav-item"><a href="#" class="nav-link link-dark
px-2">Login</a></li>
<li class="nav-item"><a href="#" class="nav-link link-dark px-2">Sign
up</a></li>
</ul>
</div>
</nav>
<header class="py-3 mb-4 border-bottom">
<div class="container d-flex flex-wrap justify-content-center">
<a href="/" class="d-flex align-items-center mb-3 mb-lg-0 me-lg-auto text-
dark text-decoration-none">
<svg class="bi me-2" width="40" height="32"><use
xlink:href="#bootstrap"></use></svg>
<span class="fs-4">Double header</span>
</a>
<form class="col-12 col-lg-auto mb-3 mb-lg-0">
<input type="search" class="form-control" placeholder="Search..." aria-
label="Search">
</form>
</div>
</header>

<div class="b-example-divider"></div>

<header>
<div class="px-3 py-2 bg-dark text-white">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center
justify-content-lg-start">
<a href="/" class="d-flex align-items-center my-2 my-lg-0 me-lg-auto
text-white text-decoration-none">
<svg class="bi me-2" width="40" height="32" role="img" aria-
label="Bootstrap"><use xlink:href="#bootstrap"></use></svg>
</a>

<ul class="nav col-12 col-lg-auto my-2 justify-content-center my-md-0


text-small">
<li>
<a href="#" class="nav-link text-secondary">
<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use
xlink:href="#home"></use></svg>
Home
</a>
</li>
<li>
<a href="#" class="nav-link text-white">
<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use
xlink:href="#speedometer2"></use></svg>
Dashboard
</a>
</li>
<li>
<a href="#" class="nav-link text-white">
<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use
xlink:href="#table"></use></svg>
Orders
</a>
</li>
<li>
<a href="#" class="nav-link text-white">
<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use
xlink:href="#grid"></use></svg>
Products
</a>
</li>
<li>
<a href="#" class="nav-link text-white">
<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use
xlink:href="#people-circle"></use></svg>
Customers
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="px-3 py-2 border-bottom mb-3">
<div class="container d-flex flex-wrap justify-content-center">
<form class="col-12 col-lg-auto mb-2 mb-lg-0 me-lg-auto">
<input type="search" class="form-control" placeholder="Search..." aria-
label="Search">
</form>

<div class="text-end">
<button type="button" class="btn btn-light text-dark me-2">Login</button>
<button type="button" class="btn btn-primary">Sign-up</button>
</div>
</div>
</div>
</header>

<div class="b-example-divider"></div>
</main>

<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-


MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>

</body></html>

You might also like