Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Confused about width, how to set to 960 or so #2582

Closed
tomrogers opened this Issue · 5 comments

4 participants

@tomrogers

I''m working on a new website for a non-profit using the basic marketing site which measures out at around 1,277 pixels wide. I'd rather have something around 960-1000px wide. The css files include many variations, and I have found no comments or instructions anywhere. The customize feature by default is set to create a style sheet with 12 columns at 60px, with 20px gutters. That sounds like a 960 grid, but you end up with more than that. I think what is messing me up is a grid setup (way down the style sheet) with a container width of 1170 (span12). How can I limit the width?

@jszakmeister

I'm not sure where you're seeing that. Looking at the stylesheet here https://github.com/twitter/bootstrap/blob/master/docs/assets/css/bootstrap.css#L170, I see:

.span12 {
  width: 940px;
}

I double checked with the customized download, and it was identical to the pre-built assets. Are you sure you didn't change any settings? BTW, Bootstrap does give you a 960 grid by default. The width above is a little misleading because you don't see where they set the left margin to -20px for a row.

@tomrogers

The bootstrap.css file I got from the standard download is the pretty much the same as the one you get when you go with the default settings at the customize page. Each has:
.container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 1170px;
}
.span12 {
width: 1170px;
}
If you have any doubt about the width, take a pixel ruler and measure any page at the http://twitter.github.com/bootstrap.
BTW, there is also a section for min width 768px and max width 979px which I assume is for tablets:
.container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 724px;
}

@mdo
Admin

The 1170px is the responsive CSS—it widens the layout to fill more of the user's available screen. You can remove that (find all the media queries) to lock it in at a max of 940px instead (the default).

@mdo mdo closed this
@tomrogers

Thanks markdotto, I did try using Firebug to locate the offending css, but the code view it sees is related to how Firefox sees the page, and there is way more code in the css than the few lines showing in Firebug. But you got me to take another look, and I realized that I didn't comment out enough of the code. For anyone that finds themselves in a similar situation, search for:

@media (min-width: 1200px) {

It's down at the bottom. Comment that line all the way to the bottom. It worked for me, although maybe later on I'll find something wrong, in which case I'll come back and share my findings.

The stated goal of Bootstrap is "help people of all skill levels—designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex." I'm by no means a beginner, but some instructions go a long way. There could be a lot of comments built into the css, or perhaps a version with comments could be made?

@jauhari

Thanks... we found it and it's works

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.