With Twitter Bootstrap how can I customize the h1 text color of one page and leave the other pages to be default

Question

On my index page  I want the h1 text color to be white and comes with shadow  but I don t want to change the default behavior the h1 on other pages  How can I achieve this

User · Answer

After perusing this myself  Using the Text Color Classes in Connor Leech s answer   Be warned to pay careful attention to the  navbar-text  class   To get green text on the navbar for example  you might be tempted to do this    lt p class  navbar-text text-success  gt Some Text Here lt  p gt    This will NOT work     navbar-text  overrides the color and replaces it with the standard navbar text color   The correct way to do it is to nest the text in a second element  EG    lt p class  navbar-text  gt  lt span class  text-success  gt Some Text Here lt  span gt  lt  p gt    or in my case  as I wanted emphasized text    lt p class  navbar-text  gt  lt strong class  text-success  gt Some Text Here lt  strong gt  lt  p gt    When you do it this way  you get properly aligned text with the height of the navbar and you get to change the color too

User · Answer

You can also apply the default  text  classes available from bootstrap itself    lt h1 class  text-info  gt Hey    I m blue lt  h1 gt    http   twitter github io bootstrap base-css html

User · Answer

In addition to  Connor Leech s answer   If you want to create a new custom typography type of your own  define the following in your css file    text-foo      text-emphasis-variant  FFFFFF       The mixin text-emphasis-variant is defined in Bootstrap s mixins less file

User · Answer

There are helper classes in bootstrap 3 with contextual colors please use these classes in html attributes    lt p class  text-muted  gt     lt  p gt   lt p class  text-primary  gt     lt  p gt   lt p class  text-success  gt     lt  p gt   lt p class  text-info  gt     lt  p gt   lt p class  text-warning  gt     lt  p gt   lt p class  text-danger  gt     lt  p gt    Reference  http   getbootstrap com css  type

User · Answer

You can add your own id or class to the body tag of your index page to target all elements on that page with a custom style like so    lt body id  index  gt      lt h1 gt     lt  h1 gt   lt  body gt    Then you can target the elements you wish to modify with your class or id like so    index h1      color red

User · Answer

you could use the font style  Like         lt font color  white  gt  lt h1 gt Header Content lt  h1 gt  lt  font gt

User · Answer

The best way to solve this problem would be by starting with customizing Bootstrap using their customization tools   http   getbootstrap com customize   Go down to  headings-color and change it from  inherit  to something that you would like your headers to be across the site  if you like the default just change it to  333    Note that this will keep all your headings the same color  as you requested    Now in order to accomplish what you want that after you make this change you can now overwrite them specifically in your own CSS to apply your own color to them  The  inherit  keyword I always have found to be a pain in frameworks

User · Answer

in bootstrap 3 here are the classes to change the text color    lt p class  text-muted  gt     lt  p gt    grey  lt p class  text-primary  gt     lt  p gt    light blue  lt p class  text-success  gt     lt  p gt    green  lt p class  text-info  gt     lt  p gt    blue  lt p class  text-warning  gt     lt  p gt    orangish yellow  lt p class  text-danger  gt     lt  p gt    red   Documentation under Helper classes - Contextual colors

[twitter-bootstrap] With Twitter Bootstrap, how can I customize the h1 text color of one page and leave the other pages to be default?

Examples related to twitter-bootstrap

Examples related to textcolor