Como alterar a cor primária do bootstrap?

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

Respostas:

100

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

— Zim
fonte
Para aqueles novos para SASS e SCSS como se eu fosse ... confira npmé gulppara concluir a etapa de compilação.
— Chris Conlan
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
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
Portanto, usar um CDN requer apenas a alteração do CSS ( versão primária longa ), suspeito?
— Erik Philips
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
29

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

— Jorge Luis Saud Rosal
fonte
5
Existe alguma tinta personalizada disponível para o Bootstrap 4?
— Er. Amit Joshi
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
17

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

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

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

— N. Osil
fonte
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
3

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!

— Rami Alloush
fonte
2

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";
— Alvin Konda
fonte
1

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.

— Manish Kumar
fonte
0

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.

— Gianpiero
fonte
0

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";
— user4264972
fonte
0

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";
— Arlan T
fonte
-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
-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
-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
-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
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.