<template>
  <div>
    <div class="p-5 mb-4 bg-light rounded-3">
      <div class="container-fluid py-5">
        <h1 class="display-5 fw-bold">
          Fluid jumbotron
        </h1>
        <p class="col-md-8 fs-4">
          This is a modified jumbotron that occupies the entire horizontal space of its parent.
        </p>
      </div>
    </div>
    <div class="row">
      <div class="col-12 col-md-8">
        <div class="p-5 mb-4 bg-light rounded-3">
          <div class="container-fluid py-5">
            <h1 class="display-5 fw-bold">
              Hello, world!
            </h1>
            <p class="col-md-8 fs-4">
              This is a simple hero unit, a simple Jumbotron-style
              component for calling extra attention to featured content or information.
            </p>
            <hr class="my-2">
            <p>
              It uses utility classes for typography and spacing to space
              content out within the larger container.
            </p>
            <p class="lead">
              <button class="btn btn-primary">
                Learn More
              </button>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
</script>
