padding

Default padding

Two class names are provided for applying responsive page and box padding values, and are used internally by components like <Card>.

.bf-page-padding is meant to be used on the outermost container for a page

• up to small (0-599px): 12px padding
• from small to xxl (600px-1919px): 24px padding
• from xxl and wider (1920px+): 40px padding

.bf-padding is meant to be used on other containers on your page

• up to large (0-1279px): 16px padding
• from large and wider (1280px+): 24px padding

<!-- page root element -->
<div class="bf-page-padding bfc-base-3-bg">
  Page root
  <!-- any content container box  -->
  <div class="bf-padding bfc-base-2-bg">Any content box</div>
</div>
<!-- page root element -->
<div class="bf-page-padding bfc-base-3-bg">
  Page root
  <!-- any content container box  -->
  <div class="bf-padding bfc-base-2-bg">Any content box</div>
</div>

Only horizontal

The CSS classes will apply padding on all sides - if you only want horizontal (left and right) padding you can use .bf-page-padding-x or .bf-padding-x instead.

<!-- page root element -->
<div class="bf-page-padding-x bfc-base-3-bg">
  Page root
  <!-- any content container box  -->
  <div class="bf-padding-x bfc-base-2-bg">Any content box</div>
</div>
<!-- page root element -->
<div class="bf-page-padding-x bfc-base-3-bg">
  Page root
  <!-- any content container box  -->
  <div class="bf-padding-x bfc-base-2-bg">Any content box</div>
</div>

You can also replace x with y for vertical-only.

CSS variables

For any other usage, the calculated padding values are also available as CSS variables --bf-page-padding and --bf-box-padding.

.my-page {
  padding-inline: var(--bf-page-padding);
}

.my-container {
  position: absolute;
  left: var(--bf-box-padding);
}
.my-page {
  padding-inline: var(--bf-page-padding);
}

.my-container {
  position: absolute;
  left: var(--bf-box-padding);
}