1. Work with responsive bundles

Work with breakpoints

For teams building responsive designs that change content or layout depending on different screen sizes, it's best practice to create a new component version for each screen size, meaning for each breakpoint or breakpoints collection. You can apply breakpoint settings that are already available in the Styles library, or even create custom breakpoints, to view how a component will render on particular screen widths.

Design versions for specific breakpoints

To create different renderings across screen sizes, you need to create a new version for each screen size. You can create versions quickly by duplicating the original component or one of the versions. Any changes made to a specific version will apply on all chosen breakpoint sizes.

To create a version for a defined breakpoint, or group of breakpoints:

  1. In the Component builder, to clone the component in as many versions as needed, click and then click Duplicate version to clone the component. Repeat this step as many times as you need versions.

  2. For each version, click Breakpoint settings , and then click the arrow to open the drop-down menu of possible breakpoints.

  3. Select the breakpoint(s) you want to allow for this version, for example, extra small and small. In this drop-down menu, you must select at least one breakpoint. Not selecting any breakpoints in the drop-down menu is equivalent to allowing all breakpoints for this component.

    Screenshot of the breakpoints selector above the component and the breakpoints allowed menu

  4. You can then modify and style the version so it looks as you want it to for the screen widths you specified.

Note

Breakpoints do not affect editing, because styling, changing content, and updating the layout of a component version apply to all screen sizes and breakpoints regardless of what preview settings you are on. The breakpoint preview only changes the rendering size and does not save different configuration states per breakpoints.

View a component at different breakpoints

You can view how a component will render on specific screen widths.

The default breakpoints available are:

  • Extra extra large: more than 1400 px

  • Extra large: 1200 px to 1400 px

  • Large: 992 px to 1199 px

  • Medium: 768 px to 991 px

  • Small: 576 px to 767 px

  • Extra small: less than 576 px

These sizes follow the conventions set by bootstrap, and are defined in the Style library. Clicking each breakpoint will shrink or expand the canvas through these default sizes.

To view a component at a defined breakpoint:

  1. In the Component builder, click the breakpoint bar .

  2. Above the component, click one of the breakpoint buttons that you want to visualize the component with.

If you have suggestions for improving this article, let us know!