Bootstrap - Breakpoints

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:

Breakpoint Name Breakpoint Width
Extra small (xs) Less than 576 pixels
Small (sm) 576 pixels and above
Medium (md) 768 pixels and above
Large (lg) 992 pixels and above
Extra large (xl) 1200 pixels and above
Extra extra large (xxl) 1400 pixels and above

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.

Example: Creating a Custom Breakpoint

$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.

Example: Modifying an Existing Breakpoint

$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.

Using Breakpoints in Bootstrap

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:

Class Example Description
.col-sm-*, .col-md-*, .col-lg-*, etc. Define the width of columns in a grid system based on the breakpoint. For example, .col-sm-6 sets the column width to 50% on small screens and above.
.d-none, .d-md-block, .d-lg-inline, etc. Show or hide elements based on the breakpoint. For example, .d-md-none hides an element on medium screens and above, while .d-lg-inline shows an element as inline on large screens and above.
.text-left, .text-sm-center, .text-md-right, etc. Align text based on the breakpoint. For example, .text-sm-center centers the text on small screens and above, while .text-md-right aligns the text to the right on medium screens and above.

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().

Media Query Example

.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:

Utility Example Description
.d-none, .d-sm-block, .d-md-inline, etc. Show or hide elements based on the breakpoint. For example, .d-none hides an element on all screen sizes, while .d-md-block shows an element as a block on medium screens and above.
.text-left, .text-sm-center, .text-lg-right, etc. Align text based on the breakpoint. For example, .text-left aligns the text to the left on all screen sizes, while .text-sm-center centers the text on small screens and above.
.float-left, .float-md-right, .mr-2, .py-lg-3, etc. Control the floats and spacing of elements based on the breakpoint. For example, .float-left floats an element to the left on all screen sizes, while .float-md-right floats an element to the right on medium screens and above. Similarly, .mr-2 adds a right margin of 2 spacing units on all screen sizes, while .py-lg-3 adds vertical padding of 3 spacing units on large screens and above.

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.