Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Rocky Balboa
Rocky Balboa
19,039 Points

Bootstrap grid system

I have a question I need to use a front end frame work to create a mobile responsive site > bootstrap comes to mind . However i need to set different break points such as

Max 1024px

= 840px <840px =620px <620px

I tried to set them in the custom section of bootstrap however this is not really working because I don't think I am doing it right.

Please could some one advise..

thanks

3 Answers

elk6
elk6
22,916 Points
elk6
elk6
22,916 Points

Hi Tej,

Can you tell me what you did in the costum settings? Last few times i tried it worked pretty good.

At http://getbootstrap.com/customize/#media-queries-breakpoints you can provide the breakpoints. Set @screen-lg to 1024px, @screen-md to 840px etc.

You can always go into the files after downloading but this can be a pain. Especially since you need to go into the minified version.

  • Elian
Rocky Balboa
Rocky Balboa
19,039 Points
Rocky Balboa
Rocky Balboa
19,039 Points

Hi Elian,

thanks for answering my question so quickly did the custom break points as follows:

@screen-lg - 1024px @screen-md - 840px @screen-sm - 620px @screen-xs - 480px ??

@container-large-desktop (1140px + @grid-gutter-width) should this not be ->1024px

elk6
elk6
22,916 Points

The @screen-lg breakpoints are the classes which define when your layout breaks from inline to stacked. For example: If you define:

<div class="container">
      <div class="row">
        <div class="col-md-4">Some content</div>
        <div class="col-md-8">Some content</div>
     </div>
 </div>

The two columns will appear next to each other on any screen above the md media query. So if you define 840px as your @screen-md, the columns will appear nexto to each other on screens above that and will get stacked on screens smaller than 840px.

The container size isn't necessarily tied to this as that only controls how wide a container will be on certain screen sizes. Although for a more aesthetic layout it's better to make them smaller if you make the media queries smaller as well. I think i would go with @container-large-desktop (970px+ @grid-gutter-width) if you define the breakpoint at 1024px. The gutter width is still 30px so 970px + 30px will give a container a maximum width of 1000px on the largest screens. Try to calculate the sizes of the other containers as well when you costumize bootstrap.

Hope this will be some help. Don't hesitate to ask more if i got you into a wrong direction. :)

jason chan
jason chan
31,009 Points
jason chan
jason chan
31,009 Points

I made video tutorial. So you can watch it below:

bootstrap