CSS Classes – Around Documentation

Skip to content

# CSS Classes

Around makes use of Bootstrap’s utility classes with CSS Classes option provided in Elementor for various purposes.

Example: Bootstrap Spacing Classes and Display Classes applied to a section in Elementor

## Display

Display utility classes that apply to all breakpoints, from `xs` to `xl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0;` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.

As such, the classes are named using the format:

- `.d-{value}` for `xs`
- `.d-{breakpoint}-{value}` for `sm`, `md`, `lg`, and `xl`.

Where value is one of:

- `none`
- `inline`
- `inline-block`
- `block`
- `table`
- `table-cell`
- `table-row`
- `flex`
- `inline-flex`

The media queries affect screen widths with the given breakpoint or larger. For example, `.d-lg-none` sets `display: none;` on both `lg` and `xl` screens.

## Flex

### Justify Content

Use `justify-content` utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if `flex-direction: column`). Choose from `start` (browser default), `end`, `center`, `between`, or `around`.

- `.justify-content-start`
- `.justify-content-end`
- `.justify-content-center`
- `.justify-content-between`
- `.justify-content-around`
- `.justify-content-sm-start`
- `.justify-content-sm-end`
- `.justify-content-sm-center`
- `.justify-content-sm-between`
- `.justify-content-sm-around`
- `.justify-content-md-start`
- `.justify-content-md-end`
- `.justify-content-md-center`
- `.justify-content-md-between`
- `.justify-content-md-around`
- `.justify-content-lg-start`
- `.justify-content-lg-end`
- `.justify-content-lg-center`
- `.justify-content-lg-between`
- `.justify-content-lg-around`
- `.justify-content-xl-start`
- `.justify-content-xl-end`
- `.justify-content-xl-center`
- `.justify-content-xl-between`
- `.justify-content-xl-around`

### Align Items

Use `align-items` utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if `flex-direction: column`). Choose from `start`, `end`, `center`, `baseline`, or `stretch` (browser default).

- `.align-items-start`
- `.align-items-end`
- `.align-items-center`
- `.align-items-baseline`
- `.align-items-stretch`
- `.align-items-sm-start`
- `.align-items-sm-end`
- `.align-items-sm-center`
- `.align-items-sm-baseline`
- `.align-items-sm-stretch`
- `.align-items-md-start`
- `.align-items-md-end`
- `.align-items-md-center`
- `.align-items-md-baseline`
- `.align-items-md-stretch`
- `.align-items-lg-start`
- `.align-items-lg-end`
- `.align-items-lg-center`
- `.align-items-lg-baseline`
- `.align-items-lg-stretch`
- `.align-items-xl-start`
- `.align-items-xl-end`
- `.align-items-xl-center`
- `.align-items-xl-baseline`
- `.align-items-xl-stretch`

## Spacing

Assign responsive-friendly `margin` or `padding` values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. Classes are built from a default Sass map ranging from `.25rem` to `3rem`.

Spacing utilities that apply to all breakpoints, from `xs` to `xl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.

The classes are named using the format `{property}{sides}-{size}` for `xs` and `{property}{sides}-{breakpoint}-{size}` for `sm`, `md`, `lg`, and `xl`.

Where property is one of:

- `m` – for classes that set `margin`
- `p` – for classes that set `padding`

Where sides is one of:

- `t` – for classes that set `margin-top` or `padding-top`
- `b` – for classes that set `margin-bottom` or `padding-bottom`
- `l` – for classes that set `margin-left` or `padding-left`
- `r` – for classes that set `margin-right` or `padding-right`
- `x` – for classes that set both `*-left` and `*-right`
- `y` – for classes that set both `*-top` and `*-bottom`
- blank – for classes that set a `margin` or `padding` on all 4 sides of the element

Where size is one of:

- `0` – for classes that eliminate the `margin` or `padding` by setting it to `0`
- `1` – (by default) for classes that set the `margin` or `padding` to `$spacer * .25`
- `2` – (by default) for classes that set the `margin` or `padding` to `$spacer * .5`
- `3` – (by default) for classes that set the `margin` or `padding` to `$spacer`
- `4` – (by default) for classes that set the `margin` or `padding` to `$spacer * 1.5`
- `5` – (by default) for classes that set the `margin` or `padding` to `$spacer * 3`
- `auto` – for classes that set the `margin` to auto

More details here: https://getbootstrap.com/docs/4.5/utilities/flex/#justify-content

## Text Utilities

### Text alignment

Easily realign text to components with text alignment classes.

- `text-left` – Left aligned text on all viewport sizes.
- `text-center` – Center aligned text on all viewport sizes.
- `text-right` – Right aligned text on all viewport sizes.

- `text-sm-left` – Left aligned text on viewports sized SM (small) or wider.
- `text-md-left` – Left aligned text on viewports sized MD (medium) or wider.
- `text-lg-left` – Left aligned text on viewports sized LG (large) or wider.
- `text-xl-left` – Left aligned text on viewports sized XL (extra-large) or wider.

## Font weight and italics

- `font-weight-bold` – Bold text.
- `font-weight-bolder` – Bolder weight text (relative to the parent element).
- `font-weight-normal` – Normal weight text.
- `font-weight-light` – Light weight text.
- `font-weight-lighter` – Lighter weight text (relative to the parent element).
- `font-italic` – Italic text.

###### Contents

- Welcome
- Getting Started
  - Introduction
  - Installation
    - Direct Download & Installation
    - Manual Download & Installation
  - Recommended plugins
  - Demo Content
  - Updating the Theme
- Header
  - Logo
  - Navigation
  - Megamenu
  - Action Button
  - Custom Header
- Footer
  - Widget Area
  - Site Info
- Elementor
  - Introduction
  - Settings
  - Page Settings
  - CSS Classes
  - Widgets, Skins & Extend
- Customizer
  - General
  - Site Identity
  - Header
  - Footer
  - Blog
  - Shop
  - Help Center
  - 404
- Integrations
  - WPForms