css - para - ¿Cómo cambiar el color primario de bootstrap?

como cambiar el color de h1 en html

Question

¿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.

Answer 1

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

.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>

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

Answer 2

Desde Bootstrap 4 puede cambiar fácilmente el color primario de su Bootstrap descargando un simple archivo CSS 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.

Answer 3

Esta es una solución muy fácil.

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

reemplace la clase bg-dark, con bg-custom .

En CSS

.bg-custom {
  background-color: red;
}

Answer 4

Esta podría ser una pregunta un poco antigua, 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 o configuración de herramientas de construcción.

Answer 5

He creado esta herramienta: https://lingtalfi.com/bootstrap4-color-generator , simplemente coloca el primario en el primer campo, luego elige tu color y haz 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).

Incluya este archivo DESPUÉS de la rutina de arranque y ya está listo.

Todo el proceso demora aproximadamente 10 segundos si lo comprende, siempre que el archivo my-colors.scss ya esté creado e incluido en su etiqueta de cabecera.

Nota: esta herramienta se puede usar 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 creó para funcionar con bootstrap 4 (es decir, no ninguna versión posterior por ahora).

Answer 6

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";

Answer 7

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 (dependiendo de su editor de texto) al color que desea. Hazlo con todos los colores que quieras cambiar

Answer 8

Usando SaSS
cambiar el color de la marca

$brand-primary:#some-color;

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

Usando css-
supongamos 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.

Answer 9

hay dos formas de ir

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 sus sass assets / stylesheets / _bootstrap.scss pero antes de importar esto puede cambiar los colores variables predeterminados

//== 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 compilar el resultado

Answer 10

Actualización 2018 para Bootstrap 4

Para cambiar el 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://www.codeply.com/go/f5OmhIdre3

En algunos casos, es posible que desee establecer un nuevo color a partir de otra variable Bootstrap existente . Para esto, importe 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://www.codeply.com/go/lobGxGgfZE

También vea esta respuesta , o esta respuesta para cambiar el color del botón en (CSS o SASS)

También es posible cambiar el color primario solo con CSS, pero requiere una gran cantidad de CSS adicional ya que hay muchas variaciones primarias (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 primario .

Answer 11

• No puede cambiar el color en el archivo cdn.
• Descargue el archivo bootstrap.
• Busque el archivo bootstrap.css.
• abra este archivo (bootstrsap.css) y busque ''primario''.
• cámbielo al color que desee.