Margin

Controls the space around an element.

Classes
Class Properties
m-0 margin: 0;
m-1 margin: 0.25rem;
m-2 margin: 0.5rem;
m-3 margin: 1rem;
m-4 margin: 1.5rem;
m-5 margin: 2rem;
m-6 margin: 3rem;
m-7 margin: 4rem;
m-8 margin: 5rem;
mt-0 margin-top: 0;
mt-1 margin-top: 0.25rem;
mt-2 margin-top: 0.5rem;
mt-3 margin-top: 1rem;
mt-4 margin-top: 1.5rem;
mt-5 margin-top: 2rem;
mt-6 margin-top: 3rem;
mt-7 margin-top: 4rem;
mt-8 margin-top: 5rem;
mr-0 margin-right: 0;
mr-1 margin-right: 0.25rem;
mr-2 margin-right: 0.5rem;
mr-3 margin-right: 1rem;
mr-4 margin-right: 1.5rem;
mr-5 margin-right: 2rem;
mr-6 margin-right: 3rem;
mr-7 margin-right: 4rem;
mr-8 margin-right: 5rem;
mb-0 margin-bottom: 0;
mb-1 margin-bottom: 0.25rem;
mb-2 margin-bottom: 0.5rem;
mb-3 margin-bottom: 1rem;
mb-4 margin-bottom: 1.5rem;
mb-5 margin-bottom: 2rem;
mb-6 margin-bottom: 3rem;
mb-7 margin-bottom: 4rem;
mb-8 margin-bottom: 5rem;
ml-0 margin-left: 0;
ml-1 margin-left: 0.25rem;
ml-2 margin-left: 0.5rem;
ml-3 margin-left: 1rem;
ml-4 margin-left: 1.5rem;
ml-5 margin-left: 2rem;
ml-6 margin-left: 3rem;
ml-7 margin-left: 4rem;
ml-8 margin-left: 5rem;
mx-0 margin-left: 0;
margin-right: 0;
mx-1 margin-left: 0.25rem;
margin-right: 0.25rem;
mx-2 margin-left: 0.5rem;
margin-right: 0.5rem;
mx-3 margin-left: 1rem;
margin-right: 1rem;
mx-4 margin-left: 1.5rem;
margin-right: 1.5rem;
mx-5 margin-left: 2rem;
margin-right: 2rem;
mx-6 margin-left: 3rem;
margin-right: 3rem;
mx-7 margin-left: 4rem;
margin-right: 4rem;
mx-8 margin-left: 5rem;
margin-right: 5rem;
my-0 margin-top: 0;
margin-bottom: 0;
my-1 margin-top: 0.25rem;
margin-bottom: 0.25rem;
my-2 margin-top: 0.5rem;
margin-bottom: 0.5rem;
my-3 margin-top: 1rem;
margin-bottom: 1rem;
my-4 margin-top: 1.5rem;
margin-bottom: 1.5rem;
my-5 margin-top: 2rem;
margin-bottom: 2rem;
my-6 margin-top: 3rem;
margin-bottom: 3rem;
my-7 margin-top: 4rem;
margin-bottom: 4rem;
my-8 margin-top: 5rem;
margin-bottom: 5rem;
Single Side Margin

Margin can be specified on a specific edge.

mt-5
mr-4
mb-3
ml-6

<div class="card flex flex-wrap align-items-center justify-content-center">
    <div class="bg-blue-50 shadow-1 m-3" style="width: 200px;">
        <div class="mt-5 bg-blue-100 text-blue-500 font-bold shadow-2 p-3 flex align-items-center justify-content-center">mt-5</div>
    </div>
    <div class="bg-blue-50 shadow-1 m-3" style="width: 200px;">
        <div class="mr-4 bg-blue-100 text-blue-500 font-bold shadow-2 p-3 flex align-items-center justify-content-center">mr-4</div>
    </div>
    <div class="bg-blue-50 shadow-1 m-3" style="width: 200px;">
        <div class="mb-3 bg-blue-100 text-blue-500 font-bold shadow-2 p-3 flex align-items-center justify-content-center">mb-3</div>
    </div>
    <div class="bg-blue-50 shadow-1 m-3" style="width: 200px;">
        <div class="ml-6 bg-blue-100 text-blue-500 font-bold shadow-2 p-3 flex align-items-center justify-content-center">ml-6</div>
    </div>
</div>

Horizontal Margin

Same margin value can be defined at the left and right sides with shorthand classes.

mx-6

<div class="card flex flex-wrap align-items-center justify-content-center">
    <div class="bg-blue-50 shadow-1 m-3" style="width: 200px;">
        <div class="mx-6 bg-blue-100 text-blue-500 font-bold shadow-2 p-3 flex align-items-center justify-content-center">mx-6</div>
    </div>
</div>

Vertical Margin

Same margin value can also be defined at the top and bottom sides with shorthand classes.

my-5

<div class="card flex flex-wrap align-items-center justify-content-center">
    <div class="bg-blue-50 shadow-1 m-3" style="width: 200px;">
        <div class="my-5 bg-blue-100 text-blue-500 font-bold shadow-2 p-3 flex align-items-center justify-content-center">my-5</div>
    </div>
</div>

Responsive

Responsive alternatives are available for customizations based on screen size. Add the responsive breakpoint keyword followed by a semi-colon as a prefix such as md:m-3 to use a responsive class.

  • sm: small screens e.g. phones
  • md: medium screens e.g. tablets
  • lg: large screens e.g. notebooks
  • xl: larger screens e.g monitors
my-5 and mx-0 on small screen

<div class="card flex flex-wrap align-items-center justify-content-center">
    <div class="bg-blue-50 shadow-1 m-3">
        <div class="my-5 mx-0 md:mx-5 md:my-0 bg-blue-100 text-blue-500 font-bold shadow-2 p-3 flex align-items-center justify-content-center">my-5 and mx-0 on small screen</div>
    </div>
</div>