¿Cómo cambiar el color primario de bootstrap?

93

¿Es posible cambiar el color primario de bootstrap para que coincida con el color de la marca? Estoy usando el tema de papel de Bootswatch en mi caso.

css twitter-bootstrap twitter-bootstrap-3 bootstrap-4 ashishjmeshram
fuente
1
Posible duplicado de Cómo cambiar el color btn en Bootstrap
TylerH
Sí, simplemente anótelo en su archivo CSS personalizado, pero deberá aplicar muchas reglas diferentes para cada uno de los elementos y sus estados (activo, flotante, enfocado, etc.)
Lee
3
En lugar de anular el CSS, recomiendo usar la herramienta de personalización getbootstrap.com/customize
blurfus

Respuestas:

94

Actualización 2020 para Bootstrap 4

Para cambiar el color principal o cualquiera de los colores del tema en Bootstrap 4 SASS, configure las variables apropiadas antes de importar bootstrap.scss. Esto permite que su scss personalizado anule los valores predeterminados! ...

$primary: purple;
$danger: red;

@import "bootstrap";

Demostración: https://codeply.com/go/f5OmhIdre3

En algunos casos, es posible que desee establecer un nuevo color a partir de otra variable Bootstrap existente . Para esto @importar las funciones y variables primero para que puedan ser referenciadas en las personalizaciones ...

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

$theme-colors: (
  primary: $purple
);

/* finally, import Bootstrap */
@import "bootstrap";

Demostración: https://codeply.com/go/lobGxGgfZE

Vea también: esta respuesta , esta respuesta o cambiar el color del botón en (CSS o SASS)

También es posible cambiar el color primario solo con CSS, pero requiere mucho CSS adicional ya que existen muchas -primaryvariaciones (btn-primary, alert-primary, bg-primary, text-primary, table-primary, border-primary, etc. ...) y algunas de estas clases tienen ligeras variaciones de colores en los bordes, el desplazamiento y los estados activos. Por lo tanto, si debe usar CSS, es mejor usar un componente de destino, como cambiar el color del botón principal .

Estas soluciones también funcionarán para Bootstrap 5 alpha

Zim
fuente
Para los nuevos en SASS y SCSS como si estuviera ... por favor, compruebe npmque está gulppara completar el proceso de compilación.
Chris Conlan
2
@Chris ¿Por qué? Los scripts de compilación npm de Bootstrap se incluyen con la fuente. Busque en el archivo package.json para obtener una lista completa.
John E
1
No es un desarrollador front-end. Justo lo que me dijeron los documentos de mi tema. Eliminaré si eso no tiene sentido.
Chris Conlan
Entonces, el uso de una CDN requiere que el CSS solo cambie ( versión primaria larga ), sospecho.
Erik Philips
Para aquellos de nosotros que somos ignorantes de SASS, ¿dónde estamos configurando el valor $ principal y emitiendo el "bootstrap" de importación?
Steven Frank
28

hay dos formas de ir a 

http://getbootstrap.com/customize/

y cambie el color en estos ajustes y descargue el bootstrap personalizado.

O puede usar sass con esta versión https://github.com/twbs/bootstrap-sass e importar en su sass assets / stylesheets / _bootstrap.scss pero antes de importar esto puede cambiar los colores de las variables por defecto

//== Colors
//
//## Gray and brand colors for use across Bootstrap.

$gray-base:              #000 !default;
$gray-darker:            lighten($gray-base, 13.5%) !default; // #222
$gray-dark:              lighten($gray-base, 20%) !default;   // #333
$gray:                   lighten($gray-base, 33.5%) !default; // #555
$gray-light:             lighten($gray-base, 46.7%) !default; // #777
$gray-lighter:           lighten($gray-base, 93.5%) !default; // #eee

$brand-primary:         darken(#428bca, 6.5%) !default; // #337ab7
$brand-success:         #5cb85c !default;
$brand-info:            #5bc0de !default;
$brand-warning:         #f0ad4e !default;
$brand-danger:          #d9534f !default;


//== Scaffolding
//
//## Settings for some of the most global styles.

//** Background color for `<body>`.
$body-bg:               #fff !default;
//** Global text color on `<body>`.
$text-color:            $gray-dark !default;

//** Global textual link color.
$link-color:            $brand-primary !default;
//** Link hover color set via `darken()` function.
$link-hover-color:      darken($link-color, 15%) !default;
//** Link hover decoration.
$link-hover-decoration: underline !default;

y compila el resultado

Jorge Luis Saud Rosal
fuente
5
¿Hay tinta personalizada disponible para Bootstrap 4?
Er. Amit Joshi
1
Usted debe omitir las !defaultbanderas menos que haya otros archivos de estilo personalizado que le dan una razón para no hacerlo.
John E
17

Creé esta herramienta: https://lingtalfi.com/bootstrap4-color-generator , simplemente coloque primario en el primer campo, luego elija su color y haga clic en generar.

Luego copie el código scss o css generado y péguelo en un archivo llamado my-colors.scss o my-colors.css (o el nombre que desee).

Una vez que compile el scss en css , puede incluir ese archivo css DESPUÉS del CSS de arranque y estará listo para comenzar .

Todo el proceso toma alrededor de 10 segundos si lo entiende, siempre que el archivo my-colors.scss ya esté creado e incluido en su etiqueta principal.

Nota: esta herramienta se puede utilizar para anular los colores predeterminados de bootstrap (primario, secundario, peligro, ...), pero también puede crear colores personalizados si lo desea (azul, verde, ternario, ...).

Nota 2: esta herramienta se hizo para funcionar con bootstrap 4 (es decir, no con ninguna versión posterior por ahora).

abadejo
fuente
Tuve que mover la importación de boostrap después de este CSS generado para que funcionara. Gran herramienta gracias.
deanwilliammills
Eres un hombre héroe, +1
Mustafa Erdogan
6

Cualquier elemento con la etiqueta 'primay' tiene el color @ brand-primary. Una de las opciones para cambiarlo es agregar un archivo CSS personalizado como se muestra a continuación:

.my-primary{
  color: lightYellow ;
  background-color: red;
}

.my-primary:focus, .my-primary:hover{
  color: yellow ;
  background-color: darkRed;
}

a.navbar-brand {
  color: lightYellow ;
}

.navbar-brand:hover{
  color: yellow;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <br>
  <nav class="navbar navbar-dark bg-primary mb-3">
    <div class="container">
      <a class="navbar-brand" href="/">Default (navbar-dark  bg-primary)</a>
    </div>
  </nav>
  <button type="button" class="btn btn-primary">Default (btn btn-primary)</button>
  </div>


<br>

<div class="container">
  <nav class="navbar my-primary mb-3">
    <div class="container">
      <a class="navbar-brand" href="/">Customized (my-primary)</a>
    </div>
  </nav>
  <button type="button" class="btn my-primary">Customized (btn my-primary)</button>
  </div>
Expandir fragmento

Para obtener más información sobre los archivos CSS personalizados con bootstrap, aquí hay un enlace útil: https://bootstrapbay.com/blog/bootstrap-button-styles/ .

N. Osil
fuente
6

Bootstrap 4

Esto es lo que funcionó para mí:

Creé mi propio _custom_theme.scss archivo con contenido similar a: 

/* To simplify I'm only changing the primary color */
$theme-colors: ( "primary":#ffd800);

Lo agregué a la parte superior del archivo bootstrap.scssy lo volví a compilar (en mi caso lo tenía en una carpeta llamada! Scss)

@import "../../../!scss/_custom_theme.scss";
@import "functions";
@import "variables";
@import "mixins";
Rauland
fuente
2
Este es el enfoque correcto, como se indica en getbootstrap.com/docs/4.0/getting-started/theming
Gianpiero
@rauland ¿Cómo se vuelve a compilar? ¿Se sigue este mismo enfoque en el caso de bootstrap 3?
Umair
1
Hola @Umair, uso Visual Studio con la extensión Web Compiler de Mads Kristensen. Agrega un compilerconfig.json a mi solución donde defino cómo compilar cada archivo .scss, especificando el archivo .scss de entrada y el archivo .css de salida. Más información: github.com/madskristensen/WebCompiler
Rauland
1
por ejemplo: (asp.net en .Net core) "inputFile": "wwwroot \\ lib \\ bootstrap \\ scss \\ bootstrap.scss", "outputFile": "wwwroot \\ lib \\ bootstrap \\ dist \\ css \\ bootstrap.css "
Rauland
3

Esta puede ser una pregunta un poco vieja, pero quiero compartir la mejor manera que encontré para personalizar bootstrap. Hay una herramienta en línea llamada bootstrap.build https://bootstrap.build/app . ¡Funciona muy bien y no requiere instalación ni configuración de herramientas de construcción!

Rami Alloush
fuente
2

La forma correcta de cambiar el color primario predeterminado en Bootstrap 4.x usando SASS, o cualquier otro color como secundario, éxito, etc.

Cree el siguiente archivo SASS e importe Bootstrap SASS como se indica:

// (Required) Import Bootstrap
@import "bootstrap/functions";
@import "bootstrap/variables";
@import "bootstrap/mixins";

$primary: blue;
$secondary: green;
$my-color: red;

$theme-colors: (
  primary: $primary,
  secondary: $secondary,
  my-color: $my-color
);

// Add below your SASS or CSS code

// (Required) Import Bootstrap
@import "bootstrap/bootstrap";
Alvin Konda
fuente
1

Usando SaSS
cambia el color de la marca

$brand-primary:#some-color;

esto cambiará el color primario en toda la interfaz de usuario.

Usando css,
suponga que desea cambiar el color primario del botón.

btn.primary{
  background:#some-color;
}

busque el elemento y agregue una nueva regla css / sass en un nuevo archivo y adjúntelo después de cargar el bootstrap css.

manish kumar
fuente
0

Bootstrap 4 reglas

La mayoría de las respuestas aquí son más o menos correctas, pero todas tienen algunos problemas (para mí). Entonces, finalmente, buscando en Google encontré el procedimiento correcto, como se indica en el documento de arranque dedicado: https://getbootstrap.com/docs/4.0/getting-started/theming/ .

Supongamos que bootstrap está instalado en node_modules/bootstrap .

A. Cree su your_bootstrap.scssarchivo:

@import "your_variables_theme";    // here your variables

// mandatory imports from bootstrap src
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables"; // here bootstrap variables
@import "../node_modules/bootstrap/scss/mixins";

// optional imports from bootstrap (do not import 'bootstrap.scss'!)
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
etc...

B. En la misma carpeta, cree el _your_variables_theme.scss archivo.

C. Personalice las variables de arranque en el _your_variables_theme.scssarchivo siguiendo estas reglas:

Copie y pegue las variables de _variables.scsssegún sea necesario, modifique sus valores y elimine la marca! Default . Si ya se ha asignado una variable, los valores predeterminados en Bootstrap no volverán a asignarla.

Las anulaciones de variables dentro del mismo archivo Sass pueden ir antes o después de las variables predeterminadas. Sin embargo, al anular todos los archivos Sass, sus anulaciones deben realizarse antes de importar los archivos Sass de Bootstrap .

Las variables predeterminadas están disponibles en node_modules/bootstrap/scss/variables.scss.

Gianpiero
fuente
0

Bootstrap 5

Para bootstrap 5, puede ir a su archivo scss principal y agregar:

$primary: #d93eba;
$body-bg: #fff;
$secondary: #8300d9;

o cualquier cambio que quieras hacer ...

Y no olvide importar bootstrap inmediatamente después.

Su archivo main.scss final debería verse así:

$primary: #d93eba;
$body-bg: #fff;
$secondary: #8300d9;


@import "~node_modules/bootstrap/scss/bootstrap";
usuario4264972
fuente
-4

Desde Bootstrap 4, puede cambiar fácilmente el color primario de su Bootstrap descargando un archivo CSS simple en BootstrapColor.net . No necesita conocer SASS y el archivo CSS está listo para usar en su sitio web. Puede elegir el color que desee como azul, índigo, morado, rosa, rojo, naranja, amarillo, verde, verde azulado o cian.

Alex01
fuente
2
Esos son literalmente los únicos colores que puede elegir, ya que bootstrapcolor.net simplemente ha recompilado bootstrap con un nuevo color primario codificado.
Quantum7
-7
  • No puede cambiar el color en el archivo cdn.
  • Descargue el archivo de arranque.
  • Busque el archivo bootstrap.css.
  • abra este archivo (bootstrsap.css) y busque 'primario'.
  • cámbielo al color que desee.
Sourav
fuente
1
Esto realmente no funciona. No es una buena práctica cambiar el CSS de Bootstrap directamente. En su lugar, agregue anulaciones de CSS en un archivo separado que sigue a bootstrap.css. Además, cambiar todas las -primaryreferencias de color al mismo color perdería las variaciones deseadas en los colores de borde, flotante, activos, etc., ya que son una variación del color de fondo principal.
Zim
@Zim yupp, tu solución parece más generalizada, ¡gracias!
Sourav
-8

Esta es una solución muy sencilla.

<h4 class="card-header bg-dark text-white text-center">Renew your Membership</h4>

reemplace la clase bg-dark por bg-custom .

En CSS

.bg-custom {
  background-color: red;
}
Robar
fuente
2
Esto no responde a la pregunta, lea la pregunta con atención.
Munim Munna
-14

Sí, sugeriría abrir el archivo .css, inspeccionar la página y encontrar el código de color que desea cambiar y Buscar todo y reemplazar (según su editor de texto) con el color que desee. Haz eso con todos los colores que quieras cambiar

Jonas Sideravičius
fuente
3
En realidad, esta no es una buena práctica. Seguro que funcionará, pero cada vez que actualice el marco, los cambios desaparecerán (y tendrá que repetir el proceso cada vez que realice una actualización). En su lugar, utilice la herramienta de personalización ( getbootstrap.com/customize ) o agregue sus cambios personalizados en un archivo .css separado (anulando las clases que desea anular)
blurfus