CODEWITHSUNDEEP
csstwitter-bootstrapsassbreakpoints
NULL
NULL

Reputation: 1589

Bootstrap custom break points

I am using bootstrap 3.x to build a client site. I have a specific bootstrap break points request from the client:

Small 320px to 768px, Medium 769px to 1034px, Large 1035px to 1280px, and Extra large 1281 plus.

At the same time, I don't want the site to break with future bootstrap version upgrades. The key is that the client will keep using bootstrap classes such as col-md-* col-lg-* etc after I handed on the site and moved on. How can I achieve this? Can somebody share a css or simple scss snippet (new to scss using Scout).

Any help is much appreciated.

Upvotes: 0

Views: 2383

Answers (2)

Jonny Vince
Jonny Vince

Reputation: 487

Never ever edit any of the bootstrap core files, instead overwrite them with custom files -> this way you can update bootstrap.

Lets say you got an folder called bootstrap with all bootstrap core sass files. That create a new folder "custom". In this folder put all files to overwrite the bootstrap core files (like the grid). Than within the sass folder create your style.scss

sass
  -bootstrap-sass
    - bootstrap.scss
    - bootstrap
       - alert.scss
       - ...
  -custom
    - custom-grid.scss
  -style.scss

Now in you custom-grid.scss put this and replace it with your values:

$screen-xs:                  480px !default;
//** Deprecated `$screen-xs-min` as of v3.2.0
$screen-xs-min:              $screen-xs !default;
//** Deprecated `$screen-phone` as of v3.0.1
$screen-phone:               $screen-xs-min !default;

// Small screen / tablet
//** Deprecated `$screen-sm` as of v3.0.1
$screen-sm:                  768px !default;
$screen-sm-min:              $screen-sm !default;
//** Deprecated `$screen-tablet` as of v3.0.1
$screen-tablet:              $screen-sm-min !default;

// Medium screen / desktop
//** Deprecated `$screen-md` as of v3.0.1
$screen-md:                  992px !default;
$screen-md-min:              $screen-md !default;
//** Deprecated `$screen-desktop` as of v3.0.1
$screen-desktop:             $screen-md-min !default;

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

In your style.scss import all files:

// Core Bootstrap
@import "bootstrap-sass/_bootstrap.scss";

// Overwrite bootstrap
@import "custom/custom-grid.scss
...

What I am trying to say, this way (if using sass or less) you can overwrite bootstrap core files while keeping the update functionality

Upvotes: 4

Daniel Waghorn
Daniel Waghorn

Reputation: 2985

If you're using SCSS make sure you're using the official Bootstrap SASS code.

Install it into your project (instructions in readme on GitHub) and then edit the variables defined in lines 271 to 307 scss/_bootstrap-variables.scss, compile and that will be all the breakpoints changed throughout.

If there's version upgrade you will however need to recompile the css each time with your customised breakpoints.

Alternatively you can customise all of the settings and download a customised version online on Bootstrap's Website. You could save the configuration and give that to the client who can reuse it in the future.

Upvotes: 0

Related Questions