0

Can you please let me know how can I add more Breakpoints to Bootstrap 3?As you know Bootstrap is providing the grid system with 4 predefined as: 

@screen-xs = 480px
@screen-sm = 768px
@screen-md = 992px
@screen-lg = 1200px

I found out it is possible to add more breakpoints to Bootstrap using LESS but unfortunatly I couldnt find any tutorial to figure it out how to do this. For example if I want to add a new breakpoint like 

@screen-lgB = 1600px

can you please let me know how to do that? Thanks

Alessio
  • 3,404
  • 19
  • 35
  • 48
Suffii
  • 5,694
  • 15
  • 55
  • 92
  • 1
    If you don't already use LESS - and semi advanced -- this won't make any sense. You open up the mixins/grid-framework.less and add it to the .make-grid-columns() mixin just at the top. Then open /mixins/grid.less (NOTICE that this is in the mixins/ and add your grid after // Generate the large columns, then open up the less/grid.less (NOT INSIDE THE MIXINS directory) and add your grid mixin. Then you will need to open up responsive-utilities.less and add your responsive utilities for your new column class like the others. – Christina Oct 11 '14 at 15:10
  • Thanks Christina, I have never worked with LESS before, however, I will follow the step you commented to compile it. – Suffii Oct 11 '14 at 18:26

1 Answers1

0

I think this link will solve your problem :

Bootstrap 3 breakpoints and media queries

http://alittlecode.com/resolving-breakpoint-conflicts-in-bootstrap-3/

http://bootstrapdocs.com/v3.1.1/docs/css/

Community
  • 1
  • 1
Michael
  • 46
  • 6
  • Hi Mekaeil, Thanks for comment but what I am looking is customizing the core code through LESS. I mean not using Media Queries. – Suffii Oct 11 '14 at 07:28