<div class="row">
  <div class="col-12">
    <app-heading></app-heading>
    <app-breadcrumb></app-breadcrumb>
    <div class="separator mb-5"></div>
  </div>
</div>
<div class="row">
  <div class="col-12">

    <div class="card mb-4">
      <div class="card-body">
        <h5 class="mb-4">{{'modal.template' | translate}}</h5>
        <app-modal-template></app-modal-template>
      </div>
    </div>

    <div class="card mb-4">
      <div class="card-body">
        <h5 class="mb-4">{{'modal.component' | translate}}</h5>
        <app-modal-component></app-modal-component>
      </div>
    </div>

    <div class="card mb-4">
      <div class="card-body">
        <h5 class="mb-4">{{'modal.nested' | translate}}</h5>
        <app-modal-nested></app-modal-nested>
      </div>
    </div>

    <div class="card mb-4">
      <div class="card-body">
        <h5 class="mb-4">{{'modal.scrolling-long-content' | translate}}</h5>
        <app-modal-long-content></app-modal-long-content>
      </div>
    </div>

    <div class="card mb-4">
      <div class="card-body">
        <h5 class="mb-4">{{'modal.events' | translate}}</h5>
        <app-modal-events></app-modal-events>
      </div>
    </div>

    <div class="card mb-4">
      <div class="card-body">
        <h5 class="mb-4">{{'modal.confirm' | translate}}</h5>
        <app-modal-confirm></app-modal-confirm>
      </div>
    </div>

    <div class="card mb-4">
      <div class="card-body">
        <h5 class="mb-4">{{'modal.animation' | translate}}</h5>
        <app-modal-animation></app-modal-animation>
      </div>
    </div>

    <div class="card mb-4">
      <div class="card-body">
        <h5 class="mb-4">{{'modal.esc' | translate}}</h5>
        <app-modal-esc></app-modal-esc>
      </div>
    </div>

    <div class="card mb-4">
      <div class="card-body">
        <h5 class="mb-4">{{'modal.popover-tooltip' | translate}}</h5>
        <app-modal-popover-tooltip></app-modal-popover-tooltip>
      </div>
    </div>

    <div class="card mb-4">
      <div class="card-body">
        <h5 class="mb-4">{{'modal.backdrop' | translate}}</h5>
        <app-modal-backdrop></app-modal-backdrop>
      </div>
    </div>

    <div class="card mb-4">
      <div class="card-body">
        <h5 class="mb-4">{{'modal.change-class' | translate}}</h5>
        <app-modal-change-class></app-modal-change-class>
      </div>
    </div>

    <div class="card mb-4">
      <div class="card-body">
        <h5 class="mb-4">{{'modal.custom-css' | translate}}</h5>
        <app-modal-custom-css></app-modal-custom-css>
      </div>
    </div>

    <div class="card mb-4">
      <div class="card-body">
        <h5 class="mb-4">{{'modal.directive' | translate}}</h5>
        <app-modal-directive></app-modal-directive>
      </div>
    </div>

    <div class="card mb-4">
      <div class="card-body">
        <h5 class="mb-4">{{'modal.size' | translate}}</h5>
        <app-modal-sizes></app-modal-sizes>
      </div>
    </div>

    <div class="card mb-4">
      <div class="card-body">
        <h5 class="mb-4">{{'modal.view-child' | translate}}</h5>
        <app-modal-child></app-modal-child>
      </div>
    </div>

  </div>
