CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
aceminer
aceminer

Reputation: 4295

Css not imported into html

My folder structure is like this

index.html css/styles.css

Html code:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/styles.css" />
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading panel-heading-custom">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

</body>
</html>

css/styles.css

@import url('//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css');

.panel-default > .panel-heading-custom {
    background: #ffaa00; color: #aaa;
}

However, it appears that the panel colour does not change at all. Apparently it works on this jsfiddle and i copied and pasted the code.

http://jsfiddle.net/a0y0qmns/

Upvotes: 2

Views: 96

Answers (3)

Nischay Malhan
Nischay Malhan

Reputation: 111

Simply a case of bootstarp over-riding your custom css files. In the head section of your html place your styles.css below bootstrap.css. Then in styles.css you have to use the exact same selector for the element you want to override.

Upvotes: 3

Nabi
Nabi

Reputation: 774

just change .panel-heading-custom to .panel-heading

@import url('//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css');
.panel-default > .panel-heading {
  background: #000;
  color: #fff;
}

FIDDLE: http://jsfiddle.net/a0y0qmns/1/

Upvotes: 2

ketan
ketan

Reputation: 19341

Just include file in this sequence.

 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
 <link rel="stylesheet" href="css/styles.css" />

styles.css after bootstrap.min.css because bootstrap css overwrite the style css.

Upvotes: 3

Related Questions