Establecer el peso de la fuente usando las clases Bootstrap

128

¿Hay alguna clase de Bootstrap de Twitter font-weight: boldy otros valores de font-weight?

No crearía uno nuevo si esto ya existe en Bootstrap.

html css twitter-bootstrap twitter-bootstrap-3 Ionică Bizău
fuente
55
No hay clase, necesitas personalizar la tuya.
Manoz
2
sí, no hay una clase separada para Font-weight: bold
Dinesh Kanivu

Respuestas:

53

EDIT 2 (final): de acuerdo con la documentación de bootstrap 4 , class="font-weight-bold"es lo que está buscando.

EDITAR: puede usar class="font-weight-bold"como se muestra aquí (Bootstrap 4 alpha).

Mantuve la respuesta original a continuación para mayor claridad.

Estoy publicando esta respuesta porque este hilo parece tener muchos visitantes, sin embargo, no tenía una solución adecuada para resolver este problema. Pero pronto habrá un camino con Bootstrap 4:

Como esta solicitud de extracción de GitHub espectáculos, que sólo tendrá que utilizar los text-weight-normal, text-weight-boldy text-weight-italiclas clases.

Esto puede cambiar hasta la versión estable oficial. En esta fecha de escritura, esta solicitud de extracción aún no se fusionó en la rama alfa.

Actualizaré esta publicación una vez que se haya lanzado Bootstrap v4.

Ilshidur
fuente
Oh, eso es lindo! ¿Puede mejorar su respuesta para mencionar que esto sucederá en Bootstrap 4 y agregar una solución para las versiones actuales (ya sea usando <strong>y creando su propia clase)? Voy a marcar tu respuesta entonces.
Ionică Bizău
Además (en Bootstrap 4) puede agregar la clase sugerida ("font-weight-bold") a los <input/>cuadros y el texto dentro se pondrá en negrita. Usamos esto con los campos de Título para enfatizarlos cuando sea necesario. Probado en Windows x64 en Chrome ver76 e IE11.
timmi4sa
Genial, genial hombre. ¡¡¡Funciona!!! Intenté poner el contenido en negrita agregando el estilo manualmente al archivo CSS pero simplemente no sucedió. Entonces encontré su respuesta: D
Travis Le
93

Encontré esto en el sitio web Bootstrap , pero realmente no es una clase Bootstrap, es solo HTML.

<strong>rendered as bold text</strong>
Brett Merrifield
fuente
3
Además strongno significa necesariamente negrita. De developer.mozilla.org/en-US/docs/Web/HTML/Element/strong : "Por lo general, este elemento se representa de forma predeterminada con un peso de fuente en negrita. Sin embargo, no debe usarse simplemente para aplicar un estilo en negrita; use el Propiedad de peso de fuente CSS para ese fin ".
Fuerte es fuerte, negrita es negrita :( La respuesta de @GurgenHakobyan debería preferirse mucho.
MattAllegro
Esto es de los viejos tiempos donde no había CSS. Debido a la separación del patrón de diseño de preocupaciones, se inventó CSS ​​para evitar mezclar contenido y presentación tanto en HTML. Aunque los navegadores web todavía admiten esto para la compatibilidad con versiones anteriores, se recomienda no utilizar <b> y <strong>, <i> y <em> etc. en.wikipedia.org/wiki/Cascading_Style_Sheets
Wildhammer
49

En Bootstrap 4 :

class="font-weight-bold"

O:

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

Cree en su Site.css (o en otro lugar) una nueva clase llamada por ejemplo .font-bold y configúrela en su elemento

.font-bold {
  font-weight: bold;
}
Gurgen Hakobyan
fuente
8
Aconsejaría en contra de esto, se supone que el marcado es semántico, como este: .some-funcional-description-of-the-element {font-weight: bold}. En lugar de simplemente usar una clase llamada como un poco de CSS, simplemente use style = "font-weight: bold;", es más honesto acerca de ser rápido y sucio.
cmc
23
Esta es una solución perfecta y tan semántica como muchas otras clases de Bootstrap como .text-uppercase o .list-unstyled. Los estilos en línea pueden convertirse en una pesadilla de gestión, por ejemplo, si luego decide que todos los elementos en negrita deben ser de un color diferente o tener un efecto de texto. Tener una clase lo hace más fácil y esta es la mejor respuesta.
Andy Mehalick
Estoy de acuerdo con Andy aquí. Esto responde la pregunta correctamente. Hay casos de uso válidos cuando el uso de clases generalizadas proporcionaría la salida html más limpia, donde se utilizan generadores, kits de herramientas y plantillas.
Dperish
Esta es la solución correcta para bootstrap <4. El propósito de strong no es poner texto en negrita , los navegadores lo hacen porque la convención es texto en negrita con gran énfasis. La etiqueta HTML debe tener un significado semántico, no solo existe para fines de diseño. De hecho, no se cita en la recomendación W3, e incluso b no se debe confiar en que sea audaz .
Andre Figueiredo
1
Esto está desactualizado en
Bootstrap
8

En Bootstrap 4 puedes 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
fuente
2

Debe usar las variables de bootstarp para controlar el peso de la fuente si desea un valor más personalizado y / o está siguiendo un esquema que debe repetirse; Las variables se utilizan en todo el proyecto como una forma de centralizar y compartir valores de uso común como colores, espaciado o pilas de fuentes;

Puede encontrar toda la documentación en http://getbootstrap.com/css .

maioman
fuente