Como alterar a cor primária do bootstrap?

Question 1

É possível alterar a cor primária do bootstrap para corresponder à cor da marca? Estou usando o tema papel do bootswatch no meu caso.

Question 2

Atualização 2020 para Bootstrap 4

Para alterar o primário , ou qualquer uma das cores do tema no Bootstrap 4 SASS, defina as variáveis apropriadas antes de importar bootstrap.scss. Isso permite que seu scss personalizado substitua os valores! Default ...

$primary: purple;
$danger: red;

@import "bootstrap";

Demo: https://codeply.com/go/f5OmhIdre3

Em alguns casos, você pode querer definir uma nova cor a partir de outra variável Bootstrap existente . Para este @importar as funções e variáveis primeiro para que possam ser referenciadas nas personalizações ...

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

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

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

Demonstração: https://codeply.com/go/lobGxGgfZE

Veja também: esta resposta , esta resposta ou alterando a cor do botão em (CSS ou SASS)

Também é possível alterar a cor primária apenas com CSS, mas requer muito CSS adicional, pois há muitas -primaryvariações (btn-primary, alert-primary, bg-primary, text-primary, table-primary, border-primary, etc. ...) e algumas dessas classes têm pequenas variações de cores nas bordas, pairar e estados ativos. Portanto, se você deve usar CSS, é melhor usar um componente de destino, como alterar a cor primária do botão .

Essas soluções também funcionarão para Bootstrap 5 alpha

Question 3

Existem duas maneiras de ir para

http://getbootstrap.com/customize/

e mude a cor nestes ajustes e baixe o bootstrap customizado.

Ou você pode usar o sass com esta versão https://github.com/twbs/bootstrap-sass e importar em seu sass assets / stylesheets / _bootstrap.scss, mas antes de importar você pode alterar as cores das variáveis padrão

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

e compilar o resultado

Question 4

Eu criei esta ferramenta: https://lingtalfi.com/bootstrap4-color-generator , basta colocar primário no primeiro campo, escolher sua cor e clicar em gerar.

Em seguida, copie o código scss ou css gerado e cole-o em um arquivo chamado my-colours.scss ou my-colours.css (ou qualquer outro nome que desejar).

Depois de compilar o scss em css , você pode incluir esse arquivo css APÓS o CSS de bootstrap e você estará pronto para ir.

Todo o processo leva cerca de 10 segundos se você entender a essência, desde que o arquivo my-colors.scss já tenha sido criado e incluído em sua tag head.

Nota: esta ferramenta pode ser usada para substituir as cores padrão do bootstrap (primário, secundário, perigo, ...), mas você também pode criar cores personalizadas se quiser (azul, verde, ternário, ...).

Nota2: esta ferramenta foi feita para funcionar com o bootstrap 4 (ou seja, nenhuma versão subsequente por enquanto).

Question 5

Qualquer elemento com a tag 'primay' tem a cor @ brand-primary. Uma das opções para alterá-lo é adicionar um arquivo css personalizado como a seguir:

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

Para obter mais informações sobre arquivos css personalizados com bootstrap, aqui está um link útil: https://bootstrapbay.com/blog/bootstrap-button-styles/ .

Question 6

Bootstrap 4

Isto é o que funcionou para mim:

Criei meu próprio _custom_theme.scss arquivo com conteúdo semelhante a:

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

Adicionado ao topo do arquivo bootstrap.scsse recompilado (no meu caso eu o tinha em uma pasta chamada! Scss)

@import "../../../!scss/_custom_theme.scss";
@import "functions";
@import "variables";
@import "mixins";

Question 7

Esta pode ser uma questão um pouco velha, mas eu quero compartilhar a melhor maneira que encontrei para personalizar o bootstrap. Existe uma ferramenta online chamada bootstrap.build https://bootstrap.build/app . Funciona muito bem e não requer instalação ou configuração de ferramentas de construção!

Question 8

A maneira correta de alterar a cor primária padrão no Bootstrap 4.x usando SASS ou quaisquer outras cores como secundária, sucesso e assim por diante.

Crie o seguinte arquivo SASS e importe Bootstrap SASS conforme indicado:

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

Usando SaSS,
mude a cor da marca

$brand-primary:#some-color;

isso mudará a cor primária em toda a IU.

Usando css-
suponha que você deseja alterar a cor primária do botão.

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

pesquise o elemento e adicione uma nova regra css / sass em um novo arquivo e anexe-o após carregar o css de bootstrap.

Question 10

Regras de bootstrap 4

A maioria das respostas aqui estão mais ou menos corretas, mas todas com alguns problemas (para mim). Então, finalmente, googleing encontrei o procedimento correto, conforme declarado no documento dedicado de bootstrap: https://getbootstrap.com/docs/4.0/getting-started/theming/ .

Vamos supor que o bootstrap esteja instalado em node_modules/bootstrap.

A. Crie seu your_bootstrap.scssarquivo:

@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. Na mesma pasta, crie o _your_variables_theme.scssarquivo.

C. Personalize as variáveis de bootstrap no _your_variables_theme.scssarquivo seguindo estas regras:

Copie e cole as variáveis _variables.scssconforme necessário, modifique seus valores e remova o sinalizador! Default . Se uma variável já foi atribuída, ela não será reatribuída pelos valores padrão no Bootstrap.

Substituições de variáveis dentro do mesmo arquivo Sass podem vir antes ou depois das variáveis padrão. No entanto, ao substituir os arquivos Sass, suas substituições devem vir antes de você importar os arquivos Sass do Bootstrap .

As variáveis padrão estão disponíveis em node_modules/bootstrap/scss/variables.scss.

Question 11

Bootstrap 5

Para o bootstrap 5, você pode simplesmente acessar o arquivo scss principal e adicionar:

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

ou quaisquer mudanças que você queira fazer ...

E não se esqueça de importar o bootstrap logo em seguida.

Seu arquivo main.scss final deve ter a seguinte aparência:

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


@import "~node_modules/bootstrap/scss/bootstrap";

Question 12

Isso parece funcionar para mim no Bootstrap v5 alpha 3

_variables-overrides.scss

$primary: #00adef;

$theme-colors: (
  "primary":    $primary,
);

main.scss

// Overrides
@import "variables-overrides";

// Required - Configuration
@import "@/node_modules/bootstrap/scss/functions";
@import "@/node_modules/bootstrap/scss/variables";
@import "@/node_modules/bootstrap/scss/mixins";
@import "@/node_modules/bootstrap/scss/utilities";

// Optional - Layout & components
@import "@/node_modules/bootstrap/scss/root";
@import "@/node_modules/bootstrap/scss/reboot";
@import "@/node_modules/bootstrap/scss/type";
@import "@/node_modules/bootstrap/scss/images";
@import "@/node_modules/bootstrap/scss/containers";
@import "@/node_modules/bootstrap/scss/grid";
@import "@/node_modules/bootstrap/scss/tables";
@import "@/node_modules/bootstrap/scss/forms";
@import "@/node_modules/bootstrap/scss/buttons";
@import "@/node_modules/bootstrap/scss/transitions";
@import "@/node_modules/bootstrap/scss/dropdown";
@import "@/node_modules/bootstrap/scss/button-group";
@import "@/node_modules/bootstrap/scss/nav";
@import "@/node_modules/bootstrap/scss/navbar";
@import "@/node_modules/bootstrap/scss/card";
@import "@/node_modules/bootstrap/scss/accordion";
@import "@/node_modules/bootstrap/scss/breadcrumb";
@import "@/node_modules/bootstrap/scss/pagination";
@import "@/node_modules/bootstrap/scss/badge";
@import "@/node_modules/bootstrap/scss/alert";
@import "@/node_modules/bootstrap/scss/progress";
@import "@/node_modules/bootstrap/scss/list-group";
@import "@/node_modules/bootstrap/scss/close";
@import "@/node_modules/bootstrap/scss/toasts";
@import "@/node_modules/bootstrap/scss/modal";
@import "@/node_modules/bootstrap/scss/tooltip";
@import "@/node_modules/bootstrap/scss/popover";
@import "@/node_modules/bootstrap/scss/carousel";
@import "@/node_modules/bootstrap/scss/spinners";

// Helpers
@import "@/node_modules/bootstrap/scss/helpers";

// Utilities
@import "@/node_modules/bootstrap/scss/utilities/api";

@import "custom";

Question 13

Desde o Bootstrap 4, você pode alterar facilmente a cor primária do Bootstrap baixando um arquivo CSS simples no BootstrapColor.net . Você não precisa saber SASS e o arquivo CSS está pronto para ser usado em seu site. Você pode escolher a cor desejada, como azul, índigo, roxo, rosa, vermelho, laranja, amarelo, verde, azul-petróleo ou ciano.

Question 14

Você não pode alterar a cor no arquivo cdn.
Baixe o arquivo de inicialização.
Procure o arquivo bootstrap.css.
abra este arquivo (bootstrsap.css) e procure por 'principal'.
mude para a cor desejada.

Question 15

Esta é uma solução muito fácil.

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

substitua a classe bg-dark por bg-custom .

Em CSS

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

Question 16

Sim, sugiro abrir o arquivo .css, inspecionar a página e encontrar o código de cor que deseja alterar e Localizar tudo e substituir (dependendo do seu editor de texto) para a cor desejada. Faça isso com todas as cores que deseja alterar

Answer 1

97

É possível alterar a cor primária do bootstrap para corresponder à cor da marca? Estou usando o tema papel do bootswatch no meu caso.

css twitter-bootstrap twitter-bootstrap-3 bootstrap-4 ashishjmeshram
fonte

1

Possível duplicata de How to change btn color in Bootstrap

TylerH

Sim, basta substituí-lo em seu arquivo CSS personalizado, mas você precisará aplicar muitas regras diferentes para cada um dos elementos e seus estados (ativo, pairar, foco etc.)

Lee

3

Em vez de substituir o CSS, recomendo usar a ferramenta de personalização getbootstrap.com/customize

blurfus

Answer 2

1

Possível duplicata de How to change btn color in Bootstrap

TylerH

Answer 3

Sim, basta substituí-lo em seu arquivo CSS personalizado, mas você precisará aplicar muitas regras diferentes para cada um dos elementos e seus estados (ativo, pairar, foco etc.)

Lee

Answer 4

3

Em vez de substituir o CSS, recomendo usar a ferramenta de personalização getbootstrap.com/customize

blurfus

Answer 5

Atualização 2020 para Bootstrap 4

Para alterar o primário , ou qualquer uma das cores do tema no Bootstrap 4 SASS, defina as variáveis apropriadas antes de importar bootstrap.scss. Isso permite que seu scss personalizado substitua os valores! Default ...

$primary: purple;
$danger: red;

@import "bootstrap";

Demo: https://codeply.com/go/f5OmhIdre3

Em alguns casos, você pode querer definir uma nova cor a partir de outra variável Bootstrap existente . Para este @importar as funções e variáveis primeiro para que possam ser referenciadas nas personalizações ...

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

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

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

Demonstração: https://codeply.com/go/lobGxGgfZE

Veja também: esta resposta , esta resposta ou alterando a cor do botão em (CSS ou SASS)

Também é possível alterar a cor primária apenas com CSS, mas requer muito CSS adicional, pois há muitas -primaryvariações (btn-primary, alert-primary, bg-primary, text-primary, table-primary, border-primary, etc. ...) e algumas dessas classes têm pequenas variações de cores nas bordas, pairar e estados ativos. Portanto, se você deve usar CSS, é melhor usar um componente de destino, como alterar a cor primária do botão .

Essas soluções também funcionarão para Bootstrap 5 alpha

Answer 6

Para aqueles novos para SASS e SCSS como se eu fosse ... confira npmé gulppara concluir a etapa de compilação.

Chris Conlan

Answer 7

2

@Chris Por quê? Os scripts de construção npm do Bootstrap estão incluídos no código-fonte. Procure no arquivo package.json uma lista completa.

John E

Answer 8

1

Não é um desenvolvedor front-end. Exatamente o que os documentos do meu tema me disseram. Vou deletar se isso não fizer sentido.

Chris Conlan

Answer 9

Portanto, usar um CDN requer apenas a alteração do CSS ( versão primária longa ), suspeito?

Erik Philips

Answer 10

Para aqueles de nós que são ignorantes do SASS, onde está definindo o valor $ primary e emitindo a importação "bootstrap" ;?

Steven Frank

Answer 11

Existem duas maneiras de ir para

http://getbootstrap.com/customize/

e mude a cor nestes ajustes e baixe o bootstrap customizado.

Ou você pode usar o sass com esta versão https://github.com/twbs/bootstrap-sass e importar em seu sass assets / stylesheets / _bootstrap.scss, mas antes de importar você pode alterar as cores das variáveis padrão

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

e compilar o resultado

Answer 12

5

Existe alguma tinta personalizada disponível para o Bootstrap 4?

Er. Amit Joshi

Answer 13

1

Você deve omitir os !defaultsinalizadores, a menos que haja outros arquivos de estilo personalizado que forneçam um motivo para não fazê-lo.

John E

Answer 14

Eu criei esta ferramenta: https://lingtalfi.com/bootstrap4-color-generator , basta colocar primário no primeiro campo, escolher sua cor e clicar em gerar.

Em seguida, copie o código scss ou css gerado e cole-o em um arquivo chamado my-colours.scss ou my-colours.css (ou qualquer outro nome que desejar).

Depois de compilar o scss em css , você pode incluir esse arquivo css APÓS o CSS de bootstrap e você estará pronto para ir.

Todo o processo leva cerca de 10 segundos se você entender a essência, desde que o arquivo my-colors.scss já tenha sido criado e incluído em sua tag head.

Nota: esta ferramenta pode ser usada para substituir as cores padrão do bootstrap (primário, secundário, perigo, ...), mas você também pode criar cores personalizadas se quiser (azul, verde, ternário, ...).

Nota2: esta ferramenta foi feita para funcionar com o bootstrap 4 (ou seja, nenhuma versão subsequente por enquanto).

Answer 15

Tive que mover a importação boostrap após esse CSS gerado para fazê-lo funcionar. Excelente ferramenta, obrigado.

deanwilliammills

Answer 16

Qualquer elemento com a tag 'primay' tem a cor @ brand-primary. Uma das opções para alterá-lo é adicionar um arquivo css personalizado como a seguir:

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

Para obter mais informações sobre arquivos css personalizados com bootstrap, aqui está um link útil: https://bootstrapbay.com/blog/bootstrap-button-styles/ .

Answer 17

6

Bootstrap 4

Isto é o que funcionou para mim:

Criei meu próprio _custom_theme.scss arquivo com conteúdo semelhante a:

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

Adicionado ao topo do arquivo bootstrap.scsse recompilado (no meu caso eu o tinha em uma pasta chamada! Scss)

@import "../../../!scss/_custom_theme.scss";
@import "functions";
@import "variables";
@import "mixins";

Rauland
fonte

2

Esta é a abordagem correta, conforme declarado em getbootstrap.com/docs/4.0/getting-started/theming

Gianpiero

@rauland Como você recompila? Essa mesma abordagem é seguida no caso do bootstrap 3?

Umair

1

Olá @Umair, Eu uso o Visual Studio com a extensão Web Compiler de Mads Kristensen. Ele adiciona um compilerconfig.json à minha solução, onde defino como compilar cada arquivo .scss, especificando o arquivo .scss de entrada e o arquivo .css de saída. Mais informações: github.com/madskristensen/WebCompiler

Rauland

1

por exemplo: (asp.net no núcleo .Net) "inputFile": "wwwroot \\ lib \\ bootstrap \\ scss \\ bootstrap.scss", "outputFile": "wwwroot \\ lib \\ bootstrap \\ dist \\ css \\ bootstrap.css "

Rauland

Answer 18

2

Esta é a abordagem correta, conforme declarado em getbootstrap.com/docs/4.0/getting-started/theming

Gianpiero

Answer 19

@rauland Como você recompila? Essa mesma abordagem é seguida no caso do bootstrap 3?

Umair

Answer 20

1

Olá @Umair, Eu uso o Visual Studio com a extensão Web Compiler de Mads Kristensen. Ele adiciona um compilerconfig.json à minha solução, onde defino como compilar cada arquivo .scss, especificando o arquivo .scss de entrada e o arquivo .css de saída. Mais informações: github.com/madskristensen/WebCompiler

Rauland

Answer 21

1

por exemplo: (asp.net no núcleo .Net) "inputFile": "wwwroot \\ lib \\ bootstrap \\ scss \\ bootstrap.scss", "outputFile": "wwwroot \\ lib \\ bootstrap \\ dist \\ css \\ bootstrap.css "

Rauland

Answer 22

Esta pode ser uma questão um pouco velha, mas eu quero compartilhar a melhor maneira que encontrei para personalizar o bootstrap. Existe uma ferramenta online chamada bootstrap.build https://bootstrap.build/app . Funciona muito bem e não requer instalação ou configuração de ferramentas de construção!

Answer 23

A maneira correta de alterar a cor primária padrão no Bootstrap 4.x usando SASS ou quaisquer outras cores como secundária, sucesso e assim por diante.

Crie o seguinte arquivo SASS e importe Bootstrap SASS conforme indicado:

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

Usando SaSS,
mude a cor da marca

$brand-primary:#some-color;

isso mudará a cor primária em toda a IU.

Usando css-
suponha que você deseja alterar a cor primária do botão.

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

pesquise o elemento e adicione uma nova regra css / sass em um novo arquivo e anexe-o após carregar o css de bootstrap.

Answer 25

Regras de bootstrap 4

A maioria das respostas aqui estão mais ou menos corretas, mas todas com alguns problemas (para mim). Então, finalmente, googleing encontrei o procedimento correto, conforme declarado no documento dedicado de bootstrap: https://getbootstrap.com/docs/4.0/getting-started/theming/ .

Vamos supor que o bootstrap esteja instalado em node_modules/bootstrap.

A. Crie seu your_bootstrap.scssarquivo:

@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. Na mesma pasta, crie o _your_variables_theme.scssarquivo.

C. Personalize as variáveis de bootstrap no _your_variables_theme.scssarquivo seguindo estas regras:

Copie e cole as variáveis _variables.scssconforme necessário, modifique seus valores e remova o sinalizador! Default . Se uma variável já foi atribuída, ela não será reatribuída pelos valores padrão no Bootstrap.

Substituições de variáveis dentro do mesmo arquivo Sass podem vir antes ou depois das variáveis padrão. No entanto, ao substituir os arquivos Sass, suas substituições devem vir antes de você importar os arquivos Sass do Bootstrap .

As variáveis padrão estão disponíveis em node_modules/bootstrap/scss/variables.scss.

Answer 26

Bootstrap 5

Para o bootstrap 5, você pode simplesmente acessar o arquivo scss principal e adicionar:

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

ou quaisquer mudanças que você queira fazer ...

E não se esqueça de importar o bootstrap logo em seguida.

Seu arquivo main.scss final deve ter a seguinte aparência:

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


@import "~node_modules/bootstrap/scss/bootstrap";

Answer 27

Isso parece funcionar para mim no Bootstrap v5 alpha 3

_variables-overrides.scss

$primary: #00adef;

$theme-colors: (
  "primary":    $primary,
);

main.scss

// Overrides
@import "variables-overrides";

// Required - Configuration
@import "@/node_modules/bootstrap/scss/functions";
@import "@/node_modules/bootstrap/scss/variables";
@import "@/node_modules/bootstrap/scss/mixins";
@import "@/node_modules/bootstrap/scss/utilities";

// Optional - Layout & components
@import "@/node_modules/bootstrap/scss/root";
@import "@/node_modules/bootstrap/scss/reboot";
@import "@/node_modules/bootstrap/scss/type";
@import "@/node_modules/bootstrap/scss/images";
@import "@/node_modules/bootstrap/scss/containers";
@import "@/node_modules/bootstrap/scss/grid";
@import "@/node_modules/bootstrap/scss/tables";
@import "@/node_modules/bootstrap/scss/forms";
@import "@/node_modules/bootstrap/scss/buttons";
@import "@/node_modules/bootstrap/scss/transitions";
@import "@/node_modules/bootstrap/scss/dropdown";
@import "@/node_modules/bootstrap/scss/button-group";
@import "@/node_modules/bootstrap/scss/nav";
@import "@/node_modules/bootstrap/scss/navbar";
@import "@/node_modules/bootstrap/scss/card";
@import "@/node_modules/bootstrap/scss/accordion";
@import "@/node_modules/bootstrap/scss/breadcrumb";
@import "@/node_modules/bootstrap/scss/pagination";
@import "@/node_modules/bootstrap/scss/badge";
@import "@/node_modules/bootstrap/scss/alert";
@import "@/node_modules/bootstrap/scss/progress";
@import "@/node_modules/bootstrap/scss/list-group";
@import "@/node_modules/bootstrap/scss/close";
@import "@/node_modules/bootstrap/scss/toasts";
@import "@/node_modules/bootstrap/scss/modal";
@import "@/node_modules/bootstrap/scss/tooltip";
@import "@/node_modules/bootstrap/scss/popover";
@import "@/node_modules/bootstrap/scss/carousel";
@import "@/node_modules/bootstrap/scss/spinners";

// Helpers
@import "@/node_modules/bootstrap/scss/helpers";

// Utilities
@import "@/node_modules/bootstrap/scss/utilities/api";

@import "custom";

Answer 28

-3

Desde o Bootstrap 4, você pode alterar facilmente a cor primária do Bootstrap baixando um arquivo CSS simples no BootstrapColor.net . Você não precisa saber SASS e o arquivo CSS está pronto para ser usado em seu site. Você pode escolher a cor desejada, como azul, índigo, roxo, rosa, vermelho, laranja, amarelo, verde, azul-petróleo ou ciano.

Alex01
fonte

2

Essas são literalmente as únicas cores que você pode escolher, já que bootstrapcolor.net simplesmente recompilou o bootstrap com uma nova cor primária codificada.

Quantum7

Solução super fácil!

massimoi

Answer 29

2

Essas são literalmente as únicas cores que você pode escolher, já que bootstrapcolor.net simplesmente recompilou o bootstrap com uma nova cor primária codificada.

Quantum7

Answer 30

Solução super fácil!

massimoi

Answer 31

-7

Você não pode alterar a cor no arquivo cdn.
Baixe o arquivo de inicialização.
Procure o arquivo bootstrap.css.
abra este arquivo (bootstrsap.css) e procure por 'principal'.
mude para a cor desejada.

Sourav
fonte

1

Isso realmente não funciona. Não é uma boa prática alterar o CSS do Bootstrap diretamente. Em vez disso, adicione substituições de CSS em um arquivo separado que segue bootstrap.css. Além disso, alterar todas as -primaryreferências de cores para a mesma cor perderia as variações pretendidas nas cores de borda, foco, ativo, etc., uma vez que são uma variação da cor de fundo primária.

Zim

@Zim yupp sua solução parece mais generalizada obrigado!

Sourav

Answer 32

1

Isso realmente não funciona. Não é uma boa prática alterar o CSS do Bootstrap diretamente. Em vez disso, adicione substituições de CSS em um arquivo separado que segue bootstrap.css. Além disso, alterar todas as -primaryreferências de cores para a mesma cor perderia as variações pretendidas nas cores de borda, foco, ativo, etc., uma vez que são uma variação da cor de fundo primária.

Zim

Answer 33

@Zim yupp sua solução parece mais generalizada obrigado!

Sourav

Answer 34

-8

Esta é uma solução muito fácil.

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

substitua a classe bg-dark por bg-custom .

Em CSS

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

Roubar
fonte

2

Isso não responde à pergunta, leia a pergunta com atenção.

Munim Munna de

Answer 35

2

Isso não responde à pergunta, leia a pergunta com atenção.

Munim Munna de

Answer 36

-14

Sim, sugiro abrir o arquivo .css, inspecionar a página e encontrar o código de cor que deseja alterar e Localizar tudo e substituir (dependendo do seu editor de texto) para a cor desejada. Faça isso com todas as cores que deseja alterar

Jonas Sideravičius
fonte

3

Na verdade, esta não é uma prática recomendada. Claro que funcionará, mas sempre que você atualizar a estrutura, suas alterações desaparecerão (e você terá que repetir o processo todas as vezes que fizer uma atualização) - em vez disso, use a ferramenta de personalização ( getbootstrap.com/customize ) ou adicione suas alterações personalizadas em um arquivo .css separado (substituindo as classes que você deseja substituir)

blurfus

Answer 37

3

Na verdade, esta não é uma prática recomendada. Claro que funcionará, mas sempre que você atualizar a estrutura, suas alterações desaparecerão (e você terá que repetir o processo todas as vezes que fizer uma atualização) - em vez disso, use a ferramenta de personalização ( getbootstrap.com/customize ) ou adicione suas alterações personalizadas em um arquivo .css separado (substituindo as classes que você deseja substituir)

blurfus

Como alterar a cor primária do bootstrap?

Respostas:

Regras de bootstrap 4