How to override default font weights in Bootstrap 5.3 using css stylesheet [duplicate]

Question

I want my h1 heading to be a Montserrat black with font weight 900. However on inspecting my website in google developer tools I see that my css code is being overridden by the bootstrap link. Also i can't delete the bootstrap link or my navbar won't work.

How to override the default bootstrap font weight 500 to get a font weight of 900 for my h1?

I tried a solution via including sass file in CSS however that code works only for bootstrap 4 and not on bootstrap 5.3 version.

There are override css code solutions for bootstrap 4 not on bootstrap 5.3 dictionary.

h1 {
  font-family: 'Montserrat', sans-serif;
  line-height: 1.5; /* overridden to 1.2 */
  font-size: 3rem;
  font-weight: 900; /* overridden to 500 */
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">

<h1>Montserrat black 900 font weight</h1>

FYI, you were using incorrect comment syntax in your CSS. That could be a problem. — isherwood
– isherwood, Commented Apr 11, 2023 at 18:20
incorrect comment syntax in my CSS?? it's not a syntax problem, i used the correct comment syntax based on the edior i'm using — Deepti Sheoran
– Deepti Sheoran, Commented Apr 12, 2023 at 6:01
The editor doesn't determine syntax. Double slashes are not valid in CSS. — isherwood
– isherwood, Commented Apr 12, 2023 at 12:39
where am i using double slashes, it's single slashes only /* */ — Deepti Sheoran
– Deepti Sheoran, Commented Apr 13, 2023 at 9:50
Oh got it now! Thanks a lot for the edit, i was confused because it looked the same to me. It's not a excuse but i am a nub here... — Deepti Sheoran
– Deepti Sheoran, Commented Apr 14, 2023 at 13:44

isherwood · Accepted Answer · 2023-04-11 18:24:06Z

0

There are lots of ways to make CSS rules fall higher in specificity rank. An easy one is to prepend body, which just adds another component to the selector and therefore increases specificity. Avoid using !important as it makes future work more difficult.

body h1 {
  font-family: 'Montserrat', sans-serif;
  line-height: 1.5; /* overridden from 1.2 */
  font-size: 3rem;
  font-weight: 900; /* overridden from 500 */
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">

<h1>Montserrat black 900 font weight</h1>

answered Apr 11, 2023 at 18:24

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to override default font weights in Bootstrap 5.3 using css stylesheet [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related