Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Aprende Managing Margins and Padding | Basic Concepts
Bootstrap Essentials for Modern Websites

book
Managing Margins and Padding

Margins

Margins in CSS control the space between elements and the outer edges of their containers. In Bootstrap, margins can be easily adjusted using utility classes, eliminating the need for custom CSS.

Margin Classes

Bootstrap provides a set of margin utility classes following a consistent naming convention:

m-{side}-{size}

{side} can be:

{size} can be:

html

index.html

copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Margins and Paddings Example 1</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
</head>
<body>
<!-- `mt-3`: Adds a margin of 1rem to the top of an element. -->
<div class="mt-3">Content with top margin</div>

<!-- `mx-4`: Adds a margin of 1.5rem horizontally (both left and right) to an element. -->
<div class="mx-4">Content with horizontal margins</div>

<!-- `my-2`: Adds a margin of 0.5rem vertically (both top and bottom) to an element. -->
<div class="my-2">Content with vertical margins</div>

<!-- `m-auto`: Centers an element horizontally by applying automatic left and right margins. -->
<div class="m-auto">Centered content</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>
</body>
</html>

Paddings

Paddings in CSS determine the space between the content of an element and its borders. In Bootstrap, developers can easily control padding using utility classes, which helps maintain consistent spacing throughout the layout without needing custom CSS.

Padding Classes

Bootstrap provides a set of padding utility classes following a consistent naming convention:

p-{side}-{size}

The variations for {side} and {size} are identical to those for margin.

html

index.html

copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Margins and Paddings Example 2</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
</head>
<body>
<!-- `pt-3`: Adds padding of 1rem to the top of an element. -->
<div class="pt-3">Content with top padding</div>

<!-- `px-4`: Adds horizontal padding of 1.5rem (both left and right) to an element. -->
<div class="px-4">Content with horizontal padding</div>

<!-- `py-2`: Adds vertical padding of 0.5rem (both top and bottom) to an element. -->
<div class="py-2">Content with vertical padding</div>

<!-- `p-5`: Adds padding of 3rem to all sides of an element. -->
<div class="p-5">Content with uniform padding</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>
</body>
</html>

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 3. Capítulo 6
some-alt