Grow your CSS skills. Land your dream job.

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.

    http://twitter.github.com/bootstrap/scaffolding.html#responsive

    # 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?

    http://twitter.github.com/bootstrap/examples/marketing-narrow.html

    # January 31, 2013 at 11:15 am

    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:

    http://twitter.github.com/bootstrap/customize.html

    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:

    http://www.mharrisweb.co.uk/ss.htm

    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.

    Thankyou

    # February 8, 2013 at 7:55 am

    The is the old favourites

    http://960.gs/

    http://www.getskeleton.com/

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".