Spacing
Bootstrap spacing
Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance.
Assign responsive-friendly
margin
or
padding
values to an element or a subset of its sides with shorthand classes. Includes support for individual
properties, all properties, and vertical and horizontal properties. Classes are built from a default Sass map ranging
from
.25rem
to
3rem
.
Notation
Spacing utilities that apply to all breakpoints, from
xs
to
xl
, have no breakpoint abbreviation in them. This is because those classes are applied from
min-
width: 0
and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint
abbreviation.
The classes are named using the format
{property}{sides}-{size}
for
xs
and
{property}{sides}-{breakpoint}-{size}
for
sm
,
md
,
lg
, and
xl
.
Where property is one of:
-
m
- for classes that setmargin
-
p
- for classes that setpadding
Where sides is one of:
-
t
- for classes that setmargin-top
orpadding-top
-
b
- for classes that setmargin-bottom
orpadding-bottom
-
l
- for classes that setmargin-left
orpadding-left
-
r
- for classes that setmargin-right
orpadding-right
-
x
- for classes that set both*-left
and*-right
-
y
- for classes that set both*-top
and*-bottom
- blank - for classes that set a
margin
orpadding
on all 4 sides of the element
Where breakpoint is one of:
-
sm
-
md
-
lg
-
xl
Where size is one of:
-
0
- for classes that eliminate the margin orpadding
by setting it to0
-
1
- (by default) for classes that set themargin
orpadding
to$spacer-x
* .25
or$spacer-y * .25
-
2
- (by default) for classes that set themargin
orpadding
to$spacer-x
* .5
or$spacer-y * .5
-
3
- (by default) for classes that set themargin
orpadding
to$spacer-x
or$spacer-y
-
4
- (by default) for classes that set themargin
orpadding
to$spacer-x
* 1.5
or$spacer-y * 1.5
-
5
- (by default) for classes that set themargin
orpadding
to$spacer-x
* 3
or$spacer-y * 3
$spacers
Sass map variable.)
Examples
Here are some representative examples of these classes:
.mt-0 {
margin-top: 0 !important;
}
.ml-1 {
margin-left: ($spacer-x * .25) !important;
}
.px-2 {
padding-left: ($spacer-x * .5) !important;
padding-right: ($spacer-x * .5) !important;
}
.p-3 {
padding: $spacer-y $spacer-x !important;
Responsive spacing
The above mentioned
notation includes the
breakpoint
value and as such allows us to apply spacing responsively. It means that you can condition spacing
of elements depending on the type of display used - similarly to logic found in
display property.
Let's say you want to prepare a fully responsive
navbar. Some elements within may require setting them a bit further apart by applying additional margin - with
.ml-3
, for example. All looks good while the containing element stays horizonal, but once the viewport gets narrower
and the
.nav-item
s align vertically, the spacing utility used becomes obsolete (as the item is pushed to the right and
stands out). The solution here is setting a responsive spacing utility - one that appears only when you really want it
to.
Consider the table below:
Screen Size | Class |
---|---|
Appears on all |
.ml-3
|
Appears only on xs |
.ml-3 .ml-sm-0
|
Appears only on sm |
.ml-sm-3 .ml-md-0
|
Appears only on md |
.ml-md-3 .ml-lg-0
|
Appears only on lg |
.ml-lg-3 .d-xl-0
|
Appears only on xl |
.ml-xl-3
|
This is a regularly spaced paraph.
And this one has left margin visible on
xs
,
sm
and
md
displays.
<p>This is a regularly spaced paraph.</p>
<p class="ml-5 ml-lg-0">And this one has left margin visible on xs, sm and md displays.</p>
Horizontal centering
Additionally, Bootstrap also includes an
.mx-auto
class for horizontally centering fixed-width block level content—that is, content that has
display: block
and a
width
set—by setting the horizontal margins to
auto
.
<div class="mx-auto" style="width: 200px; background-color: rgba(86,61,124,.15);">
Centered element
</div>
Getting started : download & setup
Download
All the components and features are part of MDBootstrap package.
MDBootstrap (Material Design for Bootstrap) is a free (MIT Licensed) framework combining Material Design and the newest Bootstrap 4.
Click the button below to go to Download Page, where you can download MDBootstrap package.
MDBootstrap Download MDBootstrap AboutMDB Pro
Using components and features labeled as MDB Pro component requires MDB Pro package.
Click the button below to learn more about MDBbootstrap Pro package
MDBootstrap ProTutorials
If you need additional help to start, use our "5 min Quick Start" or "Full tutorial" resources.
5 min Quick Start Full TutorialCompilation
To reduce a weight of MDBootstrap package, you can compile your own, custom package containing only components and features you need.
Map of dependencies of SCSS files in MDBootstrap:
Legend:
'-->' means 'required'
All free and pro files require files from 'core' catalog
'none' means 'this component doesn't require anything except core files'
A file wrapped by `< >` means that this file make the base component prettier but it isn't necessary for the proper working
All PRO components require 'pro/_variables.scss' file
scss/
|
|-- core/
| |
| |-- bootstrap/
| | |-- _functions.scss
| | |-- _variables.scss
| |
| |-- _colors.scss
| |-- _global.scss
| |-- _helpers.scss
| |-- _masks.scss
| |-- _mixins.scss
| |-- _typography.scss
| |-- _variables.scss
| |-- _waves.scss
|
|-- free/
| |-- _animations-basic.scss --> none
| |-- _animations-extended.scss --> _animations-basic.scss
| |-- _buttons.scss --> none
| |-- _cards.scss --> none <_buttons.scss>
| |-- _dropdowns.scss --> none <_buttons.scss>
| |-- _input-group.scss --> _forms.scss, _buttons.scss, _dropdowns.scss
| |-- _navbars.scss --> none <_buttons.scss, _forms.scss, _input-group.scss>
| |-- _pagination.scss --> none
| |-- _badges.scss --> none
| |-- _modals.scss --> _buttons.scss, _forms.scss (PRO --> _tabs.scss)
| |-- _carousels.scss --> <_buttons.scss>
| |-- _forms.scss --> none
| |-- _msc.scss --> none <_buttons.scss, _forms.scss, _cards.scss>
| |-- _footers.scss none <_buttons.scss> (PRO: )
| |-- _list-group.scss --> none
| |-- _tables.scss --> none (PRO: _material-select.scss, pro/_forms.scss, _checkbox.scss, pro/_buttons.scss, pro/_cards.scss, _pagination.scss, pro/_msc.scss)
| |-- _depreciated.scss
|
|-- pro/
| |
| |-- picker/
| | |-- _default.scss --> none
| | |-- _default-time.scss --> _default.scss, free/_forms.scss, free/_buttons.scss, pro/_buttons.scss, free/_cards.scss
| | |-- _default-date.scss --> _default.scss, free/_forms.scss
| |
| |-- sections/
| | |-- _templates.scss --> _sidenav.scss
| | |-- _social.scss --> free/_cards.scss, free/ _forms.scss, free/_buttons.scss, pro/_buttons.scss,
| | |-- _team.scss --> free/_buttons.scss, pro/_buttons.scss, free/_cards.scss, pro/_cards.scss
| | |-- _testimonials.scss --> free/_carousels.scss, pro/_carousels.scss, free/_buttons.scss, pro/_buttons.scss
| | |-- _magazine.scss --> _badges.scss
| | |-- _pricing.scss --> free/_buttons.scss, pro/_buttons.scss
| | |-- _contacts.scss --> free/_forms.scss, pro/_forms.scss, free/_buttons.scss, pro/_buttons.scss
| |
| |-- _variables.scss
| |-- _buttons.scss --> free/_buttons.scss, pro/_msc.scss, _checkbox.scss, _radio.scss
| |-- _social-buttons.scss --> free/_buttons.scss, pro/_buttons.scss
| |-- _tabs.scss --> _cards.scss
| |-- _cards.scss --> free/_cards.scss <_buttons.scss, _social-buttons.scss>
| |-- _dropdowns.scss --> free/_dropdowns.scss, free/_buttons.scss
| |-- _navbars.scss --> free/_navbars.scss (PRO: )
| |-- _scrollspy.scss --> none
| |-- _lightbox.scss --> none
| |-- _chips.scss --> none
| |-- _msc.scss --> none
| |-- _forms.scss --> none
| |-- _radio.scss --> none
| |-- _checkbox.scss --> none
| |-- _material-select.scss --> none
| |-- _switch.scss --> none
| |-- _file-input.scss --> free/_forms.scss, free/_buttons.scss
| |-- _range.scss --> none
| |-- _input-group.scss --> free/_input-group.scss and the same what free input group, _checkbox.scss, _radio.scss
| |-- _autocomplete.scss --> free/_forms.scss
| |-- _accordion.scss --> pro/_animations.scss, free/_cards.scss
| |-- _parallax.scss --> none
| |-- _sidenav.scss --> free/_forms.scss, pro/_animations.scss, sections/_templates.scss
| |-- _ecommerce.scss --> free/_cards.scss, pro/_cards.scss, free/_buttons.scss, pro/_buttons.scss, pro/_msc.scss
| |-- _carousels.scss --> free/_carousels.scss, free/_cards.scss, free/_buttons.scss
| |-- _steppers.scss --> free/_buttons.scss
| |-- _blog.scss --> none
| |-- _toasts.scss --> free/_buttons.scss
| |-- _animations.scss --> none
| |-- _charts.scss --> none
| |-- _progress.scss --> none
| |-- _scrollbar.scss --> none
| |-- _skins.scss --> none
| |-- _depreciated.scss
|
`-- _custom-skin.scss
`-- _custom-styles.scss
`-- _custom-variables.scss
`-- mdb.scss
Map of dependencies of JavaScript modules in MDBootstrap:
Legend:
'-->' means 'required'
All files require jQuery and bootstrap.js
js/
├── dist/
│ ├── buttons.js
│ ├── cards.js
│ ├── character-counter.js
│ ├── chips.js
│ ├── collapsible.js --> vendor/velocity.js
│ ├── dropdown.js --> Popper.js, jquery.easing.js
│ ├── file-input.js
│ ├── forms-free.js
│ ├── material-select.js --> dropdown.js
│ ├── mdb-autocomplete.js
│ ├── preloading.js
│ ├── range-input.js --> vendor/velocity.js
│ ├── scrolling-navbar.js
│ ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
│ └── smooth-scroll.js
├── _intro-mdb-pro.js
├── modules.js
├── src/
│ ├── buttons.js
│ ├── cards.js
│ ├── character-counter.js
│ ├── chips.js
│ ├── collapsible.js --> vendor/velocity.js
│ ├── dropdown.js --> Popper.js, jquery.easing.js
│ ├── file-input.js
│ ├── forms-free.js
│ ├── material-select.js --> dropdown.js
│ ├── mdb-autocomplete.js
│ ├── preloading.js
│ ├── range-input.js --> vendor/velocity.js
│ ├── scrolling-navbar.js
│ ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
│ └── smooth-scroll.js
└── vendor/
├── addons/
│ ├── datatables.js
│ └── datatables.min.js
├── chart.js
├── enhanced-modals.js
├── hammer.js
├── jarallax.js
├── jarallax-video.js --> vendor/jarallax.js
├── jquery.easing.js
├── jquery.easypiechart.js
├── jquery.hammer.js --> vendor/hammer.js
├── jquery.sticky.js
├── lightbox.js
├── picker-date.js --> vendor/picker.js
├── picker.js
├── picker-time.js --> vendor/picker.js
├── scrollbar.js
├── scrolling-navbar.js
├── toastr.js
├── velocity.js
├── waves.js
└── wow.js
Compilation & Customization tutorial
If you need additional help to compile your custom package, use our Compilation & Customization tutorial
Compilation & Customization tutorialIntegrations with Angular, React or Vue
Apart from standard Bootstrap integration with jQuery, MDBootstrap provides integrations with Angular, React and Vue.
About MDB Angular About MDB React About MDB Vue