<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
  <div class="carousel-item active">
  <img src="..." class="d-block w-100" alt="...">
  </div>
  <div class="carousel-item">
  <img src="..." class="d-block w-100" alt="...">
  </div>
  <div class="carousel-item">
  <img src="..." class="d-block w-100" alt="...">
  </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true"></span>
  <span class="visually-hidden">Next</span>
  </button>
  </div>

<h1>h1. Bootstrap heading</h1>
  <h2>h2. Bootstrap heading</h2>
  <h3>h3. Bootstrap heading</h3>
  <h4>h4. Bootstrap heading</h4>
  <h5>h5. Bootstrap heading</h5>
  <h6>h6. Bootstrap heading</h6>
  

<div class="container">
  <div class="row">
  <div class="col">
  Column
  </div>
  <div class="col">
  Column
  </div>
  <div class="col">
  Column
  </div>
  </div>
  </div>

<p><abbr title="attribute">attr</abbr></p>
  <p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
  <li class="breadcrumb-item active" aria-current="page">Home</li>
  </ol>
  </nav>
   
  <nav aria-label="breadcrumb">
  <ol class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">Home</a></li>
  <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
  </nav>
   
  <nav aria-label="breadcrumb">
  <ol class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">Home</a></li>
  <li class="breadcrumb-item"><a href="#">Library</a></li>
  <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
  </nav>

<blockquote class="blockquote">
  <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>

<button type="button" class="btn btn-primary">Primary</button>
  <button type="button" class="btn btn-secondary">Secondary</button>
  <button type="button" class="btn btn-success">Success</button>
  <button type="button" class="btn btn-danger">Danger</button>
  <button type="button" class="btn btn-warning">Warning</button>
  <button type="button" class="btn btn-info">Info</button>
  <button type="button" class="btn btn-light">Light</button>
  <button type="button" class="btn btn-dark">Dark</button>
   
  <button type="button" class="btn btn-link">Link</button>

<div class="row">
  <div class="col-sm-6">
  <div class="card">
  <div class="card-body">
  <h5 class="card-title">Special title treatment</h5>
  <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  </div>
  </div>
  <div class="col-sm-6">
  <div class="card">
  <div class="card-body">
  <h5 class="card-title">Special title treatment</h5>
  <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  </div>
  </div>
  </div>

<!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
  </button>
   
  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
  <div class="modal-content">
  <div class="modal-header">
  <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  </div>
  <div class="modal-body">
  ...
  </div>
  <div class="modal-footer">
  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
  <button type="button" class="btn btn-primary">Save changes</button>
  </div>
  </div>
  </div>
  </div>
  

<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <div class="progress">
  <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <div class="progress">
  <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <div class="progress">
  <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
  </div>

<div class="mb-3">
  <label for="exampleFormControlInput1" class="form-label">Email address</label>
  <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
  </div>
  <div class="mb-3">
  <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
  <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>

<form class="row g-3 needs-validation" novalidate>
  <div class="col-md-4">
  <label for="validationCustom01" class="form-label">First name</label>
  <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
  <div class="valid-feedback">
  Looks good!
  </div>
  </div>
  <div class="col-md-4">
  <label for="validationCustom02" class="form-label">Last name</label>
  <input type="text" class="form-control" id="validationCustom02" value="Otto" required>
  <div class="valid-feedback">
  Looks good!
  </div>
  </div>
  <div class="col-md-4">
  <label for="validationCustomUsername" class="form-label">Username</label>
  <div class="input-group has-validation">
  <span class="input-group-text" id="inputGroupPrepend">@</span>
  <input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
  <div class="invalid-feedback">
  Please choose a username.
  </div>
  </div>
  </div>
  <div class="col-md-6">
  <label for="validationCustom03" class="form-label">City</label>
  <input type="text" class="form-control" id="validationCustom03" required>
  <div class="invalid-feedback">
  Please provide a valid city.
  </div>
  </div>
  <div class="col-md-3">
  <label for="validationCustom04" class="form-label">State</label>
  <select class="form-select" id="validationCustom04" required>
  <option selected disabled value="">Choose...</option>
  <option>...</option>
  </select>
  <div class="invalid-feedback">
  Please select a valid state.
  </div>
  </div>
  <div class="col-md-3">
  <label for="validationCustom05" class="form-label">Zip</label>
  <input type="text" class="form-control" id="validationCustom05" required>
  <div class="invalid-feedback">
  Please provide a valid zip.
  </div>
  </div>
  <div class="col-12">
  <div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
  <label class="form-check-label" for="invalidCheck">
  Agree to terms and conditions
  </label>
  <div class="invalid-feedback">
  You must agree before submitting.
  </div>
  </div>
  </div>
  <div class="col-12">
  <button class="btn btn-primary" type="submit">Submit form</button>
  </div>
  </form>