Spacing

Bootstrap includes a wide range of shorthand responsive margin, padding, and gap utility classes to modify an element's appearance.

Padding

A wide range of shorthand responsive padding utility classes to modify an element's appearance.

Preview

Jsx

Classes

.ps-4

.pt-4

.pb-4

.pe-4

.px-4

.py-4

import React from 'react';
const Padding = () => {
  return (
     <>
        <div className="bg-grey-light-3 ps-4">
            <div className="w-100p h-100p bg-grey-light-4">
                <div className="d-flex justify-content-center align-items-center h-100 w-100">.ps-4</div>
            </div>
        </div>
        <div className="bg-grey-light-3 pt-4">
            <div className="w-100p h-100p bg-grey-light-4">
                <div className="d-flex justify-content-center align-items-center h-100 w-100">.pt-4</div>
            </div>
        </div>
        <div className="bg-grey-light-3 pb-4">
            <div className="w-100p h-100p bg-grey-light-4">
                <div className="d-flex justify-content-center align-items-center h-100 w-100">.pb-4</div>
            </div>
        </div>
        <div className="bg-grey-light-3 pe-4">
            <div className="w-100p h-100p bg-grey-light-4">
                <div className="d-flex justify-content-center align-items-center h-100 w-100">.pe-4</div>
            </div>
        </div>
        <div className="bg-grey-light-3 px-4">
            <div className="w-100p h-100p bg-grey-light-4">
                <div className="d-flex justify-content-center align-items-center h-100 w-100">.px-4</div>
            </div>
        </div>
        <div className="bg-grey-light-3 py-4">
            <div className="w-100p h-100p bg-grey-light-4">
                <div className="d-flex justify-content-center align-items-center h-100 w-100">.py-4</div>
            </div>
        </div>
     </>
  );
}

export default Padding;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Class	Values
`className="p-[value]"className="ps-[value]"className="pt-[value]"className="pb-[value]"className="pe-[value]"className="px-[value]"className="py-[value]"className="p-[size]-[value]"className="ps-[size]-[value]"className="pt-[size]-[value]"className="pb-[size]-[value]"className="pe-[size]-[value]"className="px-[size]-[value]"className="py-[size]-[value]"`	1 / 2 / 3 / 4 / 5 ... / 160 (step of 1)

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Margin

A wide range of shorthand responsive margin utility classes to modify an element's appearance.

Preview

Jsx

Classes

.ms-4

.ms-10

import React from 'react';
const Margin = () => {
  return (
     <>
        <div className="bg-grey-light-2 ms-4 mb-4">
            <div className="w-100p h-100p bg-grey-light-4">
                <div className="d-flex justify-content-center align-items-center h-100 w-100">.ms-4</div>
            </div>
        </div>
        <div className="bg-grey-light-2 ms-10 mb-4">
            <div className="w-100p h-100p bg-grey-light-4">
                <div className="d-flex justify-content-center align-items-center h-100 w-100">.ms-10</div>
            </div>
        </div>
     </>
  );
}

export default Margin;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Class	Values
`className="m-[value]"className="ms-[value]"className="mt-[value]"className="mb-[value]"className="me-[value]"className="mx-[value]"className="my-[value]"className="m-[size]-[value]"className="ms-[size]-[value]"className="mt-[size]-[value]"className="mb-[size]-[value]"className="me-[size]-[value]"className="mx-[size]-[value]"className="my-[size]-[value]"`	1 / 2 / 3 / 4 / 5 ... / 160 (step of 1)

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Gap

When using display: grid, you can make use of gap utilities on the parent grid container. This can save on having to add margin utilities to individual grid items (children of a display: grid container).

Preview

Jsx

Classes

Grid item 1

Grid item 2

Grid item 3

import React from 'react';
const Gap = () => {
  return (
    <div className="d-grid gap-3">
        <div className="p-2 bg-grey-light-4">Grid item 1</div>
        <div className="p-2 bg-grey-light-4">Grid item 2</div>
        <div className="p-2 bg-grey-light-4">Grid item 3</div>
    </div>
  );
}

export default Gap;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Class	Values
`className="gap-[value]"`	>1 / 2 / 3 / 4 ... / 7 (step of 1)

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Padding
Margin
Gap