Managing Text Sizes Across Breakpoints

Bootstrap Studio Help
1

For the life of me I can not figure out how to create different font sizes for each breakpoint.

There has to be a straight-forward solution… please! :slight_smile:

2

If you need SPECIFIC font sizes at specific breakpoints, the simplest way is to create a custom CSS class, and then add media queries at the breakpoints. Here’s a simple example…

.hero-text {
  font-family: ‘Roboto’;
  font-size: 28px; 
  line-height: 1.3;
  font-weight: 700;
}

@media (min-width: 576px) {
.hero-text {
  font-size: 34px;
  }
}

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

@media (min-width: 992px) {
.hero-text {
  font-size: 42px;
  }
}

@media (min-width: 1200px) {
.hero-text {
font-size: 46px;
  }
}

@media (min-width: 1400px) {
.hero-text {
font-size: 50px;
  }
}

Now you would select your text element (typically a <p> paragraph) and then go to the panel with the Attributes > Class Names field and enter hero-text

Now you should see the font change size at each breakpoint according to the pixel size that was set in the CSS (XS = 28 pixels, SM = 34 pixels, MD = 38 pixels, LG = 42 pixels, XL = 46 pixels, XXL = 50 pixels)

If writing custom CSS seems “Greek” to you, then you’re going to have to familiarize yourself with how to use BSS’s Style Attribute tool in the top of the Appearance panel to add custom classes and breakpoints, or you can also select particular elements, set the font size via the Appearance Panel > Font Size (which will add an inline style) and then you’d go to the Styles panel, click the three vertical dots to the right of your inline style and extract the rules to a stylesheet, give the rules a class name, and then you can add Media Queries manually using the three dot dropdown menu.

I’m probably not explaining this very well because I don’t use the tools in BSS to extract rules or create CSS classes. It’s just quicker for me to write the code myself. I’d suggest watching some of their tutorial videos. I’m sure one of them covers how to create custom CSS classes and how to add media queries.

Learning CSS goes a LONG, LONG way to harnessing the power of building custom websites with BSS. If you don’t, you’re kinda stuck using the tools available in the Appearance or Options panel, or Bootstraps pre-made utility classes. Even though BSS is a visual editor, to truly leverage its capabilities, you really need to learn CSS.

3

You can use the css clamp function (more info here).

Using the same example @printninja did, you’ll have this one line rule:

.hero-text {
  font-family: ‘Roboto’;
  font-size: clamp(28px, 5vw, 50px); 
  line-height: 1.3;
  font-weight: 700;
}

tl;dr: one sets a minimum value (28px), a preferred value (5vw) and a maximum value (50px).

If you make a web search for “CSS Clamp generator” you’ll find useful tools.

1 Like
4

Clamp is another good method. The only caveat with clamp is that it produces a gradual change in text size between the two values. In some cases, depending on screen size or browser window width, it might cause text to jump to the next line when you don’t want it to. It also doesn’t allow you to have larger sizes in between the min and max, or the same size at more than one breakpoint. For example, you might want 28px at XS, 38 px at SM, 30px at MD and LG, and 40px at XL and XXL.

5

Yes, I agree, you have less control using clamp.

It would be nice to have some utility classes for text size directly in bootstrap, like the ones for padding (pb-sm-2) and margin (mt-lg-4).

Being able to add a class like tx-lg-6 would be great!

1 Like
6

Yes, I’ve often wished for that. I have my own set of CSS rules I use on most of my websites for different text classes, as well as responsive buttons.