CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user1010101
user1010101

Reputation: 1658

Trouble with background color in bootstrap

I have a simple page that I am building using bootsrap for my front end. Here is my FIDDLE.I am having some issues with customizing the background color.

The following is what my current page looks like. As you can see there is a header, body and footer. enter image description here

What I want to achieve is something like this enter image description here

Basically I want two different colours in the body. I want the body to have different color above favorites.I do not want to make any changes to my footer or header code because they will be treated as different components. So the approach I thought is i can put all the divs above the favorite title in a separate div and achieve this but I am having issues. Take a look at this attempt in my FIDDLE The color is carrying over beyond the favorites area.

I would appreciate any suggestions.

Following is my HTML code

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid" style="border-bottom: 2px solid #CDCCC9; background-color: blue">
    <div class="row">
        <div class="col-sm-2"></div>

        <div class="col-sm-2">
            &emsp;
            <!-- navbar header -->
            <div class="navbar-header">                 
                <!-- brand -->
                <img src="assets/images/fe-logo.png" alt="." style="padding-top:10px;padding-left:30px;padding-bottom:30px;"/>
                <!-- / brand -->
             </div>
            <!-- / navbar header -->
        </div>
        <div class="col-sm-8"> 
            <!-- navbar right -->
            <!-- ToDo - note that there is a hard-coded name in navbar for now - will need to be dynamically set -->
            <ul class="nav navbar-nav navbar-right">       
                <li class="navbar-brand">

                </li>
            </ul>
            <!-- / navbar right -->
        </div>
    </div>
  </div>
</nav>

<!-- HEADER ENDS HERE -->



 <div id="main" class="container-fluid searchPage-wrapper">
    <div class="row">
        <div class="col-lg-4">
        </div> 
        <div class="col-lg-8">
            <div id="searchPage-small-title">NBA</div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-4">
        </div> 
        <div class="col-lg-8">
            <div id="searchPage-title">Player Portal</div>
        </div>    
    <div class="row">
        <div class="col-lg-12">  
            <div class="searchPage-box text-left">           
                <form role="form" class="form-inline" ng-submit="submit()">             
                  <div class="form-group">             
                    <div class="row">
                        <div class="col-lg-11">
                            <input type="text" class="searchPage-input" autocomplete="off"  ng-model="selected" placeholder="Search Player"
                                typeahead="sponsor as label(sponsor) for sponsor in sponsorList
                                | filter:$viewValue | limitTo:12" typeahead-editable="true" typeahead-min-length="2"
                                required="" name="sponsorName">
                        </div>          
                        <div class="col-md-1">      
                        <!-- using Bootstrap default for button -->


                        </div>                   
                    </div>
                </div>  
              </form> 
            </div>      
        </div>
    </div>  

    <div class="row">
        <div class="col-lg-4">
        </div> 
        <div class="col-lg-8">
            <div id="searchPage-favorites-title" class="row">FAVORITES</div>
        </div>
    </div>


    <div class="row">
        <div class="col-sm-4">
        </div>

        <!-- this favorites are hard-coded for now for purposes of demo -->
        <div class="col-sm-2 searchPage-favorites-item" >
            <i class="fa fa-star"></i>
            Lebron
        </div>
        <div class="col-sm-2 searchPage-favorites-item" >
            <i class="fa fa-star"></i>
            Curry
        </div>
        <div class="col-sm-2 searchPage-favorites-item" >
            <i class="fa fa-star"></i>
            Jordan
        </div>

    </div>
    <div class="row">
        <div class="col-sm-12">
            &nbsp;
        </div>      
    </div>
        </div>      
    </div>
     <div class="row">
        <div class="col-sm-12">
            &nbsp;
        </div>      
    </div>    
    <div class="row">
        <div class="col-sm-12">
            &nbsp;
        </div>      
    </div>   
    <div class="row">
        <div class="col-sm-12">
            &nbsp;
        </div>      
    </div>
<div class="main-footer wrapper b-t">
    <div class="row">
        <div class="col-sm-2">
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
        &nbsp;
        </div>
    </div>  
    <div class="row">
        <div class="col-sm-3">
        </div>      
        <div class="col-sm-9 subtext">    
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        BLAH BLAH BLAH BLAH BLAHBLAH BLAH BLAH BLAH BLAHBLAH BLAH BLAH BLAH BLAH&#174;BLAH BLAH BLAH BLAH BLAH
        </div>
    </div>
    <div class="row">
        <div class="col-sm-3">
        </div>         
        <div class="col-sm-9 subtext">    
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        BLAH BLAH BLAH BLAH BLAHBLAH BLAH BLAH BLAH BLAHBLAH BLAH BLAH BLAH BLAH
        </div>
    </div>
    <div class="row">
        <div class="col-sm-3">
        </div>         
        <div class="col-sm-9 subtext">  
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        BLAH BLAH BLAH BLAH BLAHBLAH BLAH BLAH BLAH BLAH
        </div>
    </div>      
    <div class="row">
        <div class="col-sm-3">
        </div>              
        <div class="col-sm-9 subtext"> 
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        BLAH BLAH BLAH BLAH BLAHBLAH BLAH BLAH BLAH BLAHBLAH BLAH BLAH BLAH BLAH
        </div>
    </div>  
    <div class="row">
        <div class="col-sm-3">
        </div>              
        <div class="col-sm-9 subtext"> 
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        BLAH BLAH BLAH BLAH BLAH
        </div>
    </div>      

</div>

Upvotes: 1

Views: 550

Answers (3)

claudios
claudios

Reputation: 6656

Try this simple one and hope it could help you.

HTML

<html>
  <head>
    <!--<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet" type="text/css" />-->
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div id="player">
          Top here
        </div>
      </div>
      <div class="row">
        <div id="favorites">
          favorites
        </div>
      </div>
      <div class="row">
        <div id="footer">
          footer
        </div>
      </div>
    </div>
  </body>
</html>

CSS

body {background-color: blue;}
#player {
  background-color: white;
  padding: 25px; 
}
#favorites {
  background-color: #00897b;
  padding: 25px; 
}
#footer {
  background-color: #a5a5a5;
  padding: 25px; 
}

Upvotes: 1

Johannes
Johannes

Reputation: 67768

The area you want to add that background to is not one single container, but can only be addressed via several containers. So first create a CSS rule for a class which has the desired background:

.x1 { background: #fa0; }

Then add that class to all containers that should be affected in HTML. Just have a look in this fiddle where I added it:

https://jsfiddle.net/02j94gmo/1/

Upvotes: 1

AchmadJP
AchmadJP

Reputation: 903

Sorry, my connection is to slow to open the jsfiddle, but I got the idea. Basically, you just have to separate the div and then give the appropriate color to that div.

//navbar
<div class="container-fluid">
    <div class="row bg-success">//bg-success is green color
        //player portal
        //search form
    </div>

    <div class="row">
        //favorites
    </div>
</div>
//footer

And what you try to do is give color to the both section, that is why both section got the same background color.

UPDATE Here the example : Here

Upvotes: 1

Related Questions