Login/Register
With Twitter Bootstrap, how can I customize the h1 text color of one page and leave the other pages to be default?
Asked Answered
Solved twitter-bootstraptextcolor
S

8

24

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?

Shopkeeper answered 22/6, 2012 at 18:50 Comment(0)
L
25

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:

<body id="index">
   <h1>...</h1>
</body>

Then you can target the elements you wish to modify with your class or id like so:

#index h1 {
   color:red;
}
Lungi answered 22/6, 2012 at 19:7 Comment(4)
is there a built class for this functionality – Rounded
@GavindraKalikapersaud YES. See Connor Leech's answer below. – Daugherty
Beware, this solution works with custom colors without changing text contextual colors. This answer is perfect for OP question. Maybe you are looking for other thing. – Stasny
This is a really good answer contextually. Using the solutions below you will run the risk of adding meaningless classes to elements. "text-success" just to get a green color is a bad practice. Bootstrap also supplies the ability to customize coloring and other elements on their site (see my answer below). – Onida
W
105

in bootstrap 3 here are the classes to change the text color:

<p class="text-muted">...</p> //grey
<p class="text-primary">...</p> //light blue
<p class="text-success">...</p> //green
<p class="text-info">...</p> //blue
<p class="text-warning">...</p> //orangish,yellow
<p class="text-danger">...</p> //red

Documentation under Helper classes - Contextual colors.

Wamble answered 17/10, 2013 at 9:24 Comment(2)
Far better solution that accepted answer. Side link: getbootstrap.com/css/#helper-classes – Roundel
Actually, however this is a very good answer, doesn't work for custom color without change the text contextual color. Maybe you can upvote this answer because is good, but the real answer to the OP question is the accepted. – Stasny
L
25

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:

<body id="index">
   <h1>...</h1>
</body>

Then you can target the elements you wish to modify with your class or id like so:

#index h1 {
   color:red;
}
Lungi answered 22/6, 2012 at 19:7 Comment(4)
is there a built class for this functionality – Rounded
@GavindraKalikapersaud YES. See Connor Leech's answer below. – Daugherty
Beware, this solution works with custom colors without changing text contextual colors. This answer is perfect for OP question. Maybe you are looking for other thing. – Stasny
This is a really good answer contextually. Using the solutions below you will run the risk of adding meaningless classes to elements. "text-success" just to get a green color is a bad practice. Bootstrap also supplies the ability to customize coloring and other elements on their site (see my answer below). – Onida
R
9

You can also apply the default 'text' classes available from bootstrap itself

 <h1 class='text-info'>Hey... I'm blue</h1>

http://twitter.github.io/bootstrap/base-css.html

Refulgent answered 6/6, 2013 at 6:49 Comment(0)
C
3

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:

<p class="navbar-text text-success">Some Text Here</p>

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:

<p class="navbar-text"><span class="text-success">Some Text Here</span></p>

or in my case (as I wanted emphasized text)

<p class="navbar-text"><strong class="text-success">Some Text Here</strong></p>

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.

Crews answered 22/1, 2015 at 0:33 Comment(0)
M
1

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.

Mercedezmerceer answered 21/5, 2014 at 22:29 Comment(0)
C
1

There are helper classes in bootstrap 3 with contextual colors please use these classes in html attributes.

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

Reference: http://getbootstrap.com/css/#type

Centurial answered 28/5, 2017 at 4:56 Comment(0)
O
0

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.

Onida answered 18/7, 2017 at 13:53 Comment(0)
P
-2

you could use the font style Like:

     <font color="white"><h1>Header Content</h1></font>
Ploy answered 5/3, 2017 at 13:15 Comment(1)
Font tag? That was deprecated a decade ago. – Physic

© 2022 - 2024 — McMap. All rights reserved.