0

I am trying to change the weight of button text to bold (in certain cases). To do this I created a new class in bootstrap.css, basically a copy of the btn class with font-weight: bold - I named the class btnbold:

.btnbold {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.428571429;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

I then wrote the following code to observe the buttons with various changes, including making the text bold:

<button type="button" class="btn">Basic</button>

<button type="button" class="btnbold btn-default">Bold Default</button>

I tested this code in my development area, and the "Bold Default" button looked as I expected - the text was bold. When I exported by changes to our web site, the "Bold Default" button text was non-bold but the button border had a raised appearance. I am using IE in both cases.

Help ????

Thanks Rich

rorpen53
  • 11
  • 1
  • Never *ever* use bootstrap - it's some developer's lack of comprehending how CSS works. You have been warned! Regardless of your path: best of luck! – John Nov 04 '18 at 23:05
  • @John so you are adivising him to never ever use one of the most used and powerful CSS framework? – Temani Afif Nov 04 '18 at 23:21
  • @TemaniAfif I *am* advising him to not use bootstrap. Just because it's popular doesn't mean it's competent. – John Nov 05 '18 at 20:00

1 Answers1

0

Never rely on font-weight. Some fonts don't have bold weights(actually most of Google Fonts do not support font-weight). It's better to @import or <link> the bold version of that font.

If the font was one of your changes, then make sure that the new font supports a bold weight.

If you didn't change the font, I would recommend you to read this solution.

Abdullah Ahmed
  • 43
  • 4
  • I am a bit perplexed re: the use of bootstrap. I did add a class to bootstrap and am using the exact code (both in bootstrap and my test rig) on our website and my development area and I am getting two different results - on our website it appears that the button border is bold but not the text, and in my development environment the button border appears normal and the text appears in bold. Again - the same code. I don't mean to be obtuse, but if I don't understand why this appearance difference is happening, and it this point that is my greatest concern - my understanding. – rorpen53 Nov 06 '18 at 22:09