Notification

Component #1 

<!-- Cookie Alert -->
<div class="container position-fixed bottom-0 right-0 left-0 z-index-4">
  <div class="alert bg-white w-lg-80 border shadow-sm mx-auto" role="alert">
    <h5 class="text-dark">Cookie preferences</h5>
    <p class="small"><span class="font-weight-bold">Note!</span> This is just a simple popup modal to demonstrate how you can display a cookie message. This website uses the following types of cookies; strictly necessary, functional, visitor statistics and advertising cookies.</p>

    <div class="row align-items-sm-center">
      <div class="col-sm-8 mb-3 mb-sm-0">
        <div class="custom-control custom-checkbox custom-control-inline text-muted">
          <input type="checkbox" class="custom-control-input" id="defaultCheckbox" checked disabled>
          <label class="custom-control-label" for="defaultCheckbox">
            <small>Strictly necessary</small>
          </label>
        </div>

        <div class="custom-control custom-checkbox custom-control-inline text-muted">
          <input type="checkbox" class="custom-control-input" id="functionalCheckbox" checked>
          <label class="custom-control-label" for="functionalCheckbox">
            <small>Functional</small>
          </label>
        </div>

        <div class="custom-control custom-checkbox custom-control-inline text-muted">
          <input type="checkbox" class="custom-control-input" id="visitorStatisticsCheckbox">
          <label class="custom-control-label" for="visitorStatisticsCheckbox">
            <small>Visitor statistics</small>
          </label>
        </div>

        <div class="custom-control custom-checkbox custom-control-inline text-muted">
          <input type="checkbox" class="custom-control-input" id="advertisingCheckbox">
          <label class="custom-control-label" for="advertisingCheckbox">
            <small>Advertising</small>
          </label>
        </div>
      </div>

      <div class="col-sm-4 text-sm-right">
        <button type="button" class="btn btn-sm btn-primary transition-3d-hover" data-dismiss="alert" aria-label="Close">Got it!</button>
      </div>
    </div>
  </div>
</div>
<!-- End Cookie Alert -->
Copy