twitter bootstrap responsive container with padding and a border

Written by james on July 31, 2012 — 3 Comments

I’m working on a project where I wanted to use the twitter bootstrap responsive css scaffolding, but ran into a bit of a snafu because I needed to add a border and background to the container class.

I decided to extend the @media responsive stylesheet declarations to achieve this. The padding is not quite as much as I would like, but its better than having the span divs right up on the edges of the container div and I’m too lazy to edit all the span widths.

.container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
	width: 940px;
	padding: 10px;
	border:1px solid #cecece;
	border-top:0px none;
	background:#fff;
}
@media (max-width: 767px) {
  body{
    padding-left: 0px;
    padding-right: 0px;
  }
  .container{
    padding:5px 19px;
    width: auto;
  }
}
@media (min-width: 768px) and (max-width: 979px) {
  .container,
  .navbar-fixed-top .container,
  .navbar-fixed-bottom .container {
    width: 724px;
    padding:10px 14px;
  }
}
@media (min-width: 1200px) {
  .container,
  .navbar-fixed-top .container,
  .navbar-fixed-bottom .container {
    width: 1170px;
    padding:10px 14px;
  }
}

3 Comments to “twitter bootstrap responsive container with padding and a border”

You can follow all the replies to this entry through the comments feed.

Aaron

August 19, 2012 at 4:25 pm | Permalink

Hey man, thanks for the tip. Can you tell me if you put this extension code straight into bootstrap-responsive.css, or do you put it in your own file for inclusion afterwards?
james

August 19, 2012 at 7:37 pm | Permalink

No problem =) I just put this in my own stylesheet included after bootstrap css which overrides those style declarations.
Chim

October 12, 2012 at 4:59 am | Permalink

Great solution