How to apply Padding using Bootstrap ?

Last Updated : 05 Apr, 2024

Bootstrap provides a wide range of utility classes for adding padding to all sides of an element. These classes allow us to easily add padding to elements without the need to write custom CSS. By applying these padding classes directly to HTML elements, one can quickly adjust spacing and improve the layout of the website or web application.

Table of Content

Padding on all sides (horizontal and vertical)
Padding on specific sides

Padding on all sides (horizontal and vertical)

We can use classes like p-1, p-2, …, and p-5 to apply padding of different sizes. The number represents the amount of padding in rem units.

Example: In this example, we will see all the padding utility classes of sizes 0-5 rem on all sides.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" />
    <title>Padding Example</title>
    <!-- Bootstrap CDN -->
    <link
        href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
        rel="stylesheet" />
</head>

<body>
    <div class="container">
        <!-- Heading with green color -->
        <div class="p-3">
            <h1 class="text-center text-success">
                GeeksforGeeks
            </h1>
        </div>

        <!-- Different paragraphs with padding and background color -->
        <div class="row">
            <div class="col-sm-6">
                <p class="p-1 bg-primary text-white">
                    Paragraph with padding p-1
                </p>
                <p class="p-2 bg-secondary text-white">
                    Paragraph with padding p-2
                </p>
                <p class="p-3 bg-info text-white">
                    Paragraph with padding p-3
                </p>
            </div>
            <div class="col-sm-6">
                <p class="p-4 bg-warning text-dark">
                    Paragraph with padding p-4
                </p>
                <p class="p-5 bg-danger text-white">
                    Paragraph with padding p-5
                </p>
            </div>
        </div>
    </div>
</body>

</html>

Output:

padding-bootstrap-1-(1)

Padding on specific sides

For padding on specific sides, use classes like pt-1, pb-2, pl-3, pr-4, px-5, py-5 for top, bottom, left, right, left-right and top-bottom padding respectively. Again, the number represents the padding size in rem units.

Example: In this example, we will see all the padding utility classes on specific sides

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Padding Example</title>
    <!-- Bootstrap CDN -->
    <link
        href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
        rel="stylesheet" />
</head>

<body>
    <div class="container">
        <!-- Heading with green color -->
        <div class="py-3">
            <h1 class="text-center text-success">
                GeeksforGeeks
            </h1>
        </div>

        <!-- Different paragraphs with different padding -->
        <div class="row">
            <div class="col-sm-6">
                <p class="pt-3 bg-primary text-white">
                    Paragraph with padding pt-3
                </p>
                <p class="pb-3 bg-secondary text-white">
                    Paragraph with padding pb-3
                </p>
                <p class="pl-3 bg-info text-white">
                    Paragraph with padding pl-3
                </p>
            </div>
            <div class="col-sm-6">
                <p class="pr-4 bg-warning text-dark">
                    Paragraph with padding pr-4
                </p>
                <p class="px-5 bg-danger text-white">
                    Paragraph with padding px-5
                </p>
            </div>
        </div>
    </div>
</body>

</html>