Studio | Helper

Borders

Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element. Please read the official documentation for the full list of options.

ADDITIVE

.border

.border-top

.border-end

.border-bottom

.border-start

SUBTRACTIVE (REMOVE)

.border-0

.border-top-0

.border-end-0

.border-bottom-0

.border-start-0

BORDER COLOR

.border-primary / subtle

.border-secondary / subtle

.border-success / subtle

.border-danger / subtle

.border-warning / subtle

.border-info / subtle

.border-light / subtle

.border-dark / subtle

.border-white

Border-radius

Add classes to an element to easily round its corners. official documentation for the full list of options.

BORDER RADIUS

.rounded

.rounded-top

.rounded-end

.rounded-bottom

.rounded-start

.rounded-pill

.rounded-circle

.rounded-0

BORDER RADIUS SIZES

.rounded

.rounded-1

.rounded-2

.rounded-3

.rounded-4

.rounded-5

REMOVE SIDE BORDER RADIUS

.rounded-top-0

.rounded-top-start-0

.rounded-top-end-0

.rounded-bottom-0

.rounded-bottom-start-0

.rounded-bottom-end-0

Text color

Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too. Please read the official documentation for the full list of options.

BOOTSTRAP TEXT COLOR

T

.text-primary / emphasis

T

.text-secondary / emphasis

T

.text-success / emphasis

T

.text-danger / emphasis

T

.text-warning / emphasis

T

.text-info / emphasis

T

.text-dark / emphasis

T

.text-black / .text-black-50

T

.text-light / emphasis

T

.text-white / .text-white-50

T

.text-body / emphasis

T

.text-body-secondary

T

.text-body-tertiary

T

.text-muted

EXTENDED TEXT COLOR

T

.text-teal

T

.text-indigo

T

.text-purple

T

.text-yellow

T

.text-gray-100

T

.text-gray-200

T

.text-gray-300

T

.text-gray-400

T

.text-gray-500

T

.text-gray-600

T

.text-gray-700

T

.text-gray-800

T

.text-gray-900

Text transparent color

We are now support text transparent from 10% to 90% opacity. It is also applicable for any other text class as well .text-teal-transparent-*.

T

.text-opacity-5

T

.text-opacity-10

T

.text-opacity-15

T

.text-opacity-20

T

.text-opacity-25

T

.text-opacity-30

T

.text-opacity-35

T

.text-opacity-40

T

.text-opacity-45

T

.text-opacity-50

T

.text-opacity-55

T

.text-opacity-60

T

.text-opacity-65

T

.text-opacity-70

T

.text-opacity-75

T

.text-opacity-80

T

.text-opacity-85

T

.text-opacity-90

T

.text-opacity-95

T

.text-theme

Background color

Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Background utilities do not set color, so in some cases you’ll want to use .text-* utilities. Please read the official documentation for the full list of options.

BOOTSTRAP BACKGROUND COLOR

.bg-primary / subtle

.bg-secondary / subtle

.bg-success / subtle

.bg-danger / subtle

.bg-warning / subtle

.bg-info / subtle

.bg-light / subtle

.bg-dark / subtle

.bg-white

.bg-transparent

.bg-none

EXTENDED BACKGROUND COLOR

.bg-teal

.bg-indigo

.bg-purple

.bg-yellow

.bg-gray-100

.bg-gray-200

.bg-gray-300

.bg-gray-400

.bg-gray-500

.bg-gray-600

.bg-gray-700

.bg-gray-800

.bg-gray-900

Background gradient color

By adding a .bg-gradient class, a linear gradient is added as background image to the backgrounds. This gradient starts with a semi-transparent white which fades out to the bottom.

BOOTSTRAP GRADIENT CLASS

.bg-gradient.bg-primary

.bg-gradient.bg-secondary

.bg-gradient.bg-success

.bg-gradient.bg-danger

.bg-gradient.bg-warning

.bg-gradient.bg-info

.bg-gradient.bg-light

.bg-gradient.bg-dark

.bg-gradient.bg-black

EXTENDED GRADIENT

.bg-gradient.bg-teal

.bg-gradient.bg-indigo

.bg-gradient.bg-purple

.bg-gradient.bg-yellow

.bg-gradient.bg-gray-100

.bg-gradient.bg-gray-200

.bg-gradient.bg-gray-300

.bg-gradient.bg-gray-400

.bg-gradient.bg-gray-500

.bg-gradient.bg-gray-600

.bg-gradient.bg-gray-700

.bg-gradient.bg-gray-800

.bg-gradient.bg-gray-900

Background gradient fancy color

We have create different fancy yet beautiful linear gradient based on the color variable that we have. You may add more combination in /scss/_helper.scss

FANCY GRADIENT

.bg-gradient-orange-red

.bg-gradient-red-orange

.bg-gradient-red-pink

.bg-gradient-yellow-red

.bg-gradient-yellow-orange

.bg-gradient-yellow-green

.bg-gradient-indigo-blue

.bg-gradient-indigo-teal

.bg-gradient-blue-indigo

.bg-gradient-blue-cyan

.bg-gradient-cyan-blue

.bg-gradient-cyan-indigo

CUSTOM GRADIENT

.bg-gradient-custom-orange

.bg-gradient-custom-pink

.bg-gradient-custom-teal

.bg-gradient-custom-indigo

.bg-gradient-custom-blue

Display property

Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing. Please read the official documentation for the full list of options.

Display utility classes that apply to all breakpoints, from xs to xl. 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
grid
table
table-cell
table-row
flex
inline-flex

Ratios

Use generated pseudo elements to make an element maintain the aspect ratio of your choosing. Perfect for responsively handling video or slideshow embeds based on the width of the parent. Please read the official documentation for the full list of options.

Use the ratio helper to manage the aspect ratios of external content like <iframe>s, <embed>s, <video>s, and <object>s. These helpers also can be used on any standard HTML child element (e.g., a <div> or <img>). Styles are applied from the parent .ratio class directly to the child.

Flex

Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary. Please read the official documentation for the full list of options.

Flex	Align items	Fill / Grow / Wrap
`.d-flex` `.d-inline-flex` `.d-sm-flex` `.d-sm-inline-flex` `.d-md-flex` `.d-md-inline-flex` `.d-lg-flex` `.d-lg-inline-flex` `.d-xl-flex` `.d-xl-inline-flex` `.d-xxl-flex` `.d-xxl-inline-flex`	`.align-items-start` `.align-items-end` `.align-items-center` `.align-items-baseline` `.align-items-stretch` `.align-self-start` `.align-self-end` `.align-self-center` `.align-self-baseline` `.align-self-stretch` `.align-content-start` `.align-content-end` `.align-content-center` `.align-content-between` `.align-content-around` `.align-content-stretch`	`.flex-fill` `.flex-grow-0` `.flex-shrink-0` `.flex-nowrap` `.flex-wrap` `.flex-wrap-reverse` `.order-{1\|2\|3\|4\|5\|6 \|7\|8\|9\|10\|11\|12}`

Float / Position / Overflow

Toggle floats on any element, across any breakpoint, using our responsive float utilities.

Float	Position	Overflow
`.float-start` `.float-sm-start` `.float-md-start` `.float-lg-start` `.float-xl-start` `.float-end` `.float-sm-end` `.float-md-end` `.float-lg-end` `.float-xl-end` `.float-none` `.float-sm-none` `.float-md-none` `.float-lg-none` `.float-xl-none`	`.position-static` `.position-relative` `.position-absolute` `.position-fixed` `.position-sticky` `.fixed-top` `.fixed-bottom` `.desktop-sticky-top` `.top-0` `.end-0` `.bottom-0` `.start-0` `.top-auto` `.end-auto` `.bottom-auto` `.start-auto`	`.overflow-auto` `.overflow-hidden` `.overflow-visible` `.overflow-scroll` `.overflow-x-auto` `.overflow-x-hidden` `.overflow-x-visible` `.overflow-x-scroll` `.overflow-y-auto` `.overflow-y-hidden` `.overflow-y-visible` `.overflow-y-scroll`

Shadows

Add or remove shadows to elements with box-shadow utilities. Please read the official documentation for the full list of options.

.shadow-none

.shadow

.shadow-sm

.shadow-lg

Width and height

Easily make an element as wide or as tall with our width and height utilities. Please read the official documentation for the full list of options.

Width	Height
`.w-25` `.w-50` `.w-75` `.w-100` `.w-auto` `.mw-100` `.vw-100` `.min-vw-100` `.w-{10\|20\|30\|40\|50}px` `.w-{60\|70\|80\|50\|90\|100}px` `.w-{100\|150\|200\|250\|300\|350}px` `.w-{400\|450\|500\|550\|600}px`	`.h-25` `.h-50` `.h-75` `.h-100` `.h-auto` `.mh-100` `.vh-100` `.min-vh-100` `.h-{10\|20\|30\|40\|50}px` `.h-{60\|70\|80\|50\|90\|100}px` `.h-{100\|150\|200\|250\|300\|350}px` `.h-{400\|450\|500\|550\|600}px`

Margin and padding

Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance. Please read the official documentation for the full list of options.

Margin	Padding
`.mt-{1\|2\|3\|4\|5}` `.me-{1\|2\|3\|4\|5}` `.mb-{1\|2\|3\|4\|5}` `.ms-{1\|2\|3\|4\|5}` `.mx-{1\|2\|3\|4\|5}` `.my-{1\|2\|3\|4\|5}` `.mt-{1~20}px` `.me-{1~20}px` `.mb-{1~20}px` `.ms-{1~20}px`	`.pt-{1\|2\|3\|4\|5}` `.pe-{1\|2\|3\|4\|5}` `.pb-{1\|2\|3\|4\|5}` `.ps-{1\|2\|3\|4\|5}` `.px-{1\|2\|3\|4\|5}` `.py-{1\|2\|3\|4\|5}` `.pt-{1~20}px` `.pe-{1~20}px` `.pb-{1~20}px` `.ps-{1~20}px`

Text

Documentation and examples for common text utilities to control alignment, wrapping, weight, and more. Please read the official documentation for the full list of options.

Alignment & Decoration	Wrapping & transform	Font style	Font Size
`.text-start` `.text-center` `.text-end` `.text-reset` `.text-decoration-none` `.text-decoration-underline` `.text-decoration-line-through` `.text-gradient` `.lh-1` `.lh-sm` `.lh-base` `.lh-lg` `.font-monospace`	`.text-wrap` `.text-nowrap` `.text-truncate` `.text-break` `.text-lowercase` `.text-uppercase` `.text-capitalize`	`.fw-bold` `.fw-bolder` `.fw-semibold` `.fw-normal` `.fw-light` `.fw-lighter` `.fst-italic` `.fst-normal` `.fw-100` `.fw-200` `.fw-300` `.fw-400` `.fw-500` `.fw-600` `.fw-700` `.fw-800`	`.fs-1` `.fs-2` `.fs-3` `.fs-4` `.fs-5` `.fs-6`

Opacity / Visibility / Vertical align

Control the visibility, opacity and vertical align by using bootstrap utilities. Please read the official documentation for the full list of options.

Opacity	Visibility	Vertical align
`.opacity-10` `.opacity-9` `.opacity-8` `.opacity-7` `.opacity-6` `.opacity-5` `.opacity-4` `.opacity-3` `.opacity-2` `.opacity-1` `.opacity-0`	`.visible` `.invisible`	`.align-baseline` `.align-top` `.align-middle` `.align-bottom` `.align-text-top` `.align-text-bottom`

Object Fit

Use the object fit utilities to modify how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container. Please read the official documentation for the full list of options.

Notifications

Helper page header description goes here...