I’m creating website using Ruby on rails3 with twitter-bootstrap.
I downloaded bootstrap.css from official website and set up.
It shows everything neat but hyper-link color.
I want it in blue color but all the hyper-lins are shown in black….
Can anyone tell me why?? I cannot figure out why
my code is
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<meta content="authenticity_token" name="csrf-param" />
<meta content="Ojw/+I3qfeT25/i6L8ipof4U44ytbGXwcwrzHyIOICM=" name="csrf-token" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-transition.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-alert.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-modal.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-dropdown.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-scrollspy.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-tab.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-tooltip.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-popover.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-button.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-collapse.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-carousel.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-typeahead.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap.js?body=1" type="text/javascript"></script>
<script src="/assets/communities.js?body=1" type="text/javascript"></script>
<script src="/assets/follows.js?body=1" type="text/javascript"></script>
<script src="/assets/messages.js?body=1" type="text/javascript"></script>
<script src="/assets/rails.js?body=1" type="text/javascript"></script>
<script src="/assets/registrations.js?body=1" type="text/javascript"></script>
<script src="/assets/top.js?body=1" type="text/javascript"></script>
<script src="/assets/user_profiles.js?body=1" type="text/javascript"></script>
<script src="/assets/users.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.core.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.datepicker.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/boostrap.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/communities.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/follows.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/messages.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/registrations.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/scaffolds.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/top.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/users.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/jquery.ui.core.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/jquery.ui.theme.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/jquery.ui.datepicker.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="images/favicon.ico" rel="shortcut icon">
<link href="images/apple-touch-icon.png" rel="apple-touch-icon">
<link href="images/apple-touch-icon-72x72.png" rel="apple-touch-icon" sizes="72x72">
<link href="images/apple-touch-icon-114x114.png" rel="apple-touch-icon" sizes="114x114">
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a href="/" class="brand">Test</a>
<div class="pull-right">
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
<i class="icon-user"></i>
John <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="/users/edit"><i class="icon-cog"></i> Edit</a></li>
<li class="divider"></li>
<li>
<a href="/logout"><i class="icon-chevron-up"></i> Log out</a>
</li>
</ul>
</div>
</div>
<div class="container nav-collapse">
<ul class="nav">
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container wrapper">
<div class="content">
<div class="row">
<div class="span12">
</div>
</div>
<div class="row">
<div class="span9">
<ul class="breadcrumb" id=""><li><a href="/">TOP</a><span class="divider">/</span></li><li><a href="/messages/received">Messages</a><span class="divider">/</span></li></ul>
<div class="well sidebar-nav">
<div class="page-header">
<h1>
Received Messages
</h1>
</div>
<table class="table table-striped table-hover table-condensed">
<thead>
<tr>
<th>delete</th>
<th>ID</th>
<th>Unread</th>
<th>Date</th>
<th>
From
</th>
<th>Subject</th>
</tr>
</thead>
<tbody>
<form accept-charset="UTF-8" action="/messages/discard?via=post" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="Ojw/+I3qfeT25/i6L8ipof4U44ytbGXwcwrzHyIOICM=" /></div>
<tr>
<td><input id="id_" name="id[]" type="checkbox" value="6" /></td>
<td>6</td>
<td></td>
<td>December 13, 2012</td>
<td>
Mike</td>
<td><a href="/messages/show/6?breadcrumb=inbox">Re: Re: ssss</a></td>
</tr>
<tr>
<td><input id="id_" name="id[]" type="checkbox" value="5" /></td>
<td>5</td>
<td></td>
<td>December 13, 2012</td>
<td>
Mike</td>
<td><a href="/messages/show/5?breadcrumb=inbox">Re: Re: ssss</a></td>
</tr>
<tr>
<td><input id="id_" name="id[]" type="checkbox" value="1" /></td>
<td>1</td>
<td></td>
<td>December 13, 2012</td>
<td>
Mike</td>
<td><a href="/messages/show/1?breadcrumb=inbox">ssss</a></td>
</tr>
<input class="btn btn-mini btn-danger" name="commit" type="submit" value="delete checked items" />
</form> </tbody>
</table>
</ br>
<div class='text-align:center;'>
</div>
</div>
</div>
<div class="span3">
<div class="well sidebar-nav">
<h3>Menu</h3>
<ul class="nav nav-list">
<li class="nav-header">Account</li>
<li>
<a href="/users/edit"><i class="icon-cog"></i> User Edit</a>
</li>
<li class="divider"></li>
<li class="nav-header">Messages</li>
<li><a href="/messages/received"><i class="icon-envelope"></i> Received</a></li>
<li><a href="/messages/sent"><i class="icon-share-alt"></i> Sent</a></li>
<li><a href="/messages/trash"><i class="icon-trash"></i> Trash</a></li>
<li class="divider"></li>
<li class="nav-header">Lists</li>
<li><a href="/users"><i class="icon-envelope"></i> User List</a></li>
<li><a href="/communities"><i class="icon-share-alt"></i> Community List</a></li>
</ul>
<br />
</div><!--/.well -->
</div>
</div><!--/row-->
</div><!--/content-->
</div> <!-- /container -->
<footer>
<br />
<br />
<p><center>© 2012 Test</center></p>
</footer>
</body>
</html>
By default, Bootstrap links are blue. Somewhere in that massive stack of CSS files is a rule set that looks a least a little something like this:
If you use Firefox with Firebug or Chrome Developer Tools, you can inspect any of your anchor elements and see exactly where the offending rule set is located.
Alternatively, you could put this rule set at the bottom of the last CSS file to be loaded: