<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>

Простая таблица

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Разделенные "полосами" ряды

<table class="table table-striped">
  ...
</table>

Ряды с :hover (отзывчивость при наведении)

<table class="table table-hover">
  ...
</table>

Таблицы с границами

<table class="table table-bordered">
  ...
</table>

Адаптивные таблицы

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

<div id="accordionExample" class="accordion">
<div class="card">
<div id="headingOne" class="card-header">
<h2 class="mb-0"><button type="button" class="btn btn-link btn-block text-left" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Сворачиваемый групповой элемент #1 </button></h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">Некоторый заполнитель для первой панели аккордеона. Эта панель отображается по умолчанию благодаря классу <code>.show</code>.</div>
</div>
</div>
<div class="card">
<div id="headingTwo" class="card-header">
<h2 class="mb-0"><button type="button" class="btn btn-link btn-block text-left collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Сворачиваемый групповой элемент #2 </button></h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">Некоторый заполнитель для второй панели аккордеона. По умолчанию эта панель скрыта.</div>
</div>
</div>
<div class="card">
<div id="headingThree" class="card-header">
<h2 class="mb-0"><button type="button" class="btn btn-link btn-block text-left collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Сворачиваемый групповой элемент #3 </button></h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">И, наконец, заполнитель для третьей и последней панели аккордеона. По умолчанию эта панель скрыта.</div>
</div>
</div>
</div>

<div class="alert alert-primary" role="alert">
  Это основное уведомление — check it out!
</div>
<div class="alert alert-secondary" role="alert">
  Это дополнительное уведомление — check it out!
</div>
<div class="alert alert-success" role="alert">
  Это уведомление об успехе — check it out!
</div>
<div class="alert alert-danger" role="alert">
  Это уведомление об опасности — check it out!
</div>
<div class="alert alert-warning" role="alert">
  Это уведомление-предупреждение — check it out!
</div>
<div class="alert alert-info" role="alert">
  Это инфо-уведомление — check it out!
</div>
<div class="alert alert-light" role="alert">
  Это светлое уведомление — check it out!
</div>
<div class="alert alert-dark" role="alert">
  Это темное уведомление — check it out!
</div>

<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>

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

Ссылка с атрибутом href Кнопка с атрибутом data-target

<p><a href="#collapseExample" class="btn btn-primary" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="collapseExample"> Ссылка с атрибутом href </a> <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> Кнопка с атрибутом data-target </button></p>
<div id="collapseExample" class="collapse">
<div class="card card-body">Некоторый заполнитель для компонента сворачивания. Эта панель по умолчанию скрыта, но открывается, когда пользователь активирует соответствующий триггер.</div>
</div>

Нажмите на эту кнопку

Вызов модального окна

<p><a class="btn btn btn-success " href="#" data-toggle="modal" data-target="#exampleModal2"> Вызов модального окна </a></p>
<div id="exampleModal2" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 id="staticBackdropLabel" class="modal-title">Modal title</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button></div>
<div class="modal-body">...</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="spinner-border text-primary" role="status">
  <span class="sr-only">Загрузка...</span>
</div>
<div class="spinner-border text-secondary" role="status">
  <span class="sr-only">Загрузка...</span>
</div>
<div class="spinner-border text-success" role="status">
  <span class="sr-only">Загрузка...</span>
</div>
<div class="spinner-border text-danger" role="status">
  <span class="sr-only">Загрузка...</span>
</div>
<div class="spinner-border text-warning" role="status">
  <span class="sr-only">Загрузка...</span>
</div>
<div class="spinner-border text-info" role="status">
  <span class="sr-only">Загрузка...</span>
</div>
<div class="spinner-border text-light" role="status">
  <span class="sr-only">Загрузка...</span>
</div>
<div class="spinner-border text-dark" role="status">
  <span class="sr-only">Загрузка...</span>
</div>