How to remove Bold from f.label

Question

I'm stylizing a webpage developed on Rails.

So, I have a form with the checkbox of password remember. The problem Is it is always on bold and I can't change it. I've changed successfully the font-style, to italic, the color, but I couldn't remove the bold that was set as default (I guess).

Below my code:

        <% if devise_mapping.rememberable? -%>
            <div class="remember_forgot_top remember_me_position"><%= f.check_box :remember_me %> <%= f.label :remember_me %></div>
        <% end -%>

Someone knows how to remove the bold and how to stylize the label?

PS: I'm using twitter bootstrap.

Inspect the `label` with you developer tools to see from where does it get the `bold` style. Also try to override it like `label{font-weight:normal !important;}`. — Vucko, Nov 21 '13 at 17:20
Didn't see any plausible place to where that bold comes from. Also overriding the label as you suggested didn't work. :( — kamusett, Nov 21 '13 at 17:43

score 72 · Accepted Answer · edited Nov 22 '14 at 11:10

72

I fixed this problem overriding the label

label {
    font-weight: normal !important;
}

Thanks to @vucko who gave me help.

edited Nov 22 '14 at 11:10

Peon

7,902
7
59
100

answered Nov 21 '13 at 19:55

kamusett

1,403
1
12
22

4

I was able to fix it without the `!important`. I put this code after the `@import "bootstrap";`. – Powers Sep 29 '15 at 21:46
5

As @Powers alluded to - please avoid using `!important` if you don't have to! Someone else will want a label bold in another scenario, and you'll have started an `!important` war. Love, not war. – jbyrd Nov 01 '18 at 19:41
The accepted answer will be problem when I want to set font-weight again with JS/DOM. – Trần Hữu Hiền Sep 18 '20 at 08:45

score 4 · Answer 2 · answered Oct 01 '19 at 12:57

4

As I only sometimes want a non-bold label text, I solved it by using a css class in the label helper:

<%= label :model, :fieldname, class: "not-bold" %>

And in the stylesheet:

.not-bold {font-weight:normal !important;}

answered Oct 01 '19 at 12:57

Jussi Hirvi

565
3
6

or just do `
text here
` – lenooh Apr 07 '20 at 14:08

score 0 · Answer 3 · answered Oct 09 '18 at 16:45

the question is a bit old, but I just stumbled across this myself while updating an old 3.x bootstrap site to 4.x; bootstrap.min.css has styling for labels to set to 700 font weight. it does not appear to be present in bootstrap 4.x; overwriting the label css with !important after calling bootstrap works, as would using a higher degree of specificity (identifier, multiple classes, etc) on css for that element. My problem is solved by undoing this action, or namely, putting the bold styling back on these labels that have lost their boldness in our upgrade.

score 0 · Answer 4 · answered Sep 18 '20 at 08:44

Bootstrap v4.4.1

The accepted answer will be problem when I want to set font-weight again with JS/DOM.

If you notice debug css, you will see:

label:not(.form-check-label):not(.custom-file-label) {
    font-weight: 700;
}

So, add a class "form-check-label" into your tag, it will be not bold.

How to remove Bold from f.label

4 Answers4