Menu
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>
281
Bootstrap includes six default breakpoints, sometimes referred to as grid tiers, for building responsively. These breakpoints can be customized if you're using our source Sass files.
The basic syntax of the Bootstrap Media queries Override Using in the Bootstrap framework is @media (min-width: ~ breakpoint in pixels here ~) ~ some CSS rules to be applied ~ which narrows the CSS regulations defined to a particular viewport size but eventually the opposite query might be made use of just like @media ...
Override Variables Bootstrap has its own “_variables. scss” in the “scss” folder, which contains all variables used in Bootstrap. Now, add the “abstracts” name folder in your scss folder and create “_custom-variables. scss” in that folder.
Small devices (tablets, 768px and up): @media (min-width: @screen-sm-min) { ... } Medium devices (desktops, 992px and up): @media (min-width: @screen-md-min) { ... } Large devices (large desktops, 1200px and up): @media (min-width: @screen-lg-min) { ... }
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.
146
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.
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With