CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3css-selectors
Rikke
Rikke

Reputation: 9

<span> inside a Bootstrap well

Here is my problem: I would like to use <span> to color a date inside a bootstrap .well. Here is a part of my code:

  .cv span.date{
	font-weight:bold !important;
	color: #5882FA !important;
  }
<div id="cv" class="container text-center">
  <div class="row">
    <div class="col-sm-4">
      <div class="well"><span class="date">2016-2018</span> I ate sandwiches </div>
    </div>
  </div>
</div>

Here is the problem: No matter what I do, the <span>'s content inherit the .well's properties. I've already tried to give an "id" to the span instead of a "class", and to put the color and bold properties inside the <span> balise. How can I put my date in bold and color?

Upvotes: 0

Views: 267

Answers (3)

Sebastian Brosch
Sebastian Brosch

Reputation: 43574

Your container <div> is using an id #cv not a class .cv. You can also be more specific on your CSS rule of the <span>:

#cv div.well span.date {
  color: #5882FA;
  font-weight: bold;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div id="cv" class="container text-center">
  <div class="row">
    <div class="col-sm-4">
      <div class="well"><span class="date">2016-2018</span> I ate sandwiches </div>
    </div>
  </div>
</div>

Upvotes: 1

Johannes
Johannes

Reputation: 67778

That can only happen if .well

1.) has a CSS rule with higher specifity and also uses !important, or

2.) if the rule for .well follows after your rule for .cv span.date, has at least the same specifity and also uses !important

So try to give your rule a specifity as high as possible. From your piece of code, the selector with the highest possible specifity would be 

div#cv.container.text-center > div.row > div.col-sm-4 > div.well > span.date {
  font-weight:bold !important;
  color: #5882FA !important;
}

Upvotes: 0

Adam
Adam

Reputation: 1159

In your CSS selector, you are calling .cv - which is incorrect, since cv is an ID:

 #cv span.date{
    font-weight:bold;
    color: #5882FA;
  }

Upvotes: 0

Related Questions