CODEWITHSUNDEEP
csstwitter-bootstrap-3
klbm9999
klbm9999

Reputation: 41

Bootstrap button color not working, but working in jsfiddle

The button color is not blue when i use the btn-info class, but works fine when i tried in jsfiddle. 

<!DOCTYPE html>
<html>
<head>
<title>my app</title>

<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/icon?family=Material+Icons">

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap-material-design.min.css">
<link rel="stylesheet" type="text/css" href="css/ripples.min.css">

</head>
<body>  

<!-- carousel code here -->

<a href="#" type="button" class="btn btn-info">Click here</a>

</body>
</html>

screenshot

Upvotes: 0

Views: 4306

Answers (3)

Carl Angelo Nievarez
Carl Angelo Nievarez

Reputation: 573

I think there are conflict between the material-bootstrap and bootstrap stylesheets. Try commenting one ans leave the other one, it should work. And if you do not want that way ,try manually via CSS coding, try the following:

.btn-info {
color: #fff;
background-color: #5bc0de;
border-color: #46b8da;}

Upvotes: 1

neophyte
neophyte

Reputation: 6626

I think you have some problem with your bootstrap file try using these cdns.

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Working fine here

<!DOCTYPE html>
<html>
<head>
<title>my app</title>

<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/icon?family=Material+Icons">

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap-material-design.min.css">
<link rel="stylesheet" type="text/css" href="css/ripples.min.css">

</head>
<body>  

<!-- carousel code here -->

<a href="#" type="button" class="btn btn-info">Click here</a>

</body>
</html>

Upvotes: 0

Alix
Alix

Reputation: 1

Did you try :

"background-color:#000;"

for example on .btn-info ?

Upvotes: 0

Related Questions