index.css

body {
  padding: 2em;
}

.container {
  min-width: 115px;
}

[class*='col-'] {
  overflow: hidden;
}

p {
  white-space: nowrap;
}

.bigger {
  font-size: 2em;
  padding: 5px 10px;
  display: flex;
  justify-content: center;
}

.black-border {
  border: 2px solid black;
}

.no-padding {
  padding: 0;
}

.no-margin {
  margin: 0;
}

.skyblue-background {
  background-color: skyblue;
}

.yellow-background {
  background-color: yellow;
}

.green-background {
  background-color: green;
}

.tan-background {
  background-color: tan;
}

.maroon-background {
  background-color: maroon;
}

.purple-background {
  background-color: purple;
}

.salmon-background {
  background-color: salmon;
}

.sm-12,
.sm-6,
.xs-12,
.md-4,
.md-8,
.lg-2,
.lg-10,
.xl-1,
.xl-11 {
  display: none;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  [class*='xs-'] {
    display: block;
  }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
  [class*='sm-'] {
    display: block;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
  [class*='md-'] {
    display: block;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  [class*='lg-'] {
    display: block;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  [class*='xl-'] {
    display: block;
  }

  .bigger {
    font-size: 1.25em;
  }
}