Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

rayzor's avatar

font-weight-bolder not working

I'm using bootstrap in a laravel project and I'm centering text in a circle. I've gotten the text in the circle, but wanted it "bold". I tried doing font-weight:bolder in the CSS and nothing, then also tried adding the class 'font-weight-bolder' from bootstrap and still nothing :|

the CSS is:

<style>
    .test {
        width: 100px;
        height: 100px;
        background-color: red;
        line-height: 100px;
        text-align: center;
        color:white;
        font-size:15pt;
    }
</style>

The HTML output in the blade is:

<div class="container">
            <div class="test rounded-circle font-weight-bolder" >{{$totals}}</div>
 </div>
0 likes
7 replies
MichalOravec's avatar

Use font-weight-bold

<div class="container">
    <div class="test rounded-circle font-weight-bold">{{ $totals }}</div>
</div>

Or

<style>
    .test {
        width: 100px;
        height: 100px;
        background-color: red;
        line-height: 100px;
        text-align: center;
        color: white;
        font-size: 15pt;
        font-weight: 700 !important; // bold is set here
    }
</style>

<div class="container">
    <div class="test rounded-circle">{{ $totals }}</div>
</div>
rayzor's avatar

I had originally tried font-weight-bold as well. I've added the font-weight: 700 !important; but it's not changing it in my blade. If I just create a raw HTML page it changes fine. Thank you!

MichalOravec's avatar

What do you mean a raw HTML page?

All Blade views are compiled into plain PHP code and cached until they are modified. So it means it couldn't be problem with the blade.

rayzor's avatar

Sorry if I just created an HTML file with the minimal stuff in it vs. through laravel. Seems there is something short-circuiting the class.

MichalOravec's avatar

So just find it where it replace in your code.

Of course this will be work, because inline style has the highest priority.

<div class="container">
    <div class="test rounded-circle" style="font-weight: 700 !important;">{{ $totals }}</div>
</div>
rayzor's avatar

As a follow up apparently the font family is set to: font-family: "Nunito", sans-serif; which doesn't seem to have bold. So I just need to adjust that one.

Please or to participate in this conversation.