CODEWITHSUNDEEP
csstwitter-bootstrap
murtaza52
murtaza52

Reputation: 47431

Need help in setting background color to extend the length of the page

I am using twitter bootstrap, and doing my grid layout using its CSS classess. ( I am CSS noob)

I want to have a classic layout of a left column and right. However I do not want any margin between both the columns. Also the left column should start from the left pf the page and not have any margin too.

Bootstrap has a base fluid layout -

However the changes I wanto to do to the above are following -

1) Remove any left margin from the div.span2.

2) Remove any margins between div.span2 and div.span10

3) Give a background color to div.span1 which extends till the bottom of the page. Currently If I give it a background color it only shows for the section which has content. However I want it to go till the length of the page. How do I do it?

Any help will be appreciated.

Upvotes: 0

Views: 64

Answers (1)

Rahul
Rahul

Reputation: 5774

Well the 8px margin comes from User agent..

body {
display: block;
margin: 8px;
}

If you want your columns stuck to edges,

replace this from bootstrap.css

body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #333333;
  background-color: #f5f5f5; 
}

with 

body {
  margin: -8px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #333333;
  background-color: #f5f5f5;
}

To remove gap between two spans, just replace this from bootstrap.css

[class*="span"] {
  float: left;
  min-height: 1px;
  margin-left: 20px;
}

with 

[class*="span"] {
  float: left;
  min-height: 1px;
  margin-left: 0px;
}

I hope that resolves the issue

Upvotes: 1

Related Questions