Bootstrap 4 Sticky Footer with Flexbox

A CSS only sticky footer option for Bootstrap 4 using only Flexbox - by Start Bootstrap

by DugSohn

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<body class="d-flex flex-vertical">
  <div class="bg-dark text-white-50 w-25 collapse width ox-scroll" id="sidrAlpha">
    <div class="container-fluid">
      <div class="row">
        <div class="col">
          <div class="row">
            <div class="col-10">
              <h3>
                Configure your Thing
              </h3>
            </div>
            <div class="col-2">

              <button class="close btn-secondary text-white btn" data-target="#sidrAlpha" data-toggle="collapse" aria-expanded="true">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
          </div>
          <form class="form-sm">
            <div class="form-group">
              <label for="exampleFormControlInput1">Email address</label>
              <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
            </div>
            <div class="form-group">
              <label for="exampleFormControlSelect1">Example select</label>
              <select class="form-control" id="exampleFormControlSelect1">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
              </select>
            </div>
            <div class="form-group">
              <label for="exampleFormControlSelect2">Example multiple select</label>
              <select multiple class="form-control" id="exampleFormControlSelect2">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
               ...

CSS

html,
body {
  height: 100%;
}

.ox-scroll {
  overflow-x: auto;
}

.collapse.show {
  visibility: visible;
}

.collapsing {
  visibility: visible;
  height: 0;
  -webkit-transition-property: height, visibility;
  transition-property: height, visibility;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.collapsing.width {
	transition: 1s;
	visibility: visible;
  -webkit-transition-property: width, visibility;
  transition-property: width, visibility;
  width: 0;
  height: 100%;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out slow;
}


/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
  .justify-content-center.container {
    margin-left: 0;
    margin-right: 0;
    max-width: none;
  }

  #panelAlpha.show {
    top: 0;
    right: -15px;
    position: absolute;
    z-index: 2000;
    height: 100%;
    max-width: 100%;
    width: 60% !important;
    box-shadow: -2px 0 5px #000;
  }

  #panelAlpha.show>.container-fluid {
    padding-right: 0;
    padding-left: 0;
  }


}