Bootstrap 3.3 Extend Grid System (LESS)

Bootstrap 3.3 Extend Grid System (LESS) Banner

Recently our article about Bootstrap 3.3 was published on one of the most popelar developers' resourse Dzone, so we welcome you to read and comment. Let us know what you have to say on the topic!


Did you know that adding XL breakpoint to grid system without touching source code of Bootstrap is possible? Import grid.less-, define some variables, and create one mixin. Let’s dive in.

In almost all cases, xs, sm, md, and lg sizes are enough for the application. You just need to investigate, design, and plan what breakpoints size we need — lg will be the largest one. But unexpected situations happens and some elements can be in need of a grid that adapts to larger screens.

Method 1: We can solve this problem by changing the values of current breakpoints and refactor all markup. It can be painful for developers and the QA team.

Method 2: Extend grid system with one more breakpoint, XL, and start to use col-xl to new elements.

The most uncomfortable are columns (col-sm-1 … col-lg-12) that generate by mixin .make-grid-columns(). This mixin has hardcoded collection and no mechanism for passing new items to this array.

Full article:…/bootstrap-33-extend-grid-system-less

October 17, 2016