Bootstrap - Breakpoints

Default Breakpoints

Bootstrap has predefined breakpoints that help create responsive layouts. These breakpoints are based on screen sizes and are used to apply different styles and layout changes at specific viewport widths. The default breakpoints in Bootstrap are:

You can use these breakpoints to create responsive designs in Bootstrap. By using the appropriate classes and media queries based on these breakpoints, you can tailor your layout and styles to adapt to different screen sizes.

Custom Breakpoints

If you need to define your own custom breakpoints to better suit your design requirements, Bootstrap allows you to create custom breakpoints using Sass variables.

To create a custom breakpoint, you can modify the $grid-breakpoints Sass map in your project's Sass file.

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px,
  custom: 1000px
);

By adding the custom breakpoint to the $grid-breakpoints map, you can now use it in your CSS classes and media queries, just like the default breakpoints.

You can also modify the existing default breakpoints by overriding their values in the $grid-breakpoints map.

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 1100px,
  xl: 1200px,
  xxl: 1400px
);

By customizing the breakpoints, you have more control over how your layout responds to different screen sizes and can tailor the responsiveness of your design to your specific needs.

Remember to recompile your Sass files after making changes to the breakpoints to apply the updated values to your project.

Responsive Classes

Bootstrap has responsive classes that let you use different styles and layouts based on the breakpoints. These classes are made using the breakpoint abbreviations (xs, sm, md, lg, xl, xxl) and can be used to control the visibility, size, and alignment of elements at specific screen sizes.

Here are some examples of responsive classes in Bootstrap:

By using these responsive classes, you can make flexible and adaptive layouts that change based on the screen size.

Media Queries

Along with responsive classes, Bootstrap also lets you use media queries to apply custom styles at specific breakpoints. Media queries let you target specific screen sizes and apply CSS styles to them.

Bootstrap has a set of Sass mixins that match the breakpoints, making it easy to write media queries in your Sass code. These mixins are named after the breakpoints: media-breakpoint-up(), media-breakpoint-down(), media-breakpoint-only(), and media-breakpoint-between().

.my-element {
  // Styles for all screen sizes
  font-size: 16px;

  @include media-breakpoint-up(md) {
    // Styles for medium screens and above
    font-size: 20px;
  }

  @include media-breakpoint-only(lg) {
    // Styles for large screens only
    background-color: #f5f5f5;
  }
}

In this example, the .my-element class has a default font size of 16 pixels. Using the media-breakpoint-up(md) mixin, the font size is increased to 20 pixels on medium screens and above. Also, using the media-breakpoint-only(lg) mixin, the background color is set to #f5f5f5 only on large screens.

By combining media queries with Bootstrap breakpoints, you can adjust your styles and make responsive designs that adapt to different screen sizes.

Responsive Utilities

Bootstrap has a set of responsive utility classes that provide quick and easy ways to control the display, alignment, and spacing of elements based on breakpoints. These utilities are useful for making small changes and adjustments to your layout without writing custom CSS.

Here are some commonly used responsive utilities in Bootstrap:

By using these responsive utilities, you can quickly make changes to your layout and handle different screen sizes without writing a lot of custom CSS.

Remember to check the Bootstrap documentation for a full list of available responsive utilities and how to use them.