Bootstrap Theme Starter

Bootstrap sink for theme testing

by Jesse Johnson

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#" target="_self" class="">UI KITS</a></li>
        <li class="breadcrumb-item active"><span aria-current="location">BOOTSTRAP</span></li>
      </ol>
      <h1 class="page-header"> Bootstrap <small>page header description goes here...</small></h1>
      <hr class="mb-4">
      <div id="alert" class="mb-5">
        <h4>Alerts</h4>
        <p> Wrap any text and an optional dismiss button in <code>.alert</code> and one of the four contextual classes for basic alert messages. Please read the <a href="https://bootstrap-vue.org/docs/components/alert" target="_blank">official Bootstrap Vue documentation</a> for the full list of options. </p>
        <div class="card">
          <!---->
          <!---->
          <div class="card-body">
            <!---->
            <!---->
            <div role="alert" aria-live="polite" aria-atomic="true" class="alert alert-dismissible alert-primary"><button type="button" aria-label="Close" class="close">×</button><strong>Primary!</strong> A simple primary alert check it out! </div>
            <div role="alert" aria-live="polite" aria-atomic="true" class="alert alert-dismissible alert-secondary"><button type="button" aria-label="Close" class="close">×</button><strong>Secondary Alert!</strong> This alert is not important, but it's beautiful. </div>
            <div role="alert" aria-live="polite" aria-atomic="true" class="alert alert-dismissible alert-success"><button type="button" aria-label="Close"...

CSS

@media (min-width: 768px) {
  body {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
}