<h1 class="text-white">Grayscale background color utility classes - Bootstrap 4</h1>
<section class="bg-white"></section>
<section class="bg-gray-1"></section>
<section class="bg-gray-2"></section>
<section class="bg-gray-3"></section>
<section class="bg-gray-4"></section>
<section class="bg-gray-5"></section>
<section class="bg-gray-6"></section>
<section class="bg-gray-7"></section>
<section class="bg-gray-8"></section>
<section class="bg-gray-9"></section>
<section class="bg-black"></section>
section {min-height:2rem;}
body {margin:2rem;background:#000;}
/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Background color utilties
*/
.bg-gray-1 {
  background-color: #f8f9fa!important;
}

.bg-gray-2 {
  background-color: #e9ecef!important;
}

.bg-gray-3 {
  background-color: #dee2e6!important;
}

.bg-gray-4 {
  background-color: #ced4da!important;
}

.bg-gray-5 {
  background-color: #adb5bd!important;
}

.bg-gray-6 {
  background-color: #868e96!important;
}

.bg-gray-7 {
  background-color: #495057!important;
}

.bg-gray-8 {
  background-color: #343a40!important;
}

.bg-gray-9 {
  background-color: #212529!important;
}

.bg-black {
  background-color: #000!important;
}

External CSS

  1. https://cdn.rawgit.com/JacobLett/bootstrap4-latest/504729ba/bootstrap-4-latest.min.css

External JavaScript

  1. https://code.jquery.com/jquery-3.2.1.slim.min.js
  2. https://cdn.rawgit.com/JacobLett/bootstrap4-latest/504729ba/bootstrap-4-latest.min.js