$BS_SM_MIN_WIDTH: 768px;
$BS_MD_MIN_WIDTH: 992px;
$BS_LG_MIN_WIDTH: 1200px;

$BS_XS_MAX_WIDTH: 767px;
$BS_SM_MAX_WIDTH: 991px;
$BS_MD_MAX_WIDTH: 1199px;

//Panel Formatting
.panel > .panel-heading {
  @extend .bold;
  font-size: 16px;
}

.panel > .panel-heading.panel-heading-small {
  font-size: 14px;
}

.buffer-space {
  margin: 15px;
}

.panel .panel.sub-panel {
  margin: 20px;
}

// Utility Classes
.bold {
  font-weight: bold;
}

.italic {
  font-style: italic;
}

.normal {
  font-weight: normal;
}

@media (min-width: $BS_SM_MIN_WIDTH) {
  .pull-right-sm {
    float: right !important;
  }
}

@media (max-width: $BS_XS_MAX_WIDTH) {
  .pad-top-xs {
    padding-top: 5px;
  }
}

$BS_SM_MIN_WIDTH: 768px;
$BS_MD_MIN_WIDTH: 992px;
$BS_LG_MIN_WIDTH: 1200px;

$BS_XS_MAX_WIDTH: 767px;
$BS_SM_MAX_WIDTH: 991px;
$BS_MD_MAX_WIDTH: 1199px;

//Panel Formatting
.panel > .panel-heading {
  @extend .bold;
  font-size: 16px;
}

.panel > .panel-heading.panel-heading-small {
  font-size: 14px;
}

.buffer-space {
  margin: 15px;
}

.panel .panel.sub-panel {
  margin: 20px;
}

// Utility Classes
.bold {
  font-weight: bold;
}

.italic {
  font-style: italic;
}

.normal {
  font-weight: normal;
}

@media (min-width: $BS_SM_MIN_WIDTH) {
  .pull-right-sm {
    float: right !important;
  }
}

@media (max-width: $BS_XS_MAX_WIDTH) {
  .pad-top-xs {
    padding-top: 5px;
  }
}

@media (max-width: $BS_XS_MAX_WIDTH) {
  .text-center-xs {
    text-align: center;
  }
}

Create new 'text-center-xs' SCSS class
Create new 'text-center-xs' SCSS class

Details: Create new 'text-center-xs' SCSS class using a media query to only activate the styling for this class when bootstrap screen size is XS. When the styling is active for this class, the text alignment will be set to 'center'.
