How to change the bootstrap primary color

Question

Is it possible to change the bootstrap primary color to match to the brand color  I am using bootswatch s paper theme in my case

User · Answer

there are two ways you can go to   http   getbootstrap com customize     and change the color in this adjustments and download the bootstrap customized   Or you can use sass with this version https   github com twbs bootstrap-sass and import in your sass assets stylesheets  bootstrap scss but before import this you can change the defaults variable colors       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   lt body gt     body-bg                 fff  default       Global text color on   lt body gt     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    and compile the result

User · Answer

Any element with  primay  tag has the color  brand-primary  One of the options to change it is adding a customized css file like below    x000D   x000D   my-primary  x000D    color  lightYellow   x000D    background-color  red  x000D    x000D   x000D   my-primary focus   my-primary hover  x000D    color  yellow   x000D    background-color  darkRed  x000D    x000D   x000D  a navbar-brand   x000D    color  lightYellow   x000D    x000D   x000D   navbar-brand hover  x000D    color  yellow  x000D    x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 4 0 0-beta css bootstrap min css  rel  stylesheet   gt  x000D   x000D   lt div class  container  gt  x000D     lt br gt  x000D     lt nav class  navbar navbar-dark bg-primary mb-3  gt  x000D       lt div class  container  gt  x000D         lt a class  navbar-brand  href     gt Default  navbar-dark  bg-primary  lt  a gt  x000D       lt  div gt  x000D     lt  nav gt  x000D     lt button type  button  class  btn btn-primary  gt Default  btn btn-primary  lt  button gt  x000D     lt  div gt  x000D   x000D   x000D   lt br gt  x000D   x000D   lt div class  container  gt  x000D     lt nav class  navbar my-primary mb-3  gt  x000D       lt div class  container  gt  x000D         lt a class  navbar-brand  href     gt Customized  my-primary  lt  a gt  x000D       lt  div gt  x000D     lt  nav gt  x000D     lt button type  button  class  btn my-primary  gt Customized  btn my-primary  lt  button gt  x000D     lt  div gt  x000D   x000D   x000D    For more about customized css files with bootstrap  here is a helpful link  https   bootstrapbay com blog bootstrap-button-styles

User · Answer

This seem to work for me in Bootstrap v5 alpha 3  variables-overrides scss  primary   00adef    theme-colors       quot primary quot       primary      main scss    Overrides  import  quot variables-overrides quot       Required - Configuration  import  quot   node modules bootstrap scss functions quot    import  quot   node modules bootstrap scss variables quot    import  quot   node modules bootstrap scss mixins quot    import  quot   node modules bootstrap scss utilities quot       Optional - Layout  amp  components  import  quot   node modules bootstrap scss root quot    import  quot   node modules bootstrap scss reboot quot    import  quot   node modules bootstrap scss type quot    import  quot   node modules bootstrap scss images quot    import  quot   node modules bootstrap scss containers quot    import  quot   node modules bootstrap scss grid quot    import  quot   node modules bootstrap scss tables quot    import  quot   node modules bootstrap scss forms quot    import  quot   node modules bootstrap scss buttons quot    import  quot   node modules bootstrap scss transitions quot    import  quot   node modules bootstrap scss dropdown quot    import  quot   node modules bootstrap scss button-group quot    import  quot   node modules bootstrap scss nav quot    import  quot   node modules bootstrap scss navbar quot    import  quot   node modules bootstrap scss card quot    import  quot   node modules bootstrap scss accordion quot    import  quot   node modules bootstrap scss breadcrumb quot    import  quot   node modules bootstrap scss pagination quot    import  quot   node modules bootstrap scss badge quot    import  quot   node modules bootstrap scss alert quot    import  quot   node modules bootstrap scss progress quot    import  quot   node modules bootstrap scss list-group quot    import  quot   node modules bootstrap scss close quot    import  quot   node modules bootstrap scss toasts quot    import  quot   node modules bootstrap scss modal quot    import  quot   node modules bootstrap scss tooltip quot    import  quot   node modules bootstrap scss popover quot    import  quot   node modules bootstrap scss carousel quot    import  quot   node modules bootstrap scss spinners quot       Helpers  import  quot   node modules bootstrap scss helpers quot       Utilities  import  quot   node modules bootstrap scss utilities api quot     import  quot custom quot

User · Answer

This might be a little bit old question  but I want to share the best way I found to customize bootstrap  There s an online tool called bootstrap build https   bootstrap build app  It works great and no installation or building tools setup required

User · Answer

You cannot change the color in cdn file   Download the bootstrap file  Search For bootstrap css file   open this bootstrsap css  file and search for  primary    change it to the colour you desire

User · Answer

Since Bootstrap 4 you can easily change the primary color of your Bootstrap by downloading a simple CSS file on BootstrapColor net  You don t need to know SASS and the CSS file is ready to use for your website  You can choose the color you want like  blue  indigo  purple  pink  red  orange  yellow  green  teal or cyan color

User · Answer

The correct way to change the default primary colour in Bootstrap 4 x using SASS  or any other colours like secondary  success and so on   Create the following SASS file and import Bootstrap SASS as indicated       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

User · Answer

This is a very easy solution    lt h4 class  card-header bg-dark text-white text-center  gt Renew your Membership lt  h4 gt    replace the class bg-dark  with bg-custom   In CSS   bg-custom     background-color  red

User · Answer

Update 2020 for Bootstrap 4 To change the primary  or any of the theme colors in Bootstrap 4 SASS  set the appropriate variables before importing bootstrap scss  This allows your custom scss to override the  default values     primary  purple   danger  red    import  quot bootstrap quot    Demo  https   codeply com go f5OmhIdre3  In some cases  you may want to set a new color from another existing Bootstrap variable  For this  import the functions and variables first so they can be referenced in the customizations       import the necessary Bootstrap files     import  quot bootstrap functions quot    import  quot bootstrap variables quot     theme-colors      primary   purple        finally  import Bootstrap     import  quot bootstrap quot    Demo  https   codeply com go lobGxGgfZE  Also see  this answer  this answer or changing the button color in  CSS or SASS   It s also possible to change the primary color with CSS only but it requires a lot of additional CSS since there are many -primary variations  btn-primary  alert-primary  bg-primary  text-primary  table-primary  border-primary  etc     and some of these classes have slight colors variations on borders  hover  and active states  Therefore  if you must use CSS it s better to use target one component such as changing the primary button color  These solutions will also work for Bootstrap 5 alpha

User · Answer

Using SaSS change the brand color   brand-primary  some-color    this will change the primary color accross all UI  Using css- suppose you want to change button primary color So  btn primary    background  some-color      search the element and add a new css sass rule in a new file and attach it after u load the bootstrap css

User · Answer

Bootstrap 4 rules  Most of the answers here are more or less correct  but all of them with some issues  for me   So  finally  googleing I found the correct procedure  as stated in the dedicated bootstrap doc  https   getbootstrap com docs 4 0 getting-started theming    Let s assume bootstrap is installed in node modules bootstrap   A  Create your your bootstrap scss file    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  In the same folder  create the  your variables theme scss file   C  Customize the bootstrap variables in  your variables theme scss file following this rules      Copy and paste variables from  variables scss as needed    modify their values  and remove the  default flag  If a   variable has already been assigned  then it won   t be re-assigned   by the default values in Bootstrap       Variable overrides within the same Sass file can come before or after   the default variables  However  when overriding across Sass files    your overrides must come before you import Bootstrap   s Sass files    Default variables are available in node modules bootstrap scss variables scss

User · Answer

I ve created this tool  https   lingtalfi com bootstrap4-color-generator  you simply put primary in the first field  then choose your color  and click generate   Then copy the generated scss or css code  and paste it in a file named my-colors scss or my-colors css  or whatever name you want     Once you compile the scss into css  you can include that css file AFTER the bootstrap CSS and you ll be good to go    The whole process takes about 10 seconds if you get the gist of it  provided that the my-colors scss file is already created and included in your head tag   Note  this tool can be used to override bootstrap s default colors  primary  secondary  danger        but you can also create custom colors if you want  blue  green  ternary         Note2  this tool was made to work with bootstrap 4  i e  not any subsequent version for now

User · Answer

Bootstrap 5 For bootstrap 5 you can just go to you main scss file and add   primary   d93eba   body-bg   fff   secondary   8300d9   or whatever changes you wanna make    And don t forget to import bootstrap right after  Your final main scss file should look like this   primary   d93eba   body-bg   fff   secondary   8300d9     import  quot  node modules bootstrap scss bootstrap quot

User · Answer

Bootstrap 4  This is what worked for me      I created my own  custom theme scss  file with content similar to        To simplify I m only changing the primary color     theme-colors     primary   ffd800     Added it to the top of the file bootstrap scss and recompiled  In my case I had it in a folder called  scss    import            scss  custom theme scss    import  functions    import  variables    import  mixins

User · Answer

Yes  I d suggest opening up the  css file  inspect the page and find the color code you want to change and Find All and Replace  depending on your text editor  to the color you want  Do that with all the colors you want to change

[css] How to change the bootstrap primary color?

Examples related to css

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3

Examples related to bootstrap-4