CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
fusi0n
fusi0n

Reputation: 1079

Twitter bootstrap fluid row background

I would like to add a unified background to all of the div-s with span indexed from 2-11. The HTML is as follows:

<html>
<body>
<div class="container-fluid">
    <div class="row-fluid">
        <div class="span1"></div>
        <div id="main_div">    <!--Background starts here !!! -->
    <div class="span2" id="timetable">Timetable</div>
    <div class="span6" id="game_window">Game window</div>
            <div class="span2" id="stuff">Stuff</div>
        </div>                <!--Background ends here !!! -->
        <div class="span1"></div>
    </div><!--row-fluid-->
</div><!--container-fluid-->

The supposed background is marked with comments also. The background should be for div#main_div. At the moment this way if I add a background color to #main_div it will set it as the bgcolor of all of the span elements.

All help is appreciated.

Upvotes: 1

Views: 4591

Answers (3)

Kami
Kami

Reputation: 19437

You need to modify your html to wrap the inner span elements within a row.

Try something like

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span1"></div>
        <div class="span10">
           <div class="row-fluid" id="main_div">    <!--Background start!!! -->
              <div class="span2" id="timetable">Timetable</div>
              <div class="span6" id="game_window">Game window</div>
              <div class="span2" id="stuff">Stuff</div>
           </div>                <!--Background end!!! -->
        </div>
        <div class="span1"></div>
    </div><!--row-fluid-->
</div><!--container-fluid-->

now, if you add the background it will be applied to the required elements only.

eg,

#main_div {
   background:orange;
}

see a full fiddle at - http://jsfiddle.net/YTJub/

Upvotes: 1

Tate Reynolds
Tate Reynolds

Reputation: 113

Could you not open the .CSS file and change the span 2 - 11 classes to have the background orange?

I believe its about halfway down in boostrap.css as follows:

.span12 {
width: 940px;
}

just add:

 .span12 {
width: 940px;
background-color:orange;
}

Upvotes: 0

franchez
franchez

Reputation: 567

Apply an unified one by exluding bad ones as follow:

#main_div :not(.span1, .span12) {background-color:#f00 }

Note that these CSS3 selectors don't work on all browsers, particularly older versions of Internet Explorer will happily ignore them.

Upvotes: 0

Related Questions