How to modify breakpoints in Bootstrap 3 without modifying core files?

Question

I'm not a fan of Bootstrap's default breakpoint of 1200px for screen-lg. Is there some way I can make it so the lg breakpoint happens at 1800px or something along those lines? I don't want to modify the original Bootstrap css code since I'm using bower, and any time I run bower update, I'd lose my changes.

I get that I should be able to override Bootstrap's defaults, though using grunt, bower, and Sass, I'm not sure how to go about doing that. This is the <head> block:

<head>
  <meta charset="utf-8">
  <title>Test</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
  <!-- build:css(.) styles/vendor.css -->
  <!-- bower:css -->
  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
  <link rel="stylesheet" href="bower_components/bootstrapvalidator/dist/css/bootstrapValidator.css" />
  <link rel="stylesheet" href="bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" />
  <link rel="stylesheet" href="bower_components/card/lib/css/card.css" />
  <!-- endbower -->
  <!-- endbuild -->
  <!-- build:css(.tmp) styles/main.css -->
  <link rel="stylesheet" href="styles/main.css">
  <link rel="stylesheet" href="styles/order-page.css">
  <!-- endbuild -->
</head>

score 3 · Answer 1 · edited May 23 '17 at 12:06

You can do this with Less (also SASS i expect) and the commandline Lessc compiler, by running:

lessc --modify-var='screen-lg=1800' --modify-var='container-large-desktop=1770' --autoprefix="Android 2.3,Android >= 4,Chrome >= 20,Firefox >= 24,Explorer >= 8,iOS >= 6,Opera >= 12,Safari >= 6' bootstrap.less ../dist/css/bootstrap.css

In the above 1770 = 1740 + gutter-size.

Notice that you not only have to install the Less compiler with npm install less, but also the Less autoprefixer plugin with npm install less-plugin-autoprefix.

The above will guarantee that Bootstrap will compile into the same code as with the default build process. Of course you can also set the sourcemap and compress options when running the lessc command above.

The best solution in your situation depends on how to compile Bootstrap. Because of you are using Bower, you should also take a look at https://www.npmjs.com/package/less-plugin-bower-resolve. This plugin for the Less compiler helps you to import Less files from Bower packages. Which brings you possible to an alternative solution.

Create a new less file, site.less and write down the following Less code into it:

@import "bootstrap/less/bootstrap";
@screen-lg:                  1800px;
// Large screen / wide desktop
@container-large-desktop:      (1740px + @grid-gutter-width);

Now you can compile site.less by using the following command:

lessc --bower-resolve -autoprefix="Android 2.3,Android >= 4,Chrome >= 20,Firefox >= 24,Explorer >= 8,iOS >= 6,Opera >= 12,Safari >= 6' site.less site.css

The @screen-lg and @container-large-desktop can be overridden afterwards due to Less uses lazy loading.

After reading the the answers on this question by @zangrafx and @mijopabe i also wonder what do you expect when setting the largest breakpoint to a wider width. In the default situation the following happens:

for screens wider than 992px the width of the .container class becomes 970px and for screens wider than 1200px the .container class got a width of 1170 pixels. When you are deploying the solution i have given above, the width of the .container class become 970px for screen sizes from 992px till 1800px, and 1770 pixels for screen sizes wider than 1800px. Possible you are not looking for a solution that changes the largest break-point, but for a solution that adds a larger grid to Bootstrap.

I saw. There will always be someone for whom other answers "make no sense at all". Can't hold everyone's hand in life. Until the OP asks for clarification, which I am always happy to give if you see my other answers, I will leave it as-is. — mijopabe, Dec 11 '14 at 00:21
Yes, this answer actually changes the breakpoint. I had to add about 400px to each for a side navigation design. I do a similar thing but use CodeKit, it's a breeze. — Christina, Dec 13 '14 at 06:35
Yikes. This answer is way over my head. I'm using Sass, so there's no such thing as `--modify-var`. I just don't understand enough of what's going on here to replicate it in Sass in my current environment. — CaptSaltyJack, Dec 15 '14 at 18:49
Well, i understand. For sass you should be able to set the same variables as i have used above for the `site.less` and than compile that. — Bass Jobsen, Dec 15 '14 at 19:57
So, compile that into a CSS file, and then put the file where? And where does it get included in the whole chain of CSS files? — CaptSaltyJack, Dec 15 '14 at 20:59
How do you compile your SASS code? https://github.com/twbs/bootstrap-sass describes different ways to do this.You will have to realize the big difference between Less and SASS here,that Less uses Lazy loading and SASS does not (also see: http://stackoverflow.com/questions/11773583/can-i-override-sass-variables-after-they-have-been-imported) so when using Less you should insert your overrides directly after the import of `_variables.scss` you can import a `_variables_custom.scss`(with your overrides or a copy of `_variables.scss) in _bootstrap.scss. This requires at least changing 1 core file — Bass Jobsen, Dec 15 '14 at 22:05

score 1 · Accepted Answer · answered Dec 15 '14 at 21:29

Turns out this was much easier than I thought. I swear I tried this before but it didn't work, but maybe I did something wrong before.

In the main SCSS file, right at the top, change this:

$icon-font-path: "../bower_components/bootstrap-sass-official/assets/fonts/bootstrap/";
// bower:scss
@import "bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";
// endbower

To this:

$screen-lg-min: 1800px; /* $screen-lg is deprecated */

$icon-font-path: "../bower_components/bootstrap-sass-official/assets/fonts/bootstrap/";
// bower:scss
@import "bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";
// endbower

@media screen and (min-width: 1800px) {
  .container {
    width: $new-breakpoint-container-width; /* to be defined above, of course */
  }
}

But, bounty points go to Bass Jobsen for the most detailed answer, and also for the correct way of setting the container width using the grid-gutter-width.

As already pointed out by @mijopabe it is not always easy to find out what the OP wants or needs. A better question for your answer give above would possible be: "how to add a larger container for screens wider than 1800px without ...." — Bass Jobsen, Dec 15 '14 at 22:20
True, and sometimes it's hard to figure out how to concisely explain a problem I'm having. — CaptSaltyJack, Dec 15 '14 at 22:21

OnlyMAJ · Answer 3 · 2014-11-21T02:28:12.427

0

You can go through bootstrap less variables. If you have downloaded bootstrap source files, you can find a file named variables.less in the folder.Look for this in the file

// Large screen / wide desktop
//** Deprecated `@screen-lg` as of v3.0.1
@screen-lg:                  1200px;
@screen-lg-min:              @screen-lg;

and change it to whatever screen sized you mean.then compile and get the result.

edited Nov 21 '14 at 02:28

answered Nov 21 '14 at 02:22

OnlyMAJ

819
8
21

I can't modify the original Bootstrap files though. I have to use one of my own CSS/LESS files separately. – CaptSaltyJack Nov 21 '14 at 02:42
1

@CaptSaltyJack why ? if you change that variable it changes on your final css itself. – OnlyMAJ Nov 21 '14 at 02:44
See my question above. I'm using bower, so when I run `bower update`, any changes I make to the core Bootstrap files will be overwritten. – CaptSaltyJack Nov 21 '14 at 02:45
@CaptSaltyJack ok add that less variable in first of your less file then it will be overwritten in your bootstrap core file while you're using bower. – OnlyMAJ Nov 21 '14 at 02:51
It's more complicated than that, unfortunately. I've made an edit to my question above. – CaptSaltyJack Nov 21 '14 at 03:03
make your own variable file with the same variable, with a different value, when you compile, add that last in the imported files – Christina Nov 21 '14 at 04:03
You should possible also have to change `@container-large-desktop` – Bass Jobsen Dec 10 '14 at 22:46

mijopabe · Answer 4 · 2014-12-09T23:59:19.187

0

If you don't want to delete/edit Bootstrap's default files so you can update via bower, you can create a separate CSS file (custom-bootstrap.css), include it after Bootstrap. So, for a max-width of 1800px, include this in that custom-bootstrap.css file:

.container-fluid {
    margin-right: auto;
    margin-left: auto;
    max-width: 1800px; 
}

This overrides the container-fluid set in Bootstrap by centering and setting a max-width horizontally.

A second option (independent of the first) is to 1) create a second main file (less/scss), 2) include whatever you want to keep from Bootstrap (so all responsive files without the responsive-1200px-min.less/scss). This will run whatever you have and 3) then write your own media query for 1800px if needed.

edited Dec 09 '14 at 23:59

answered Dec 09 '14 at 22:51

mijopabe

646
5
23

Your answer makes no sense, although the adding some CSS code to overwrite Bootstrap's does make sense. Notice that the .container-fluid already takes 100% of the viewport. You should change the `.container` class which has been set levaraging a media query. So the CSS code overriding that should look like: `@media (min-width: 1800px) { .container { width: 1770px; } }` also BS3 does not have a `responsive-1200px-min.less/scss` file – Bass Jobsen Dec 10 '14 at 22:25
I'll rename the file when I get to my computer. It's what I use for my naming conventions. However, think about it a bit. It does work and may even be what the OP requires.... – mijopabe Dec 10 '14 at 23:20
i think the (mis) use of the fluid-container as a fixed container will introduce new problems (also in the case of update bootstrap). I understand it works for you, but i should not be an advised solution for others. – Bass Jobsen Dec 11 '14 at 10:22
If you believe that modifying a breakpoint (or any other feature for that matter) _outside_ of the files that are being updated is _misusing_ what is essentially still a framework that is already designed to be easily alterable, then I would suggest that is the fundamental mistake. Update Bootstrap and use a new file to overwrite another is the same foundation as offered in your answer after I added mine. Site-specific, it works. Now, I wouldn't recommend _either_ of our solutions if we're referring to adhering to Bootstrap core design philosophies, but then again, the OP's task warrants it. – mijopabe Dec 11 '14 at 14:55
As an aside, I feel that our current disagreement would make an excellent question on meta SO :) – mijopabe Dec 11 '14 at 15:11

score 0 · Answer 5 · answered Dec 15 '14 at 18:31

I'll add that you can simply add an additional 'breakpoint' to your main.css file. This won't change the 1200px breakpoint, but will allow the container to exceed it.

Like so:

@media (min-width: 1800px) {
  .container {
    width: 1600px;
  }
}

HTH,

-Ted

score -1 · Answer 6 · answered Dec 10 '14 at 16:55

You can use Bootstrap different way. Copy file bootstrap.less from original location to your less folder and change paths inside like in example below, except for variables.less.

// Core variables and mixins
@import "variables.less";
@import "/bower_components/bootstrap/less/mixins.less";

// Reset and dependencies
@import "/bower_components/bootstrap/less/normalize.less";
@import "/bower_components/bootstrap/less/print.less";
...

Now copy file variables.less from original location to your less folder and you can modify any variable you want.

In your html change path to new bootstrap.css file:

<link href="/styles/bootstrap.css" rel="stylesheet">

In your build process compile /your_less/bootstrap.less (instead of /bower_components/bootstrap/less/bootstrap.less) and it will import your own variables.less and all other orgiginal bootstrap files from bower_components.

You can also exchange other less files like normalize.less to your own.

I have this build and everything works great with gulp, sourcemaps and browser-sync and I can still update bootstrap in bower_files when new version is available.

you aonly have to import `/bower_components/bootstrap/less/bootstrap.less`. You should not replace the variable.less files, but override the variables by putting the definition afterwards. See: http://lesscss.org/features/#variables-feature-lazy-loading — Bass Jobsen, Dec 10 '14 at 22:15

How to modify breakpoints in Bootstrap 3 without modifying core files?

6 Answers6