Comment changer la couleur primaire du bootstrap?

Question 1

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.

Question 2

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

Question 3

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

Question 4

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

Question 5

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

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

Question 7

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!

Question 8

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

Question 9

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.

Question 10

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.

Question 11

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

Question 12

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.

Question 13

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.

Question 14

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

Question 15

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

Answer 1

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

Answer 2

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

Answer 3

3

Au lieu de remplacer le CSS, je recommande d'utiliser l'outil de personnalisation getbootstrap.com/customize

blurfus

Answer 4

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

Answer 5

Pour ceux qui découvrent SASS et scss comme moi ... veuillez consulter npmles gulppour terminer l'étape de compilation.

Chris Conlan

Answer 6

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

Answer 7

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

Answer 8

Donc, l'utilisation d'un CDN ne nécessite que le changement CSS ( version longue-primaire ) que je soupçonne?

Erik Philips

Answer 9

Pour ceux d'entre nous qui ignorent le SASS, où définir la valeur $ primary et émettre le "bootstrap" d'importation ;?

Steven Frank le

Answer 10

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

Answer 11

5

une encre personnalisée est-elle disponible pour Bootstrap 4?

Euh. Amit Joshi

Answer 12

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

Answer 13

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

Answer 14

J'ai dû déplacer l'importation boostrap après ce CSS généré pour le faire fonctionner. Grand outil merci.

deanwilliammills

Answer 15

Vous êtes un homme héros, +1

Mustafa Erdogan

Answer 16

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

Answer 17

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

Answer 18

2

C'est la bonne approche, comme indiqué dans getbootstrap.com/docs/4.0/getting-started/theming

Gianpiero

Answer 19

@rauland Comment recompilez-vous? Cette même approche est-elle suivie dans le cas du bootstrap 3?

Umair

Answer 20

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

Answer 21

1

par exemple: (asp.net sur .Net core) "inputFile": "wwwroot \\ lib \\ bootstrap \\ scss \\ bootstrap.scss", "outputFile": "wwwroot \\ lib \\ bootstrap \\ dist \\ css \\ bootstrap.css "

Rauland

Answer 22

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!

Answer 23

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

Answer 24

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.

Answer 25

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.

Answer 26

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

Answer 27

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.

Answer 28

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

Answer 29

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

Answer 30

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

Answer 31

@Zim yupp votre solution semble plus généralisée merci!

Sourav du

Answer 32

-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
la source

2

Cela ne répond pas à la question, lisez attentivement la question.

Munim Munna

Answer 33

2

Cela ne répond pas à la question, lisez attentivement la question.

Munim Munna

Answer 34

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

Answer 35

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

Comment changer la couleur primaire du bootstrap?

Réponses:

Règles Bootstrap 4