Override bootstrap font size-CodePudding

I am using Bootstrap v5.0.2 but I need to override the font size to some custom value.

In the html I am using <a href="#" >Click</a> This gives me some predefined button sizes. In my main .css file I have:

body{font-size: 22px;}
h1{font-size: 24px;}

I want to match the button font size to the the page font size.

What is the best way to override the font size of the button?

CodePudding user response：

I would add a class in your main css file . For Example

.pageButtonSize {  font-size: 22px !important; }

and then add the class to your button markup.

<a href="#" >Click</a>

CodePudding user response：

you can create your own file.css containing all styles you want to override

then, add this file to your project after bootstrap is added

Note: to make sure your styles will be applied, consider adding !important for each style for example:

h1{
  font-size: 50px !important;
  }