Comment changer la couleur primaire du bootstrap?

93

Est-il possible de changer la couleur primaire du bootstrap pour qu'elle corresponde à la couleur de la marque? J'utilise le thème papier de bootswatch dans mon cas.

css  twitter-bootstrap  twitter-bootstrap-3  bootstrap-4 
— ashishjmeshram
source
1
— Copie
Oui, remplacez-le simplement dans votre fichier CSS personnalisé, mais vous devrez appliquer de nombreuses règles différentes pour chacun des éléments, et leurs états (actif, survol, focus, etc.)
— Lee
3
Au lieu de remplacer le CSS, je recommande d'utiliser l'outil de personnalisation getbootstrap.com/customize
— blurfus

Réponses:

94

Mise à jour 2020 pour Bootstrap 4

Pour modifier la couleur principale ou l' une des couleurs de thème dans Bootstrap 4 SASS, définissez les variables appropriées avant l' importation bootstrap.scss. Cela permet à votre scss personnalisé de remplacer les! Valeurs par défaut ...

$primary: purple;
$danger: red;

@import "bootstrap";

Démo: https://codeply.com/go/f5OmhIdre3

Dans certains cas, vous souhaiterez peut-être définir une nouvelle couleur à partir d'une autre variable Bootstrap existante . Pour cela @ importez d'abord les fonctions et les variables afin qu'elles puissent être référencées dans les personnalisations ...

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

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

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

Démo: https://codeply.com/go/lobGxGgfZE

Voir aussi: cette réponse , cette réponse ou changer la couleur du bouton dans (CSS ou SASS)

Il est également possible de changer la couleur primaire avec CSS uniquement, mais cela nécessite beaucoup de CSS supplémentaires car il existe de nombreuses -primaryvariantes (btn-primary, alert-primary, bg-primary, text-primary, table-primary, border-primary, etc. ...) et certaines de ces classes présentent de légères variations de couleurs sur les bordures, le survol et les états actifs. Par conséquent, si vous devez utiliser CSS, il est préférable d'utiliser un composant cible tel que la modification de la couleur principale du bouton .

Ces solutions fonctionneront également pour Bootstrap 5 alpha

— Zim
source
Pour ceux qui découvrent SASS et scss comme moi ... veuillez consulter npmles gulppour terminer l'étape de compilation.
— Chris Conlan
2
@Chris Pourquoi? Les scripts de construction npm de Bootstrap sont inclus avec la source. Recherchez dans le fichier package.json une liste complète.
— John E
1
Pas un développeur front-end. Juste ce que la documentation de mon thème m'a dit. Je supprimerai si cela n'a aucun sens.
— Chris Conlan
Donc, l'utilisation d'un CDN ne nécessite que le changement CSS ( version longue-primaire ) que je soupçonne?
— Erik Philips
Pour ceux d'entre nous qui ignorent le SASS, où définir la valeur $ primary et émettre le "bootstrap" d'importation ;?
— Steven Frank le
28

il y a deux façons d'aller 

http://getbootstrap.com/customize/

et changez la couleur dans ces ajustements et téléchargez le bootstrap personnalisé.

Ou vous pouvez utiliser sass avec cette version https://github.com/twbs/bootstrap-sass et importer dans votre sass assets / stylesheets / _bootstrap.scss mais avant d'importer cela, vous pouvez changer les couleurs des variables par défaut

//== 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;

et compilez le résultat

— Jorge Luis Saud Rosal
source
5
une encre personnalisée est-elle disponible pour Bootstrap 4?
— Euh. Amit Joshi
1
Vous devez omettre les !defaultindicateurs, sauf s'il existe d'autres fichiers de style personnalisé qui vous donnent une raison de ne pas le faire.
— John E
17

J'ai créé cet outil: https://lingtalfi.com/bootstrap4-color-generator , vous mettez simplement primaire dans le premier champ, puis choisissez votre couleur, et cliquez sur générer.

Copiez ensuite le code scss ou css généré et collez-le dans un fichier nommé my-colors.scss ou my-colors.css (ou quel que soit le nom de votre choix).

Une fois que vous compilez le scss en css , vous pouvez inclure ce fichier css APRÈS le CSS d'amorçage et vous serez prêt à partir.

L'ensemble du processus prend environ 10 secondes si vous en avez l'essentiel, à condition que le fichier my-colors.scss soit déjà créé et inclus dans votre balise head.

Remarque: cet outil peut être utilisé pour remplacer les couleurs par défaut de bootstrap (primaire, secondaire, danger, ...), mais vous pouvez également créer des couleurs personnalisées si vous le souhaitez (bleu, vert, ternaire, ...).

Note 2: cet outil a été conçu pour fonctionner avec bootstrap 4 (c'est-à-dire pas de version ultérieure pour l'instant).

— lingue
source
J'ai dû déplacer l'importation boostrap après ce CSS généré pour le faire fonctionner. Grand outil merci.
— deanwilliammills
Vous êtes un homme héros, +1
— Mustafa Erdogan
6

Tout élément avec la balise «primay» a la couleur @ brand-primary. L'une des options pour le modifier consiste à ajouter un fichier css personnalisé comme ci-dessous:

.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>
Développer l'extrait

Pour en savoir plus sur les fichiers css personnalisés avec bootstrap, voici un lien utile: https://bootstrapbay.com/blog/bootstrap-button-styles/ .

— N. Osil
source
6

Bootstrap 4

C'est ce qui a fonctionné pour moi:

J'ai créé mon propre _custom_theme.scss fichier avec un contenu similaire à: 

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

bootstrap.scssJe l'ai ajouté en haut du fichier et recompilé (dans mon cas, je l'avais dans un dossier appelé! Scss)

@import "../../../!scss/_custom_theme.scss";
@import "functions";
@import "variables";
@import "mixins";
— Rauland
source
2
C'est la bonne approche, comme indiqué dans getbootstrap.com/docs/4.0/getting-started/theming
— Gianpiero
@rauland Comment recompilez-vous? Cette même approche est-elle suivie dans le cas du bootstrap 3?
— Umair
1
Salut @Umair, j'utilise Visual Studio avec l'extension Web Compiler de Mads Kristensen. Il ajoute un compilerconfig.json à ma solution où je définis comment compiler chaque fichier .scss, en spécifiant l'entrée .scss et le fichier .css de sortie. Plus d'infos: github.com/madskristensen/WebCompiler
— Rauland
1
par exemple: (asp.net sur .Net core) "inputFile": "wwwroot \\ lib \\ bootstrap \\ scss \\ bootstrap.scss", "outputFile": "wwwroot \\ lib \\ bootstrap \\ dist \\ css \\ bootstrap.css "
— Rauland
3

C'est peut-être une question un peu ancienne, mais je veux partager la meilleure façon que j'ai trouvée pour personnaliser le bootstrap. Il existe un outil en ligne appelé bootstrap.build https://bootstrap.build/app . Cela fonctionne très bien et aucune installation ou configuration d'outils de construction n'est requise!

— Rami Alloush
source
2

La bonne façon de changer la couleur primaire par défaut dans Bootstrap 4.x à l'aide de SASS, ou de toute autre couleur comme secondaire, succès, etc.

Créez le fichier SASS suivant et importez Bootstrap SASS comme indiqué:

// (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
source
1

Utiliser SaSS pour
changer la couleur de la marque

$brand-primary:#some-color;

cela changera la couleur principale dans toute l'interface utilisateur.

Utilisation de css -
supposons que vous vouliez changer la couleur primaire du bouton.

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

recherchez l'élément et ajoutez une nouvelle règle css / sass dans un nouveau fichier et attachez-le après avoir chargé le css d'amorçage.

— manish kumar
source
0

Règles Bootstrap 4

La plupart des réponses ici sont plus ou moins correctes, mais toutes avec quelques problèmes (pour moi). Donc, enfin, sur Google, j'ai trouvé la procédure correcte, comme indiqué dans le document d'amorçage dédié: https://getbootstrap.com/docs/4.0/getting-started/theming/ .

Supposons que bootstrap est installé dans node_modules/bootstrap.

A. Créez votre your_bootstrap.scssfichier:

@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. Dans le même dossier, créez le _your_variables_theme.scssfichier.

C.Personnalisez les variables d'amorçage dans le _your_variables_theme.scssfichier en suivant ces règles:

Copier et coller des variables à partir , _variables.scssau besoin, de modifier leurs valeurs, et supprimer le drapeau par défaut! . Si une variable a déjà été affectée, elle ne sera pas réaffectée par les valeurs par défaut dans Bootstrap.

Les remplacements de variables dans le même fichier Sass peuvent venir avant ou après les variables par défaut. Cependant, lors du remplacement de fichiers Sass, vos remplacements doivent intervenir avant l'importation des fichiers Sass de Bootstrap .

Les variables par défaut sont disponibles dans node_modules/bootstrap/scss/variables.scss.

— Gianpiero
source
0

Bootstrap 5

Pour bootstrap 5, vous pouvez simplement accéder à votre fichier scss principal et ajouter:

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

ou tout autre changement que vous souhaitez faire ...

Et n'oubliez pas d'importer bootstrap juste après.

Votre fichier final main.scss devrait ressembler à ceci:

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


@import "~node_modules/bootstrap/scss/bootstrap";
— user4264972
source
-4

Depuis Bootstrap 4, vous pouvez facilement changer la couleur principale de votre Bootstrap en téléchargeant un simple fichier CSS sur BootstrapColor.net . Vous n'avez pas besoin de connaître SASS et le fichier CSS est prêt à être utilisé pour votre site Web. Vous pouvez choisir la couleur que vous voulez comme le bleu, l'indigo, le violet, le rose, le rouge, l'orange, le jaune, le vert, le sarcelle ou le cyan.

— Alex01
source
2
Ce sont littéralement les seules couleurs que vous pouvez choisir, car bootstrapcolor.net a simplement recompilé bootstrap avec une nouvelle couleur primaire codée en dur.
— Quantum7
-7
  • Vous ne pouvez pas changer la couleur dans le fichier cdn.
  • Téléchargez le fichier bootstrap.
  • Recherchez le fichier bootstrap.css.
  • ouvrez ce fichier (bootstrsap.css) et recherchez «primaire».
  • changez-le pour la couleur que vous désirez.
— Sourav
source
1
Cela ne fonctionne pas vraiment. Ce n'est pas une bonne pratique de changer directement le CSS Bootstrap. Ajoutez plutôt les remplacements CSS dans un fichier séparé qui suit bootstrap.css. En outre, changer toutes les -primaryréférences de couleur à la même couleur perdrait les variations prévues sur les couleurs de bordure, de survol, actives, etc., car elles sont une variation de la couleur d'arrière-plan principale.
— Zim le
@Zim yupp votre solution semble plus généralisée merci!
— Sourav du
-8

C'est une solution très simple.

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

remplacez la classe bg-dark, par bg-custom .

En CSS

.bg-custom {
  background-color: red;
}
— Rob
source
2
Cela ne répond pas à la question, lisez attentivement la question.
— Munim Munna
-14

Oui, je suggérerais d'ouvrir le fichier .css, d'inspecter la page et de trouver le code de couleur que vous souhaitez modifier et de rechercher tout et de remplacer (en fonction de votre éditeur de texte) à la couleur souhaitée. Faites cela avec toutes les couleurs que vous souhaitez changer

— Jonas Sideravičius
source
3
Ce n'est en fait pas une bonne pratique. Bien sûr, cela fonctionnera, mais chaque fois que vous mettez à niveau le framework, vos modifications disparaîtront (et vous devrez répéter le processus chaque. Fois que vous effectuez une mise à niveau) - Utilisez plutôt l'outil de personnalisation ( getbootstrap.com/customize ) ou ajoutez vos modifications personnalisées dans un fichier .css séparé (remplaçant les classes que vous souhaitez remplacer)
— blurfus
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.