Does bootstrap have built-in add-ons and field classes?

Does Bootstrap have built-in padding classes and fields like pad-10 , mar-left-10 or do I need to add my own custom classes? For example, tabs and margins similar here .

+7
css padding margin twitter-bootstrap
source share
3 answers
 .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; } 
+6
source share

I think you are asking how to create a response distance between the rows or col-xx-xx classes.

You can do this with the col-xx-offset-xx class:

 <div class="col-xs-4"> </div> <div class="col-xs-7 col-xs-offset-1"> </div> 

As for adding margin or padding directly to elements, there are some easy ways to do this depending on your element. You can use btn-lg or label-lg or well-lg . If you ever wondered how I can give this little pad. Try adding primary class name + lg or sm or md depending on your needs:

 <button class="btn btn-success btn-lg btn-block">Big Button w/ Display: Block</button> 
+4
source share

Bootstrap 4 has a new notation for margin and padding fields. See Bootstrap 4.0 Documentation - Interval .

From the documentation:

notation

Spacing utilities that apply to all breakpoints, from xs to xl , have no acronym for breakpoints in them. This is due to the fact that these classes are applied from min-width: 0 and up, and therefore are not connected by the request environment. The remaining breakpoints, however, include a contraction breakpoint.

Classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm , md , lg and xl .

<strong> Examples

.mt-0 { margin-top: 0 !important; }

.p-3 { padding: $spacer !important; }

+1
source share

All Articles