BootstrapHow-ToBeginner · 4 min read

How to Change Breakpoints in Bootstrap: Simple Guide

To change breakpoints in Bootstrap, you need to customize the Sass variables that define them, such as $grid-breakpoints. This requires downloading Bootstrap source files, editing these variables, and recompiling the CSS to apply your custom breakpoints.

📐

Syntax

Bootstrap breakpoints are defined in Sass variables inside the _variables.scss file. The main variable is $grid-breakpoints, which is a map of breakpoint names to minimum widths.

$grid-breakpoints: Defines the screen widths where layout changes.
Keys like xs, sm, md, lg, xl, and xxl represent breakpoint names.
Values are widths in px or rem.

Example syntax to override breakpoints:

scss

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px,
  xl: 1280px,
  xxl: 1440px
);

💻

Example

This example shows how to change Bootstrap breakpoints by customizing $grid-breakpoints in a Sass file and compiling it to CSS. The new breakpoints adjust when the layout switches for different screen sizes.

scss and html

// custom.scss
$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px,
  xl: 1280px,
  xxl: 1440px
);

@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";
@import "node_modules/bootstrap/scss/bootstrap";

/* HTML example to test breakpoints */

/* index.html */
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Custom Bootstrap Breakpoints</title>
  <link rel="stylesheet" href="custom.css">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-sm-6 col-md-4 col-lg-3" style="background-color:#007bff; color:white; padding:1rem;">
        Responsive Box
      </div>
    </div>
  </div>
</body>
</html>

Output

A blue box that changes width at 480px, 768px, and 1024px screen widths according to the custom breakpoints.

⚠️

Common Pitfalls

Editing compiled CSS: Changing breakpoints directly in compiled CSS files won't work because Bootstrap uses Sass variables to generate responsive styles.
Not recompiling Sass: After changing $grid-breakpoints, you must recompile Bootstrap Sass to update CSS.
Missing imports order: Override variables before importing Bootstrap styles to ensure your changes apply.
Using CDN: You cannot change breakpoints if you only use Bootstrap from a CDN; you need source files and a Sass compiler.

scss and css

// Wrong: Editing CSS directly
/* In bootstrap.min.css */
@media (min-width: 576px) { /* ... */ }

// Right: Override in Sass before import
$grid-breakpoints: (
  sm: 480px,
  md: 768px,
  lg: 1024px
);
@import "bootstrap";

📊

Quick Reference

Summary tips for changing Bootstrap breakpoints:

Modify $grid-breakpoints map in Sass.
Override variables before importing Bootstrap styles.
Use a Sass compiler like Dart Sass to build CSS.
Test changes on different screen widths.
Use custom breakpoints to better fit your design needs.

✅

Key Takeaways

Change Bootstrap breakpoints by customizing the $grid-breakpoints Sass variable.

Always override variables before importing Bootstrap Sass files to apply changes.

Recompile Bootstrap Sass after changes to generate updated CSS.

You cannot change breakpoints using only the Bootstrap CDN CSS files.

Test your custom breakpoints on various screen sizes to ensure responsiveness.