Bootstrap includes a wide range of shorthand responsive margin, padding, and gap utility classes to modify an element's appearance.
A wide range of shorthand responsive padding utility classes to modify an element's appearance.
<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>A wide range of shorthand responsive margin utility classes to modify an element's appearance.
<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>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).
<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>