How to define smaller class

Bootstrap Studio Help
1

Hi,
I would like to defined some smaller classes, which should be small than default small, but responsive and etc. I have lot of information in my webapp, which is not important, but should be showed.
My idea is to use scss compiler for definition smaller-1, smaller-2, smaller-3 classes, from main font size.
Could someone help me ?
Thanks

2

A visualization would help to propose solutions. From what you are saying it sounds like the sizes would between xs and small.

If that is the case I would start with breakpoints and then make adjustments to the grid where they fall.

3

Sorry, I dont understand english well.
What I mean is
there is normal font-size… From this size is derived class small (for ex 90% of normal size), and I would like to define smaller-1 (90% of small), smaller-2 (90% of smaller-1) and smaller-3 (90% of smaller-2). But I don’t know how to define this. I could - of course - define smaller-1 as font-size 10px, but it is the right way for responsivity? So I think, that I should define smaller-1 as ( 0.9* of something).
Thanks

4

Just create those classes and define the attributes you want in them.

p.smaller-1 {
font-size: .8em;
any other attributes you want to place here;
}

rinse and repeat using a smaller decimal number for the font size. Experiment till you get the size you want. Just assign those classes where you need them. If you want to keep the need for assigning at a lower level, apply the class to the div/container/column/etc. that the text elements are inside of and it will automatically apply the class to any P elements inside of it. You can use that for any element, not just P elements. You just use the .smaller-1 class in the CSS or SCSS.

EDIT: Meant to type ‘em’ not ‘rem’ for the font size, sorry for that confusion.

5

It’s okay. The guidance would be from Bootstrap Text. If the base font is 16px and everything is revolving around rem I would start backwards. With smaller being 10px I would add this to my scss or use @jo-r 's solution.

$smaller-1:                $font-size-base * .625;
$smaller-2:                $font-size-base * .5625;
$smaller-3:                $font-size-base * .50625;
6

Here’s also an article that shows how the Math can work for font sizes. It’s few years old, but I suspect the base of it is probably still true.

7

Good catch @apowell656 , I was looking for that, but found the other one instead lol.

8

Thanks, this seemslike what I think.
But, where I should write this ? I have created new scss in BSS, but it says bad variables (and other errors, as I’m changing this code a little.
Undefined operation :
.smaller-1{
font-size : var(font-size-base) * 0.625;
}

9

@iqsolutions it should be:

$font-size-base: 16px;
.smaller-1{
font-size : $font-size-base * 0.625;
}
10

Thanks, but I think, that this line I could take from bootstrap directly?
So:
.smaller-1 {
font-size : <get_default_font_size_ib_bs> * 0.625;
}

Your way, I can directly define text-size by myself hardcoded in css.

11

I am not sure if I understand your question, but I will try and answer it based on two options: customizing Bootstrap and adding custom code to your design.

  • If you are customizing BS you would have to add the custom CSS, compile the file and import it into BSS.
  • If you are adding the custom code to your design in BSS, you would have to define the font variable so it compiles.The reason you are getting the error is because the variable is not defined.

The correction to the CSS assumes the font-size-base is 16px and that you have not changed it.

1 Like
12

If you want the font-size to be responsive you do that with media query only one class is needed
bigger font-size on small devices
like this

//HTML
<p class="smaller">I'm responsive</p>

//CSS
.smaller {
  font-size: medium;
}

@media (min-width: 576px) {
  .smaller {
    font-size: small;
  }
}

@media (min-width: 768px) {
  .smaller {
    font-size: smaller;
  }
}

@media (min-width: 992px) {
  .smaller {
    font-size: x-small;
  }
}

@media (min-width: 1200px) {
  .smaller {
    font-size: xx-small;
  }
}
13

You can use the clamp function too to get the font size to be responsive
like this

h1 {
  letter-spacing: 2px;
  font-size: clamp(1.1rem, 2.5vw, 4rem);
}

p {
  line-height: 1.5;
  font-size: clamp(0.8rem, 1.8vw, 2rem);
}