Can I use a Bootstrap class as a variable in a custom CSS rule?-CodePudding

To make my website responsive, I was going to use media queries to change the text size, etc. The problem is that I use bootstrap to set the sizes for the text. I was wondering if there was a way to use the classes from the bootstrap in my CSS file.

For example, something like:

.test {
    font-size: display-5; /* display-5 is a bootstrap defined size */
}

I originally thought I could do this using an @import rule but it didn't work.

How would I go about doing this?

CodePudding user response：

What i would do, is instead of relying on bootstrap, i would just do manual media queries instead like below

<div>
  <p >Your text here</p>
</div>

with the css being

@media screen and (max-width: 600px) {
  .fontSizeClass {
    font-size: 30px;
  }
}

@media screen and (min-width: 601px) {
  .fontSizeClass {
    font-size: 80px;
  }
}

bootstrap has sizes listed here:

  sm `min-width > 576;`
  md `min-width > 768;`
  lg `min-width > 992;`
  xl `min-width > 1200`
 xxl `min-width > 1400`