bootstrap/site/content/docs/5.3/examples/cover/index.html

---
layout: examples
title: Cover Template
extra_css:
  - "cover.css"
html_class: "h-100"
body_class: "d-flex h-100 text-center text-bg-dark"
---

<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
  <header class="mb-auto">
    <div>
      <h3 class="float-md-start mb-0">Cover</h3>
      <nav class="nav nav-masthead justify-content-center float-md-end">
        <a class="nav-link fw-bold py-1 px-0 active" aria-current="page" href="#">Home</a>
        <a class="nav-link fw-bold py-1 px-0" href="#">Features</a>
        <a class="nav-link fw-bold py-1 px-0" href="#">Contact</a>
      </nav>
    </div>
  </header>

  <main class="px-3">
    <h1>Cover your page.</h1>
    <p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p>
    <p class="lead">
      <a href="#" class="btn btn-lg btn-light fw-bold border-white bg-white">Learn more</a>
    </p>
  </main>

  <footer class="mt-auto text-white-50">
    <p>Cover template for <a href="https://getbootstrap.com/" class="text-white">Bootstrap</a>, by <a href="https://x.com/mdo" class="text-white">@mdo</a>.</p>
  </footer>
</div>
Add an examples layout. Reduces duplication and makes maintenance easier. 2018-11-05 19:24:55 +08:00			`---`
			`layout: examples`
			`title: Cover Template`
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)! 2019-01-09 00:33:28 +08:00			`extra_css:`
			`- "cover.css"`
Simplify code for 'cover' example by using utility classes. (#28986) 2019-07-22 22:02:03 +08:00			`html_class: "h-100"`
Docs: quick fixes for HTML (#36395) * Using the new helper in the doc * Remove input from `Tab` access * Change scrollspy code examples * Reordering tables for JS * Fix for parcel file * Center align all the code example texts in layout * Alphabetical reorder the helpers 2022-05-21 01:21:48 +08:00			`body_class: "d-flex h-100 text-center text-bg-dark"`
Add an examples layout. Reduces duplication and makes maintenance easier. 2018-11-05 19:24:55 +08:00			`---`

			`<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">`
Simplify code for 'cover' example by using utility classes. (#28986) 2019-07-22 22:02:03 +08:00			`<header class="mb-auto">`
			`<div>`
docs(examples): new cheatsheet and RTL examples 2020-06-09 21:44:20 +08:00			`<h3 class="float-md-start mb-0">Cover</h3>`
			`<nav class="nav nav-masthead justify-content-center float-md-end">`
Docs: replace CSS by utilities in examples (#35699) * Drop .opacity-50 and .opacity-75 redefinition in examples * Drop unused .card-img-right from blog example CSS files * Use line-height utilities when possible * Use rounded-* utilities in examples * Replace .nav-underline by .nav-scroller and use it in examples.html default * Use .mb-1 for .blog-post-title * Remove unused CSS rule and use .fw-* utilities for carousels examples * Use utilities for cheatsheet examples * Extract some CSS to utilities for .nav-masthead .nav-link in cover example * Dashboard group of minor modifications * Dropdowns example: refactoring * Dropdowns example refactoring: fix linting by removing selector by id * Features example refactoring * Headers example refactoring * List groups example refactoring * Sidebars example refactoring * Sign-in example refactoring * Starter template refactoring * Fix RTL examples Co-authored-by: Mark Otto <markd.otto@gmail.com> 2022-02-24 02:31:18 +08:00			`<a class="nav-link fw-bold py-1 px-0 active" aria-current="page" href="#">Home</a>`
			`<a class="nav-link fw-bold py-1 px-0" href="#">Features</a>`
			`<a class="nav-link fw-bold py-1 px-0" href="#">Contact</a>`
Add an examples layout. Reduces duplication and makes maintenance easier. 2018-11-05 19:24:55 +08:00			`</nav>`
Add new template, Cover 2013-12-08 15:23:41 +08:00			`</div>`
Add an examples layout. Reduces duplication and makes maintenance easier. 2018-11-05 19:24:55 +08:00			`</header>`

Remove Internet Explorer leftovers 2020-03-09 21:37:46 +08:00			`<main class="px-3">`
Simplify code for 'cover' example by using utility classes. (#28986) 2019-07-22 22:02:03 +08:00			`<h1>Cover your page.</h1>`
Add an examples layout. Reduces duplication and makes maintenance easier. 2018-11-05 19:24:55 +08:00			`<p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p>`
			`<p class="lead">`
Fix button hover color in cover example Replaced .btn-secondary class with .btn-light 2022-09-12 10:10:27 +08:00			`<a href="#" class="btn btn-lg btn-light fw-bold border-white bg-white">Learn more</a>`
Add an examples layout. Reduces duplication and makes maintenance easier. 2018-11-05 19:24:55 +08:00			`</p>`
			`</main>`

Simplify code for 'cover' example by using utility classes. (#28986) 2019-07-22 22:02:03 +08:00			`<footer class="mt-auto text-white-50">`
Docs: From Twitter to X (#40706) * From Twitter to X * . * Use Bootstrap Icons * Set X card to use `twitter` again * Update `tests/unit/popover.spec.js` --------- Co-authored-by: Julien Déramond <juderamond@gmail.com> 2025-04-03 13:47:45 +08:00			`<p>Cover template for <a href="https://getbootstrap.com/" class="text-white">Bootstrap</a>, by <a href="https://x.com/mdo" class="text-white">@mdo</a>.</p>`
Add an examples layout. Reduces duplication and makes maintenance easier. 2018-11-05 19:24:55 +08:00			`</footer>`
			`</div>`