brandv1.0
Utilities
Data Display
Data Entry
Feedback
Tables
Charts
Maps
Navigation
BEHAVIORAL
Layout
Explore Our Templates 🚀
New
Powerful Svelte-Bootstrap SaaS App Template
Powerful Svelte-Bootstrap SaaS App Template
Admin CRM Application Template
Admin CRM Application Template
Robust Next.js SaaS App Template
Robust Next.js SaaS App Template
Powerful React-Bootstrap SaaS App Template
Powerful React-Bootstrap SaaS App Template
Modern Remix SaaS App Template
Modern Remix SaaS App Template
VueJS-Bootstrap SaaS App Template
VueJS-Bootstrap SaaS App Template
Intuitive Nuxt-Bootstrap SaaS App Template
Intuitive Nuxt-Bootstrap SaaS App Template

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
Next
HTML
React
Remix
Vue
Nuxt
Svelte
Classes
.ps-4
.pt-4
.pb-4
.pe-4
.px-4
.py-4
<div class="bg-gray-light-3 ps-4">
	<div class="w-100p h-100p bg-gray-light-4">
		<div class="d-flex justify-content-center align-items-center h-100 w-100">.ps-4</div>
	</div>
	</div>
	<div class="bg-gray-light-3 pt-4">
	<div class="w-100p h-100p bg-gray-light-4">
		<div class="d-flex justify-content-center align-items-center h-100 w-100">.pt-4</div>
	</div>
	</div>
	<div class="bg-gray-light-3 pb-4">
	<div class="w-100p h-100p bg-gray-light-4">
		<div class="d-flex justify-content-center align-items-center h-100 w-100">.pb-4</div>
	</div>
	</div>
	<div class="bg-gray-light-3 pe-4">
	<div class="w-100p h-100p bg-gray-light-4">
		<div class="d-flex justify-content-center align-items-center h-100 w-100">.pe-4</div>
	</div>
	</div>
	<div class="bg-gray-light-3 px-4">
	<div class="w-100p h-100p bg-gray-light-4">
		<div class="d-flex justify-content-center align-items-center h-100 w-100">.px-4</div>
	</div>
	</div>
	<div class="bg-gray-light-3 py-4">
	<div class="w-100p h-100p bg-gray-light-4">
		<div class="d-flex justify-content-center align-items-center h-100 w-100">.py-4</div>
	</div>
</div>
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;
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;
<template>
    <div class="bg-grey-light-3 ps-4">
        <div class="w-100p h-100p bg-grey-light-4">
            <div class="d-flex justify-content-center align-items-center h-100 w-100">.ps-4</div>
        </div>
        </div>
        <div class="bg-grey-light-3 pt-4">
        <div class="w-100p h-100p bg-grey-light-4">
            <div class="d-flex justify-content-center align-items-center h-100 w-100">.pt-4</div>
        </div>
        </div>
        <div class="bg-grey-light-3 pb-4">
        <div class="w-100p h-100p bg-grey-light-4">
            <div class="d-flex justify-content-center align-items-center h-100 w-100">.pb-4</div>
        </div>
        </div>
        <div class="bg-grey-light-3 pe-4">
        <div class="w-100p h-100p bg-grey-light-4">
            <div class="d-flex justify-content-center align-items-center h-100 w-100">.pe-4</div>
        </div>
        </div>
        <div class="bg-grey-light-3 px-4">
        <div class="w-100p h-100p bg-grey-light-4">
            <div class="d-flex justify-content-center align-items-center h-100 w-100">.px-4</div>
        </div>
        </div>
        <div class="bg-grey-light-3 py-4">
        <div class="w-100p h-100p bg-grey-light-4">
            <div class="d-flex justify-content-center align-items-center h-100 w-100">.py-4</div>
        </div>
    </div>
</template>
<template>
    <div class="bg-grey-light-3 ps-4">
        <div class="w-100p h-100p bg-grey-light-4">
            <div class="d-flex justify-content-center align-items-center h-100 w-100">.ps-4</div>
        </div>
        </div>
        <div class="bg-grey-light-3 pt-4">
        <div class="w-100p h-100p bg-grey-light-4">
            <div class="d-flex justify-content-center align-items-center h-100 w-100">.pt-4</div>
        </div>
        </div>
        <div class="bg-grey-light-3 pb-4">
        <div class="w-100p h-100p bg-grey-light-4">
            <div class="d-flex justify-content-center align-items-center h-100 w-100">.pb-4</div>
        </div>
        </div>
        <div class="bg-grey-light-3 pe-4">
        <div class="w-100p h-100p bg-grey-light-4">
            <div class="d-flex justify-content-center align-items-center h-100 w-100">.pe-4</div>
        </div>
        </div>
        <div class="bg-grey-light-3 px-4">
        <div class="w-100p h-100p bg-grey-light-4">
            <div class="d-flex justify-content-center align-items-center h-100 w-100">.px-4</div>
        </div>
        </div>
        <div class="bg-grey-light-3 py-4">
        <div class="w-100p h-100p bg-grey-light-4">
            <div class="d-flex justify-content-center align-items-center h-100 w-100">.py-4</div>
        </div>
    </div>
</template>
<div>
    <div class="bg-grey-light-3 ps-4">
        <div class="w-100p h-100p bg-grey-light-4">
            <div class="d-flex justify-content-center align-items-center h-100 w-100">.ps-4</div>
        </div>
        </div>
        <div class="bg-grey-light-3 pt-4">
        <div class="w-100p h-100p bg-grey-light-4">
            <div class="d-flex justify-content-center align-items-center h-100 w-100">.pt-4</div>
        </div>
        </div>
        <div class="bg-grey-light-3 pb-4">
        <div class="w-100p h-100p bg-grey-light-4">
            <div class="d-flex justify-content-center align-items-center h-100 w-100">.pb-4</div>
        </div>
        </div>
        <div class="bg-grey-light-3 pe-4">
        <div class="w-100p h-100p bg-grey-light-4">
            <div class="d-flex justify-content-center align-items-center h-100 w-100">.pe-4</div>
        </div>
        </div>
        <div class="bg-grey-light-3 px-4">
        <div class="w-100p h-100p bg-grey-light-4">
            <div class="d-flex justify-content-center align-items-center h-100 w-100">.px-4</div>
        </div>
        </div>
        <div class="bg-grey-light-3 py-4">
        <div class="w-100p h-100p bg-grey-light-4">
            <div class="d-flex justify-content-center align-items-center h-100 w-100">.py-4</div>
        </div>
    </div>
</div>
Margin

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

Preview
Next
HTML
React
Remix
Vue
Nuxt
Svelte
Classes
.ms-4
.ms-10
<div class="bg-gray-light-3 ps-4">
	<div class="w-100p h-100p bg-gray-light-4">
		<div class="d-flex justify-content-center align-items-center h-100 w-100">.ps-4</div>
	</div>
	</div>
	<div class="bg-gray-light-3 pt-4">
	<div class="w-100p h-100p bg-gray-light-4">
		<div class="d-flex justify-content-center align-items-center h-100 w-100">.pt-4</div>
	</div>
	</div>
	<div class="bg-gray-light-3 pb-4">
	<div class="w-100p h-100p bg-gray-light-4">
		<div class="d-flex justify-content-center align-items-center h-100 w-100">.pb-4</div>
	</div>
	</div>
	<div class="bg-gray-light-3 pe-4">
	<div class="w-100p h-100p bg-gray-light-4">
		<div class="d-flex justify-content-center align-items-center h-100 w-100">.pe-4</div>
	</div>
	</div>
	<div class="bg-gray-light-3 px-4">
	<div class="w-100p h-100p bg-gray-light-4">
		<div class="d-flex justify-content-center align-items-center h-100 w-100">.px-4</div>
	</div>
	</div>
	<div class="bg-gray-light-3 py-4">
	<div class="w-100p h-100p bg-gray-light-4">
		<div class="d-flex justify-content-center align-items-center h-100 w-100">.py-4</div>
	</div>
</div>
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;
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;
<template>
    <div class="bg-grey-light-3 ps-4">
        <div class="w-100p h-100p bg-grey-light-4">
            <div class="d-flex justify-content-center align-items-center h-100 w-100">.ps-4</div>
        </div>
        </div>
        <div class="bg-grey-light-3 pt-4">
        <div class="w-100p h-100p bg-grey-light-4">
            <div class="d-flex justify-content-center align-items-center h-100 w-100">.pt-4</div>
        </div>
        </div>
        <div class="bg-grey-light-3 pb-4">
        <div class="w-100p h-100p bg-grey-light-4">
            <div class="d-flex justify-content-center align-items-center h-100 w-100">.pb-4</div>
        </div>
        </div>
        <div class="bg-grey-light-3 pe-4">
        <div class="w-100p h-100p bg-grey-light-4">
            <div class="d-flex justify-content-center align-items-center h-100 w-100">.pe-4</div>
        </div>
        </div>
        <div class="bg-grey-light-3 px-4">
        <div class="w-100p h-100p bg-grey-light-4">
            <div class="d-flex justify-content-center align-items-center h-100 w-100">.px-4</div>
        </div>
        </div>
        <div class="bg-grey-light-3 py-4">
        <div class="w-100p h-100p bg-grey-light-4">
            <div class="d-flex justify-content-center align-items-center h-100 w-100">.py-4</div>
        </div>
    </div>
</template>
<template>
    <div class="bg-grey-light-3 ps-4">
        <div class="w-100p h-100p bg-grey-light-4">
            <div class="d-flex justify-content-center align-items-center h-100 w-100">.ps-4</div>
        </div>
        </div>
        <div class="bg-grey-light-3 pt-4">
        <div class="w-100p h-100p bg-grey-light-4">
            <div class="d-flex justify-content-center align-items-center h-100 w-100">.pt-4</div>
        </div>
        </div>
        <div class="bg-grey-light-3 pb-4">
        <div class="w-100p h-100p bg-grey-light-4">
            <div class="d-flex justify-content-center align-items-center h-100 w-100">.pb-4</div>
        </div>
        </div>
        <div class="bg-grey-light-3 pe-4">
        <div class="w-100p h-100p bg-grey-light-4">
            <div class="d-flex justify-content-center align-items-center h-100 w-100">.pe-4</div>
        </div>
        </div>
        <div class="bg-grey-light-3 px-4">
        <div class="w-100p h-100p bg-grey-light-4">
            <div class="d-flex justify-content-center align-items-center h-100 w-100">.px-4</div>
        </div>
        </div>
        <div class="bg-grey-light-3 py-4">
        <div class="w-100p h-100p bg-grey-light-4">
            <div class="d-flex justify-content-center align-items-center h-100 w-100">.py-4</div>
        </div>
    </div>
</template>
<div>
    <div class="bg-grey-light-3 ps-4">
        <div class="w-100p h-100p bg-grey-light-4">
            <div class="d-flex justify-content-center align-items-center h-100 w-100">.ps-4</div>
        </div>
        </div>
        <div class="bg-grey-light-3 pt-4">
        <div class="w-100p h-100p bg-grey-light-4">
            <div class="d-flex justify-content-center align-items-center h-100 w-100">.pt-4</div>
        </div>
        </div>
        <div class="bg-grey-light-3 pb-4">
        <div class="w-100p h-100p bg-grey-light-4">
            <div class="d-flex justify-content-center align-items-center h-100 w-100">.pb-4</div>
        </div>
        </div>
        <div class="bg-grey-light-3 pe-4">
        <div class="w-100p h-100p bg-grey-light-4">
            <div class="d-flex justify-content-center align-items-center h-100 w-100">.pe-4</div>
        </div>
        </div>
        <div class="bg-grey-light-3 px-4">
        <div class="w-100p h-100p bg-grey-light-4">
            <div class="d-flex justify-content-center align-items-center h-100 w-100">.px-4</div>
        </div>
        </div>
        <div class="bg-grey-light-3 py-4">
        <div class="w-100p h-100p bg-grey-light-4">
            <div class="d-flex justify-content-center align-items-center h-100 w-100">.py-4</div>
        </div>
    </div>
</div>
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
Next
HTML
React
Remix
Vue
Nuxt
Svelte
Classes
Grid item 1
Grid item 2
Grid item 3
<div class="bg-gray-light-3 ps-4">
	<div class="w-100p h-100p bg-gray-light-4">
		<div class="d-flex justify-content-center align-items-center h-100 w-100">.ps-4</div>
	</div>
	</div>
	<div class="bg-gray-light-3 pt-4">
	<div class="w-100p h-100p bg-gray-light-4">
		<div class="d-flex justify-content-center align-items-center h-100 w-100">.pt-4</div>
	</div>
	</div>
	<div class="bg-gray-light-3 pb-4">
	<div class="w-100p h-100p bg-gray-light-4">
		<div class="d-flex justify-content-center align-items-center h-100 w-100">.pb-4</div>
	</div>
	</div>
	<div class="bg-gray-light-3 pe-4">
	<div class="w-100p h-100p bg-gray-light-4">
		<div class="d-flex justify-content-center align-items-center h-100 w-100">.pe-4</div>
	</div>
	</div>
	<div class="bg-gray-light-3 px-4">
	<div class="w-100p h-100p bg-gray-light-4">
		<div class="d-flex justify-content-center align-items-center h-100 w-100">.px-4</div>
	</div>
	</div>
	<div class="bg-gray-light-3 py-4">
	<div class="w-100p h-100p bg-gray-light-4">
		<div class="d-flex justify-content-center align-items-center h-100 w-100">.py-4</div>
	</div>
</div>
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;
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;
<template>
    <div class="bg-grey-light-3 ps-4">
        <div class="w-100p h-100p bg-grey-light-4">
            <div class="d-flex justify-content-center align-items-center h-100 w-100">.ps-4</div>
        </div>
        </div>
        <div class="bg-grey-light-3 pt-4">
        <div class="w-100p h-100p bg-grey-light-4">
            <div class="d-flex justify-content-center align-items-center h-100 w-100">.pt-4</div>
        </div>
        </div>
        <div class="bg-grey-light-3 pb-4">
        <div class="w-100p h-100p bg-grey-light-4">
            <div class="d-flex justify-content-center align-items-center h-100 w-100">.pb-4</div>
        </div>
        </div>
        <div class="bg-grey-light-3 pe-4">
        <div class="w-100p h-100p bg-grey-light-4">
            <div class="d-flex justify-content-center align-items-center h-100 w-100">.pe-4</div>
        </div>
        </div>
        <div class="bg-grey-light-3 px-4">
        <div class="w-100p h-100p bg-grey-light-4">
            <div class="d-flex justify-content-center align-items-center h-100 w-100">.px-4</div>
        </div>
        </div>
        <div class="bg-grey-light-3 py-4">
        <div class="w-100p h-100p bg-grey-light-4">
            <div class="d-flex justify-content-center align-items-center h-100 w-100">.py-4</div>
        </div>
    </div>
</template>
<template>
    <div class="bg-grey-light-3 ps-4">
        <div class="w-100p h-100p bg-grey-light-4">
            <div class="d-flex justify-content-center align-items-center h-100 w-100">.ps-4</div>
        </div>
        </div>
        <div class="bg-grey-light-3 pt-4">
        <div class="w-100p h-100p bg-grey-light-4">
            <div class="d-flex justify-content-center align-items-center h-100 w-100">.pt-4</div>
        </div>
        </div>
        <div class="bg-grey-light-3 pb-4">
        <div class="w-100p h-100p bg-grey-light-4">
            <div class="d-flex justify-content-center align-items-center h-100 w-100">.pb-4</div>
        </div>
        </div>
        <div class="bg-grey-light-3 pe-4">
        <div class="w-100p h-100p bg-grey-light-4">
            <div class="d-flex justify-content-center align-items-center h-100 w-100">.pe-4</div>
        </div>
        </div>
        <div class="bg-grey-light-3 px-4">
        <div class="w-100p h-100p bg-grey-light-4">
            <div class="d-flex justify-content-center align-items-center h-100 w-100">.px-4</div>
        </div>
        </div>
        <div class="bg-grey-light-3 py-4">
        <div class="w-100p h-100p bg-grey-light-4">
            <div class="d-flex justify-content-center align-items-center h-100 w-100">.py-4</div>
        </div>
    </div>
</template>
<div>
    <div class="bg-grey-light-3 ps-4">
        <div class="w-100p h-100p bg-grey-light-4">
            <div class="d-flex justify-content-center align-items-center h-100 w-100">.ps-4</div>
        </div>
        </div>
        <div class="bg-grey-light-3 pt-4">
        <div class="w-100p h-100p bg-grey-light-4">
            <div class="d-flex justify-content-center align-items-center h-100 w-100">.pt-4</div>
        </div>
        </div>
        <div class="bg-grey-light-3 pb-4">
        <div class="w-100p h-100p bg-grey-light-4">
            <div class="d-flex justify-content-center align-items-center h-100 w-100">.pb-4</div>
        </div>
        </div>
        <div class="bg-grey-light-3 pe-4">
        <div class="w-100p h-100p bg-grey-light-4">
            <div class="d-flex justify-content-center align-items-center h-100 w-100">.pe-4</div>
        </div>
        </div>
        <div class="bg-grey-light-3 px-4">
        <div class="w-100p h-100p bg-grey-light-4">
            <div class="d-flex justify-content-center align-items-center h-100 w-100">.px-4</div>
        </div>
        </div>
        <div class="bg-grey-light-3 py-4">
        <div class="w-100p h-100p bg-grey-light-4">
            <div class="d-flex justify-content-center align-items-center h-100 w-100">.py-4</div>
        </div>
    </div>
</div>
Jump to