Definir o peso da fonte usando as classes Bootstrap

128

Existe alguma classe Twitter Bootstrap para font-weight: bolde outros valores de font-weight?

Eu não criaria um novo se isso já existir no Bootstrap.

html css twitter-bootstrap twitter-bootstrap-3 Ionică Bizău
fonte
5
Não há classe. Você precisa personalizar a sua.
Manoz
2
sim não existe uma classe separada para font-weight: bold
Dinesh Kanivu

Respostas:

53

EDIT 2 (final): De acordo com a documentação do bootstrap 4 , class="font-weight-bold"é o que você está procurando.

EDIT: Você pode usar class="font-weight-bold"como mostrado aqui (Bootstrap 4 alpha).

Eu mantive a resposta original abaixo para fins de clareza.

Estou postando esta resposta porque esse tópico parece ter muitos visitantes, mas não tinha uma solução adequada para resolver esse problema. Mas em breve haverá uma maneira com o Bootstrap 4:

Como este GitHub solicitação de recebimento shows, você só vai ter que usar as text-weight-normal, text-weight-bolde text-weight-italicclasses.

Talvez isso possa mudar até o lançamento oficial estável. Nesta data de escrita, essa solicitação de recebimento ainda não foi mesclada na ramificação alfa.

Vou atualizar esta postagem assim que o Bootstrap v4 for lançado.

Ilshidur
fonte
Oh, que fofo! Você pode melhorar sua resposta para mencionar que isso vai acontecer no Bootstrap 4 e adicionar uma solução para as versões atuais (usando <strong>e apenas criando sua própria classe)? Vou marcar sua resposta então.
Jonic Biz
Além disso (no Bootstrap 4), você pode adicionar a classe sugerida ("font-weight-bold") às <input/>caixas e o texto dentro ficará em negrito. Usamos isso com campos de título para enfatizá-los quando necessário. Testado no Windows x64 no Chrome ver76 e IE11.
timmi4sa 8/09/19
Legal, cara legal. Funciona!!! Eu tentei deixar o conteúdo em negrito adicionando o estilo manualmente ao arquivo css, mas isso simplesmente não aconteceu. Então eu encontrei sua resposta: D
Travis Le
93

Encontrei isso no site do Bootstrap , mas na verdade não é uma classe do Bootstrap, é apenas HTML.

<strong>rendered as bold text</strong>
Brett Merrifield
fonte
3
Além disso strong, não significa negrito necessariamente. De developer.mozilla.org/pt-BR/docs/Web/HTML/Element/strong : "Normalmente, esse elemento é renderizado por padrão usando um peso de fonte em negrito. No entanto, ele não deve ser usado simplesmente para aplicar um estilo em negrito; use o Propriedade de peso de fonte CSS para esse fim. "
Strong é forte, ousada é ousada :( A resposta por @GurgenHakobyan deve ser muito preferido.
MattAllegro
Isso é dos velhos tempos em que não havia CSS. Devido à separação do padrão de design de preocupações, o CSS foi inventado para evitar a mistura de conteúdo e apresentação em HTML. Embora os navegadores da web ainda apoiar esta para compatibilidade com versões anteriores, é fortemente aconselhados a não usar <b> e <strong>, <i> e <em> etc. en.wikipedia.org/wiki/Cascading_Style_Sheets
Wildhammer
49

No Bootstrap 4 :

class="font-weight-bold"

Ou:

<strong>text</strong>
Jeremy Lynch
fonte
39

Crie no seu Site.css (ou em outro local) uma nova classe chamada, por exemplo .font-bold, e defina-a como seu elemento

.font-bold {
  font-weight: bold;
}
Gurgen Hakobyan
fonte
8
Eu desaconselho isso, a marcação deve ser semântica, assim: .alguma descrição funcional-do-elemento {font-weight: bold}. Ao invés de usar apenas uma classe chamada css, use style = "font-weight: bold;", é mais honesto ser rápido e sujo.
cmc
23
Esta é uma solução perfeita e tão semântica quanto muitas outras classes de Bootstrap, como .text-uppercase ou .list-unstyled. Os estilos embutidos podem se tornar um pesadelo de gerenciamento, por exemplo, se você decidir posteriormente que todos os elementos em negrito devem ter uma cor diferente ou ter um efeito de texto. Ter uma aula facilita isso e esta é a melhor resposta.
Andy Mehalick 15/09/2015
Eu concordo com Andy aqui. Isso responde à pergunta corretamente. Existem casos de uso válidos quando o uso de classes generalizadas forneceria a saída html mais limpa, onde geradores, kits de ferramentas e modelos estão em uso.
Dperish
Esta é a solução certa para o bootstrap <4. O objetivo strong não é tornar o texto em negrito , os navegadores fazem isso porque a convenção é um texto em negrito com forte ênfase. A tag HTML deve ter significado semântico, não apenas existe para fins de design. Na verdade, ele não é citado na recomendação do W3 e nem b deve ser considerado ousado .
Andre Figueiredo
1
Isso está desatualizado no bootstrap 4
toddmo 16/04/18
8

No Bootstrap 4, você pode usar:

<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
danramzdev
fonte
2

Você deve usar as variáveis ​​do bootstarp para controlar o peso da fonte, se desejar um valor mais personalizado e / ou seguir um esquema que precise ser repetido; As variáveis ​​são usadas em todo o projeto como uma maneira de centralizar e compartilhar valores comumente usados, como cores, espaçamento ou pilhas de fontes;

você pode encontrar toda a documentação em http://getbootstrap.com/css .

maioman
fonte