Padding utilities
Use the following classes to modify the padding property of any element.
Padding
.p-0 { padding: 0px;
}
.p-5 { padding: 5px;
}
.p-10 { padding: 10px;
}
.p-15 { padding: 15px;
}
.p-20 { padding: 20px;
}
.p-25 { padding: 25px;
}
.p-30 { padding: 30px;
}
.p-35 { padding: 35px;
}
.p-40 { padding: 40px;
}
.p-45 { padding: 45px;
}
.p-50 { padding: 50px;
}Examples
.p-0
Hello world!
.p-10
Hello world!
.p-25
Hello world!
.p-50
Hello world!
Padding left
.p-l-0 { padding-left: 0px;
}
.p-l-5 { padding-left: 5px;
}
.p-l-10 { padding-left: 10px;
}
.p-l-15 { padding-left: 15px;
}
.p-l-20 { padding-left: 20px;
}
.p-l-25 { padding-left: 25px;
}
.p-l-30 { padding-left: 30px;
}
.p-l-35 { padding-left: 35px;
}
.p-l-40 { padding-left: 40px;
}
.p-l-45 { padding-left: 45px;
}
.p-l-50 { padding-left: 50px;
}Examples
.p-l-0
Hello world!
.p-l-10
Hello world!
.p-l-25
Hello world!
.p-l-50
Hello world!
Padding right
.p-r-0 { padding-right: 0px;
}
.p-r-5 { padding-right: 5px;
}
.p-r-10 { padding-right: 10px;
}
.p-r-15 { padding-right: 15px;
}
.p-r-20 { padding-right: 20px;
}
.p-r-25 { padding-right: 25px;
}
.p-r-30 { padding-right: 30px;
}
.p-r-35 { padding-right: 35px;
}
.p-r-40 { padding-right: 40px;
}
.p-r-45 { padding-right: 45px;
}
.p-r-50 { padding-right: 50px;
}Examples
.p-r-0
Hello world!
.p-r-10
Hello world!
.p-r-25
Hello world!
.p-r-50
Hello world!
Padding top
.p-t-0 { padding-top: 0px;
}
.p-t-5 { padding-top: 5px;
}
.p-t-10 { padding-top: 10px;
}
.p-t-15 { padding-top: 15px;
}
.p-t-20 { padding-top: 20px;
}
.p-t-25 { padding-top: 25px;
}
.p-t-30 { padding-top: 30px;
}
.p-t-35 { padding-top: 35px;
}
.p-t-40 { padding-top: 40px;
}
.p-t-45 { padding-top: 45px;
}
.p-t-50 { padding-top: 50px;
}Examples
.p-t-0
Hello world!
.p-t-10
Hello world!
.p-t-25
Hello world!
.p-t-50
Hello world!
Padding bottom
.p-b-0 { padding-bottom: 0px;
}
.p-b-5 { padding-bottom: 5px;
}
.p-b-10 { padding-bottom: 10px;
}
.p-b-15 { padding-bottom: 15px;
}
.p-b-20 { padding-bottom: 20px;
}
.p-b-25 { padding-bottom: 25px;
}
.p-b-30 { padding-bottom: 30px;
}
.p-b-35 { padding-bottom: 35px;
}
.p-b-40 { padding-bottom: 40px;
}
.p-b-45 { padding-bottom: 45px;
}
.p-b-50 { padding-bottom: 50px;
}Examples
.p-b-0
Hello world!
.p-b-10
Hello world!
.p-b-25
Hello world!
.p-b-50