Bootstrap is a new concept to me, but I am starting to appreciate the grid system it offers.
I have successfully created a test layout using Bootstrap, however, the one thing I am struggling with is adding a background around certain rows.
Can anyone guide me on how to add padding on the left and right sides of my layout?
Below is an example of what I have done so far:
<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html; charset=UTF-8">
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="container" id="container">
<div id="header" class="row">
<div class="span12">Hallo123</div>
</div>
<div id="main" class="row">
<div class="span10" id="one">
<div class="row">
<div class="span2">Hallo1</div>
<div class="span2">Hallo2</div>
<div class="span2">Hallo3</div>
<div class="span2">Hallo4</div>
<div class="span2">Hallo5</div>
</div>
</div>
<div class="span2" id="two">Hallo2</div>
</div>
</div>
</body>
</html>
CSS:
#main {
background-color: white;
box-shadow: 0px 0px 6px #888;
}
#header .span12 {
background-color: #DD1144;
}
#container {
background-color: #DF8505;
}
#one, #two, #three, #four {
background-color: #0088CC;
}