Pagesv5.x

Create a page from optional templates or fully customize your own page. Find links to the Bootstrap libraries on our Utilities page.

Bootstrap v5.x | Pages


Heading One

This is 'lead' text

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ut illum explicabo vero laboriosam corporis quod vel velit porro dolor laborum molestiae maiores, rerum, excepturi, repellat voluptatum amet. Aspernatur deserunt molestiae illum beatae quibusdam vitae et nulla laboriosam, blanditiis odit quis.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>This is an Empty Bootstrap Page</title>

<!-- Google font: Figtree -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap"
rel="stylesheet">

<!-- Favicon -->
<link rel="shortcut icon" type="image/jpg" href="">

<!-- jQuery UI CSS (useful but not required for Boostrap v5.x) -->

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
   integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

<!-- Local CSS -->
<link href="css/main.css" rel="stylesheet">
</head>
<body>

<!-- Simple Navbar (full) -->
<nav class='navbar navbar-expand-lg text-bg-light' data-bs-theme='light'>
   <div class='container-fluid'><a class='navbar-brand fs-3' href='#'><img class='img-fluid me-2'
            src='https://unsplash.it/50/50'>Navbar</a><button class='navbar-toggler' type='button'
         data-bs-toggle='collapse' data-bs-target='#navbar-90062659' aria-controls='navbarScroll' aria-expanded='false'
         aria-label='Toggle navigation'><span class='navbar-toggler-icon'></span></button>
      <div class='collapse navbar-collapse' id='navbar-90062659'>
         <ul class='navbar-nav ms-auto my-2 my-lg-0 navbar-nav-scroll'>
            <li class='nav-item'><a class='nav-link' href='#'>Link 1</a></li>
            <li class='nav-item'><a class='nav-link' href='#'>Link 2</a></li>
            <li class='nav-item'><a class='nav-link' href='#'>Link 3</a></li>
            <li class='nav-item dropdown'><a class='nav-link dropdown-toggle' href='#' role='button'
                  data-bs-toggle='dropdown' aria-expanded='false'>Link 1</a>
               <ul class='dropdown-menu dropdown-menu-end'>
                  <li><a class='dropdown-item' href='#'>Action</a></li>
                  <li><a class='dropdown-item' href='#'>Another action</a></li>
                  <li>
                     <hr class='dropdown-divider'>
                  </li>
                  <li><a class='dropdown-item' href='#'>Something else here</a></li>
               </ul>
            </li>
         </ul>
      </div>
   </div>
</nav>

<!-- wrapper div -->
<div class="container" id="wrapper">
   <h3 class="mt-4 mb-2">Heading One</h3>
   <p class="lead">This is 'lead' text</p>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ut illum explicabo vero laboriosam
   corporis quod vel velit porro dolor laborum molestiae maiores, rerum, excepturi, repellat
   voluptatum amet. Aspernatur deserunt molestiae illum beatae quibusdam vitae et nulla laboriosam,
   blanditiis odit quis.</p>
</div>

<!-- jquery (optional in BS v5.x) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"
   integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw=="
   crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<!-- jquery ui (optional in BS v5.x)-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"
   integrity="sha512-57oZ/vW8ANMjR/KQ6Be9v/+/h6bq9/l3f0Oc7vn6qMqyhvPd1cvKBRWWpzu0QoneImqr2SkmO4MSqU+RpHom3Q=="
   crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<!-- boostrap bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
   integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>

<!-- Local JS -->
<script src="js/main.js"></script>

</body>
</html>

This will reset the page. Are you sure?