Search

Solved: Bootstrap Default Button Text is White in Chrome

    Ankita Raikundalia
Listen to this article

If an interface element, say a button on your page, was styled differently in a particular browser, it would imply, that styling is being overridden by the browser’s (also known as the user agent) stylesheet. There was a similar situation with the styling of the default button in Bootstrap, in Google Chrome.

 

How the Bootstrap Buttons are actually Styled

Bootstrap All Buttons

 

But the Default Button Text was styled differently in Chrome…

The Bootstrap default button looked fine in other browsers, but in Google Chrome, the text color for the default button was white.

Bootstrap Default Button in Chrome

And since the button color is a gray gradient, this text was barely visible. This happened because the default styling was being overridden.

 

What is the case of this Problem?

We had to investigate a bit before finding the actual problem. This happened because we had the Redmine Extended v1.4 Chrome Extension installed in our browser. This extension also defined a class “.btn” in the stylesheet, which specifies a white font color, overriding the “.btn” class by Bootstrap stylesheets.

We could verify this by disabling the extension.

 

How to solve this problem

The easiest way to solve this is to change the classname “.btn”, to “.btn_redmine” (or any other non-generic class name), in redmine.js and style.css of the Redmine Extended Chrome Extension.

You  can find these files at “\AppData\Local\Google\Chrome\UserData\Default\Extensions\mkpkclfhemlehfbeinbjnbjebbikgfpb\1.4_0”

Once you rename the class, you will be able to view the default button properly, at your end.

 

But….

Redmine Extended v1.4 could be one of many such extensions which use the “.btn” class.

Hence, if you are a web designer or developer, and using Bootstrap for your project, it is recommended that you do not edit the Redmine Extension files. You can instead, add a class “.btn-default”, in your own custom stylesheet, and specify a desired font color.  This will be a more solid solution, because there maybe other extensions, which also specify a “.btn” class.

[pre].btn-default{
color:#333!important;
}[/pre]

“.btn-default” class is already present in Bootstrap v3.1.1. The default Bootstrap button is styled with this class. By adding “!important” for an attribute, you can force this rule to be applied while styling a button with the class btn_default.

 

By adding the above code, you can ensure that other buttons in your website, won’t get affected, even if the end user is using Redmine Extended 1.4 extension for Google Chrome.

Reference:
http://stackoverflow.com/questions/9246896/twitter-bootsrap-button-text-is-white-on-chrome

[space]

Ankita Raikundalia

Ankita Raikundalia

Leave a Reply

Your email address will not be published. Required fields are marked *

Get The Latest Updates

Subscribe to our Newsletter

A key to unlock the world of open-source. We promise not to spam your inbox.

Suggested Reads

Join our 55,000+ Subscribers

    The Wisdm Digest delivers all the latest news, and resources from the world of open-source businesses to your inbox.

    Suggested Reads