CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user5719239
user5719239

Reputation:

using multiple colors of background to the web

Sorry if the title is little bit misleading. What I'm trying to do is to cover my background of index page with really light grey except for the section that displays my contents. 

<div class="col-sm-1">
</div>
<div class="col-sm-8">
</div>
<div class="col-sm-3">
</div>

I want col-sm-8 to be the only white, and rest to be all grey. I can make col-sm-8 grey using css, but how do I do the opposite?

Upvotes: 4

Views: 80

Answers (7)

ketan
ketan

Reputation: 19341

I think you want like following.

You can do opposite this way.

div:not(.col-sm-8){
 background-color:grey; 
}
<div class="col-sm-1">test1
</div>
<div class="col-sm-8">test8
</div>
<div class="col-sm-3">test3
</div>

Or Use following using class selector.

[class*="col-sm-"]:not(.col-sm-8){
 background-color:grey; 
}
<div class="col-sm-1">test1
</div>
<div class="col-sm-8">test8
</div>
<div class="col-sm-3">test3
</div>

Working Fiddle

Read more about :not here.

Upvotes: 1

Little Phild
Little Phild

Reputation: 805

You can also style elements individually.

.col-sm-1{
width:100%;
height:100px;
background:grey;
}
.col-sm-8{
width:100%;
height:100px;
background:white;

}
.col-sm-3{
  width:100%;
  height:100px;
 background:grey;
}

But if your using entirely bootstrap in your project you have to avoid giving styles to bootstrap builtin classes.

Upvotes: 1

Ruwini opatha
Ruwini opatha

Reputation: 21

Either using the inline designing you can use

<div style="color:#0000FF"> //use the div name

or else you can use css to design it

[class*="col-"] {
    background : grey;
}

.col-sm-8{
  background: white;
}

Upvotes: 1

Shijin TR
Shijin TR

Reputation: 7768

You can use selector like [class*="col-"]:not(.col-sm-8) 

[class*="col-"]:not(.col-sm-8){
 background-color:grey; 
}
<div class="col-sm-1">1
</div>
<div class="col-sm-8">2
</div>
<div class="col-sm-3">3
</div>

Upvotes: 1

HTMLNoob
HTMLNoob

Reputation: 821

I believe the answer provided by Jinu Kurian sounds like the answer that you want but in case the answer is that you want everything light grey and col-sm-8 with a background of white. This should work.

.container {
  background-color: grey;/*Replace this with a hex color value of a light grey to your preferance*/
  }
.col-sm-8 {
    background-color: white;
  }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

  <div class="container">
  <div class="col-sm-1">
    <p>Lorem ipsum sit amet</p>
  </div>
  <div class="col-sm-8">
    <p>Lorem ipsum sit amet</p>
  </div>
  <div class="col-sm-3">
    <p>Lorem ipsum sit amet</p>
  </div>
  </div>

Upvotes: 0

Anil Panwar
Anil Panwar

Reputation: 2622

Instead of bootstrap class put your own style(inline-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>

<div class="container bg-info">

container <br/>container <br/>
 <div class="col-sm-1 bg-warning">
k
</div>
<div class="col-sm-8 bg-success">
k
</div>
<div class="col-sm-3 bg-warning">k
</div>

container <br/>container <br/>
</div>

Upvotes: 1

Jinu Kurian
Jinu Kurian

Reputation: 9416

Try this 

[class*="col-"] {
    background : grey;
}

.col-sm-8{
  background: white;
}

well, what [class*="col-"] selector do is that it will give grey background to the values of class attributes begin with col-

You can style individual classes by writing its full class name.

Upvotes: 3

Related Questions