fonts settings in Bootstrap Studio

Bootstrap Studio Help
1

hello, I have built a site with BSS, it has numerous text used as headers, paragraphs etc. I want to globally change all H1 text to a font and paragraph to another font, will I have to click each font occurrence to set this or is there a faster way to do this?

2

Find the CSS that the tags are using and copy them to your custom CSS file. Now alter the fonts how you want them to be in those 2 CSS elements and that's it.

3

What if I want do to that once for all the (future) elements?
Where can I set promary, secondary,… colour and basic font?
thanks for help

4

You will find a section in the Appearance panel towards the bottom called Bootstrap Theme. Here you can change the theme colors, the background color, the base font size, font weight and font color. After you make all your changes to these variables, they will show up in the Styles as “inline” styles. You then click the three vertical dots and choose Extract Rules and choose the custom stylesheet where you want your new rules to reside (typically styles.css)

You can click on the body, look at the Styles panel and you’ll see the following

body {
  margin: 0;
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  font-weight: var(--bs-body-font-weight);
  line-height: var(--bs-body-line-height);
  color: var(--bs-body-color);
  text-align: var(--bs-body-text-align);
  background-color: var(--bs-body-bg);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

By clicking the three dots and copying all the body rules to your custom stylesheet, you can then open that stylesheet, click on each individual rule, and change things like the font family, the line height, and so on. And since these rules are applied to the body of the website, they will be applied to everything you add to your page.

You can also modify the attributes of other component/element in this manner… headings, links, img etc. Just click on the component, go to the Styles panel and copy the pertinent rules that govern the appearance of that component to your custom stylesheet, and then modify them as you desire.

To truly understand how styling works site-wide, you really need to learn how CSS works. CSS rules “cascade” so that child elements inherit the attributes (css rules) applied to parent elements. So if you change the font-family on body element, everything added to the body will inherit that chosen font family, but you can then also change the fonts of individual components on an element-by-element basis. You can also use IDs to give the different parts sections different styling.

To get the most out of Bootstrap Studio, it is worth spending some time learning the basics of CSS. I would recommend you read all the Bootstrap studio documentation, and this section in particular…

You can learn a lot about CSS for free here…

And of course there are tons of free tutorials on YouTube as well as paid courses in CSS in places like udemy and others.

1 Like