CODEWITHSUNDEEP
htmltwitter-bootstrapcsscontainersbackground-color
sim
sim

Reputation: 127

Change background-color of element inside container-fluid

How can I change the background color of my h3 element which is nested within a container-fluid element?

I've set a background color for the whole container fluid but I'd like the h3 element to have a different background-color. I imagine the h3 is underneath the container-fluid but I can't work out how to change the hierarchy.

Here's my html:

<section class="container-fluid" id="portfolio">

<h3 id="portfolio-title">PORTFOLIO</h3>

And the CSS:

.container-fluid {
padding: 0 !important;
}

#portfolio-title {
background-color: #2E3747;
}

#portfolio {
background-color: #EFF0F0;
}

Thanks for your help!

Upvotes: 4

Views: 14395

Answers (3)

neophyte
neophyte

Reputation: 6624

Your code has nothing wrong in it..this is the way to go

working snippet

.container-fluid {
padding: 0 !important;
}

#portfolio-title {
background-color: blue;
color: red;
}

#portfolio {
background-color: green;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<section class="container-fluid" id="portfolio">

<h3 id="portfolio-title">PORTFOLIO</h3>

Upvotes: 0

kubre
kubre

Reputation: 166

Try this CSS

#portfolio {
background-color: #EFF0F0;
}

#portfolio #portfolio-title {
background-color: #2E3747 !important;
}

I've just moved the portfolio up then h3 to down and made it important

Upvotes: 2

Kay
Kay

Reputation: 350

Let's try this code

#porfolio:not(#portfolio-title) {
     background-color: #EFF0F0;
}



#portfolio-title {
     background-color: #2E3747;
}

Select .container-fluid but not porfolio-title.
Hope this help.

Upvotes: 2

Related Questions