Steps

Content Steps

Horizontal Steps

See the Pen Components – Steps: Horizontal by Working Solutions (@wsol) on CodePen.

The break point is set to 990px before the horizontal steps becomes vertical.  If you need it to break sooner, you can add a higher media query and paste the following styles for the btn-group class:

@media (max-width: 990px) {
      .btn-group {
        flex-direction: column;
      }
      .btn-group .btn {
          border-bottom-width: 0;
          margin-left: 0;
      }
      .btn-group .btn:after, .btn-group .btn:before {
        display: none;
      }
      .btn-group .btn.active:after, .btn-group .btn.active:before {
        display: inline-block;
      }
      .btn-group .btn.active:before {
          right: -11px;
          left: auto;
      }
      .btn-group .btn:first-child {
        border-top-left-radius: 8px !important;
        border-bottom-left-radius: 0px !important;
        border-top-right-radius: 8px !important;
        border-bottom-right-radius: 0px !important;
      }
      .btn-group .btn:last-child {
        border-top-left-radius: 0px !important;
        border-bottom-left-radius: 8px !important;
        border-top-right-radius: 0px !important;
        border-bottom-right-radius: 8px !important;
        border-bottom-width: 1px;
      }
}

Vertical Steps

Adding the class btn-group-vertical to the the class btn-group will cause the horizontal steps to be vertical.

See the Pen Components – Steps: Vertical with Content by Working Solutions (@wsol) on CodePen.

Progress Bar

Dot Navigation Steps

The class progress-function adds the functionality so that the links do not go anywhere but clicking the titles will change the progress.  The progress-function class can be removed to program your own functionality.

See the Pen Components – Steps: Horizontal by Working Solutions (@wsol) on CodePen.