The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

CSS Bootstrap framework- max width 960px?

  • # January 30, 2013 at 6:52 am

    Hi Folks,

    Is there a way I can limit the width to 960px?

    1200px is too wide for my site design, content is too spaced out it needs more white space.

    Many thanks

    # January 30, 2013 at 8:16 am

    You can but it won’t be responsive.

    >The default Bootstrap grid system utilizes 12 columns, making for a **940px wide container without responsive features enabled**.

    >With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.

    # January 30, 2013 at 8:18 am

    I think you could tinker with the responsive versions but you would have to remove any media queries relating to larger sizes.

    # January 30, 2013 at 8:37 am

    So if I take out the media queries for bigger resolutions, the layout will be fixed for 940px, and the grid will adapt for lower resolutions?

    Thanks again

    # January 30, 2013 at 8:43 am

    To do this do I need to modify bootstrap-responsive.css and take out everything between:

    @media (min-width: 1200px) {


    Thanks again

    # January 30, 2013 at 8:45 am

    Try just commenting it out and see.

    # January 31, 2013 at 10:53 am

    Thanks for the replies.

    Can I use this fixed width layout, but change the width to 960px instead of 720px?

    # January 31, 2013 at 11:15 am

    This reply has been reported for inappropriate content.

    All you have to do to make it 960px wide is change the max-width on the container-narrow to 960px.

    # February 8, 2013 at 5:43 am

    Hi there,

    Using the customized version for bootstrap:

    Can anyone please tell me what Grid system values I need to use for a 960px layout?

    # February 8, 2013 at 6:32 am

    >Can anyone please tell me what Grid system values I need to use for a 960px layout?

    Bootstrap isn’t set up to provide a 960 grid. You would have to adapt one of their existing layout options manually.

    # February 8, 2013 at 7:53 am

    Thanks for the reply, I have an example layout here:

    I’m using a span 8 and span 4 for a two column layout, but my columns are too wide for the 960 layout and the divs are clearing each other.

    Are there any default 960 grids I can use? What values should I be using?

    Sorry if I’m not understanding.


    # February 8, 2013 at 7:55 am

    The is the old favourites

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed