<template>
  <div>
    <h1 class="h3 mb-1 text-gray-800">Border Utilities</h1>
    <p class="mb-4">
      Bootstrap's default utility classes can be found on the official
      <a href="https://getbootstrap.com/docs">Bootstrap Documentation</a> page.
      The custom utilities below were created to extend this theme past the
      default utility classes built into Bootstrap's framework.
    </p>

    <!-- Content Row -->
    <div class="row">
      <!-- Border Left Utilities -->
      <div class="col-lg-6">
        <div class="card mb-4 py-3 border-left-primary">
          <div class="card-body">.border-left-primary</div>
        </div>

        <div class="card mb-4 py-3 border-left-secondary">
          <div class="card-body">.border-left-secondary</div>
        </div>

        <div class="card mb-4 py-3 border-left-success">
          <div class="card-body">.border-left-success</div>
        </div>

        <div class="card mb-4 py-3 border-left-info">
          <div class="card-body">.border-left-info</div>
        </div>

        <div class="card mb-4 py-3 border-left-warning">
          <div class="card-body">.border-left-warning</div>
        </div>

        <div class="card mb-4 py-3 border-left-danger">
          <div class="card-body">.border-left-danger</div>
        </div>

        <div class="card mb-4 py-3 border-left-dark">
          <div class="card-body">.border-left-dark</div>
        </div>
      </div>

      <!-- Border Bottom Utilities -->
      <div class="col-lg-6">
        <div class="card mb-4 py-3 border-bottom-primary">
          <div class="card-body">.border-bottom-primary</div>
        </div>

        <div class="card mb-4 py-3 border-bottom-secondary">
          <div class="card-body">.border-bottom-secondary</div>
        </div>

        <div class="card mb-4 py-3 border-bottom-success">
          <div class="card-body">.border-bottom-success</div>
        </div>

        <div class="card mb-4 py-3 border-bottom-info">
          <div class="card-body">.border-bottom-info</div>
        </div>

        <div class="card mb-4 py-3 border-bottom-warning">
          <div class="card-body">.border-bottom-warning</div>
        </div>

        <div class="card mb-4 py-3 border-bottom-danger">
          <div class="card-body">.border-bottom-danger</div>
        </div>

        <div class="card mb-4 py-3 border-bottom-dark">
          <div class="card-body">.border-bottom-dark</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Borders",
};
</script>