Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Does bootstrap have builtin padding and margin classes?

Does Bootstrap have built-in padding and margin classes like pad-10, mar-left-10 or I have to add my own custom classes? For example, similar to the ones here at padding and margin tabs.

like image 724
Ozgur Erdogan Avatar asked Aug 26 '15 17:08

Ozgur Erdogan


People also ask

How do I set padding and margin in bootstrap?

l - sets margin-left or padding-left. r - sets margin-right or padding-right. x - sets both padding-left and padding-right or margin-left and margin-right. y - sets both padding-top and padding-bottom or margin-top and margin-bottom.

What is padding in bootstrap?

The bootstrap padding is one of the essential utility to make space between content and container. This is a designing component to make space inside of the container or border using bootstrap class. This is an advance utility to modify the elements and their container using space and space size property.

Which class is used to set the margin in bootstrap?

Similarly, to add margin to an element, we can use the following margin classes: 'm-{size}' for all sides, 'mt-{size}' for top, 'mb-{size}' for bottom, 'ml-{size}' for left, 'mr-{size}' for right, 'mx-{size}' for horizontal and 'my-{size}' for vertical margins.


2 Answers

There are built in classes, namely:

.padding-xs { padding: .25em; } .padding-sm { padding: .5em; } .padding-md { padding: 1em; } .padding-lg { padding: 1.5em; } .padding-xl { padding: 3em; }  .padding-x-xs { padding: .25em 0; } .padding-x-sm { padding: .5em 0; } .padding-x-md { padding: 1em 0; } .padding-x-lg { padding: 1.5em 0; } .padding-x-xl { padding: 3em 0; }  .padding-y-xs { padding: 0 .25em; } .padding-y-sm { padding: 0 .5em; } .padding-y-md { padding: 0 1em; } .padding-y-lg { padding: 0 1.5em; } .padding-y-xl { padding: 0 3em; }  .padding-top-xs { padding-top: .25em; } .padding-top-sm { padding-top: .5em; } .padding-top-md { padding-top: 1em; } .padding-top-lg { padding-top: 1.5em; } .padding-top-xl { padding-top: 3em; }  .padding-right-xs { padding-right: .25em; } .padding-right-sm { padding-right: .5em; } .padding-right-md { padding-right: 1em; } .padding-right-lg { padding-right: 1.5em; } .padding-right-xl { padding-right: 3em; }  .padding-bottom-xs { padding-bottom: .25em; } .padding-bottom-sm { padding-bottom: .5em; } .padding-bottom-md { padding-bottom: 1em; } .padding-bottom-lg { padding-bottom: 1.5em; } .padding-bottom-xl { padding-bottom: 3em; }  .padding-left-xs { padding-left: .25em; } .padding-left-sm { padding-left: .5em; } .padding-left-md { padding-left: 1em; } .padding-left-lg { padding-left: 1.5em; } .padding-left-xl { padding-left: 3em; }  .margin-xs { margin: .25em; } .margin-sm { margin: .5em; } .margin-md { margin: 1em; } .margin-lg { margin: 1.5em; } .margin-xl { margin: 3em; }  .margin-x-xs { margin: .25em 0; } .margin-x-sm { margin: .5em 0; } .margin-x-md { margin: 1em 0; } .margin-x-lg { margin: 1.5em 0; } .margin-x-xl { margin: 3em 0; }  .margin-y-xs { margin: 0 .25em; } .margin-y-sm { margin: 0 .5em; } .margin-y-md { margin: 0 1em; } .margin-y-lg { margin: 0 1.5em; } .margin-y-xl { margin: 0 3em; }  .margin-top-xs { margin-top: .25em; } .margin-top-sm { margin-top: .5em; } .margin-top-md { margin-top: 1em; } .margin-top-lg { margin-top: 1.5em; } .margin-top-xl { margin-top: 3em; }  .margin-right-xs { margin-right: .25em; } .margin-right-sm { margin-right: .5em; } .margin-right-md { margin-right: 1em; } .margin-right-lg { margin-right: 1.5em; } .margin-right-xl { margin-right: 3em; }  .margin-bottom-xs { margin-bottom: .25em; } .margin-bottom-sm { margin-bottom: .5em; } .margin-bottom-md { margin-bottom: 1em; } .margin-bottom-lg { margin-bottom: 1.5em; } .margin-bottom-xl { margin-bottom: 3em; }  .margin-left-xs { margin-left: .25em; } .margin-left-sm { margin-left: .5em; } .margin-left-md { margin-left: 1em; } .margin-left-lg { margin-left: 1.5em; } .margin-left-xl { margin-left: 3em; } 
like image 199
Guest Avatar answered Oct 14 '22 07:10

Guest


Bootstrap has many facility of classes to easily style elements if HTML. It includes a various of padding and margin classes for modification of the appearance of the element.

.m-0 { margin:0!important; } .m-1 { margin:.25rem!important; } .m-2 { margin:.5rem!important; } .m-3 { margin:1rem!important; } .m-4 { margin:1.5rem!important; } .m-5 { margin:3rem!important; }  .mt-0 { margin-top:0!important; } .mr-0 { margin-right:0!important; } .mb-0 { margin-bottom:0!important; } .ml-0 { margin-left:0!important; } .mx-0 { margin-left:0 !important;margin-right:0 !important; } .my-0 { margin-top:0!important;margin-bottom:0!important; }  .mt-1 { margin-top:.25rem!important; } .mr-1 { margin-right:.25rem!important; } .mb-1 { margin-bottom:.25rem!important; } .ml-1 { margin-left:.25rem!important; } .mx-1 { margin-left:.25rem!important;margin-right:.25rem!important; } .my-1 { margin-top:.25rem!important;margin-bottom:.25rem!important; }  .mt-2 { margin-top:.5rem!important; } .mr-2 { margin-right:.5rem!important; } .mb-2 { margin-bottom:.5rem!important; } .ml-2 { margin-left:.5rem!important; } .mx-2 { margin-right:.5rem!important;margin-left:.5rem!important; } .my-2 { margin-top:.5rem!important;margin-bottom:.5rem!important; }  .mt-3 { margin-top:1rem!important; } .mr-3 { margin-right:1rem!important; } .mb-3 { margin-bottom:1rem!important; } .ml-3 { margin-left:1rem!important; } .mx-3 { margin-right:1rem!important;margin-left:1rem!important; } .my-3 { margin-bottom:1rem!important;margin-top:1rem!important; }  .mt-4 { margin-top:1.5rem!important; } .mr-4 { margin-right:1.5rem!important; } .mb-4 { margin-bottom:1.5rem!important; } .ml-4 { margin-left:1.5rem!important; } .mx-4 { margin-right:1.5rem!important;margin-left:1.5rem!important; } .my-4 { margin-top:1.5rem!important;margin-bottom:1.5rem!important; }  .mt-5 { margin-top:3rem!important; } .mr-5 { margin-right:3rem!important; } .mb-5 { margin-bottom:3rem!important; } .ml-5 { margin-left:3rem!important; } .mx-5 { margin-right:3rem!important;margin-left:3rem!important; } .my-5 { margin-top:3rem!important;margin-bottom:3rem!important; }  .mt-auto { margin-top:auto!important; } .mr-auto { margin-right:auto!important; } .mb-auto { margin-bottom:auto!important; } .ml-auto { margin-left:auto!important; } .mx-auto { margin-right:auto!important;margin-left:auto!important; } .my-auto { margin-bottom:auto!important;margin-top:auto!important; }  .p-0 { padding:0!important; } .p-1 { padding:.25rem!important; } .p-2 { padding:.5rem!important; } .p-3 { padding:1rem!important; } .p-4 { padding:1.5rem!important; } .p-5 { padding:3rem!important; }  .pt-0 { padding-top:0!important; } .pr-0 { padding-right:0!important; } .pb-0 { padding-bottom:0!important; } .pl-0 { padding-left:0!important; }                              .px-0 { padding-left:0!important;padding-right:0!important; } .py-0 { padding-top:0!important;padding-bottom:0!important; }  .pt-1 { padding-top:.25rem!important; }          .pr-1 { padding-right:.25rem!important; }                        .pb-1 { padding-bottom:.25rem!important; }       .pl-1 { padding-left:.25rem!important; }                             .px-1 { padding-left:.25rem!important;padding-right:.25rem!important; } .py-1 { padding-top:.25rem!important;padding-bottom:.25rem!important; }  .pt-2 { padding-top:.5rem!important; }                                               .pr-2 { padding-right:.5rem!important; }                                 .pb-2 { padding-bottom:.5rem!important; }                .pl-2 { padding-left:.5rem!important; }                                              .px-2 { padding-right:.5rem!important;padding-left:.5rem!important; } .py-2 { padding-top:.5rem!important;padding-bottom:.5rem!important; }  .pt-3 { padding-top:1rem!important; }                                .pr-3 { padding-right:1rem!important; }              .pb-3 { padding-bottom:1rem!important; }                 .pl-3 { padding-left:1rem!important; }                               .py-3 { padding-bottom:1rem!important;padding-top:1rem!important; } .px-3 { padding-right:1rem!important;padding-left:1rem!important; }  .pt-4 { padding-top:1.5rem!important; }                              .pr-4 { padding-right:1.5rem!important; }                .pb-4 { padding-bottom:1.5rem!important; }               .pl-4 { padding-left:1.5rem!important; }                                 .px-4 { padding-right:1.5rem!important;padding-left:1.5rem!important; } .py-4 { padding-top:1.5rem!important;padding-bottom:1.5rem!important; }  .pt-5 { padding-top:3rem!important; }    .pr-5 { padding-right:3rem!important; }  .pb-5 { padding-bottom:3rem!important; }     .pl-5 { padding-left:3rem!important; }   .px-5 { padding-right:3rem!important;padding-left:3rem!important; } .py-5 { padding-top:3rem!important;padding-bottom:3rem!important; } 

https://jsfiddle.net/ssuryar/x47bca1u/

like image 33
Surya R Praveen Avatar answered Oct 14 '22 05:10

Surya R Praveen