Layout

Break Before

Utilities for controlling how a column or page should break before an element.

Basic usage

Setting the break-before behavior

Use the break-before-{value} utilities to control how a column or page break should behave before an element. For example, use the break-before-column utility to force a column break before an element.

<div className="columns-2">
  <p>Well, let me tell you something, ...</p>
  <p className="**break-before-column**">Sure, go ahead, laugh...</p>
  <p>Maybe we can live without...</p>
  <p>Look. If you think this is...</p>
</div>