CODEWITHSUNDEEP
csstwitter-bootstrapfont-size
pigfox
pigfox

Reputation: 1401

Override bootstrap font size

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="#" class="btn btn-outline-danger">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?

Upvotes: 0

Views: 2755

Answers (3)

Arleigh Hix
Arleigh Hix

Reputation: 10857

If you want the custom size applied to all .btns then in a stylesheet loaded after BS override the body font size by setting the value of the CSS variable and the .btn font size to use the variable:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<style>
  h1 {
    font-size: 24px;
  }
  
  body {
    --bs-body-font-size: 22px;
  }
  
  .btn {
    font-size: var(--bs-body-font-size);
  }
</style>
<h1>
  heading
</h1>
<p>
  paragraph
</p>
<button class="btn btn-primary">
  button
</button>

This will adjust the font size of any element that is based on the var(--bs-body-font-size) value. There is no need to use !important nor an additional class name (on every single .btn).

Upvotes: 2

Salwa A. Soliman
Salwa A. Soliman

Reputation: 746

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;
  }

Upvotes: 0

Vidiya Prasanth Pappannan
Vidiya Prasanth Pappannan

Reputation: 723

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="#" class="btn btn-outline-danger pageButtonSize">Click</a>

Upvotes: 2

Related Questions