mdbootstrap / material-design-for-bootstrap

Important! A new UI Kit version for Bootstrap 5 is available. Access the latest free version via the link below.
https://mdbootstrap.com/docs/standard/
MIT License
9.34k stars 1.15k forks source link

Difference in mb- mt- pb- pt- between mdb and bootstrap 4 alpha-6 #54

Closed phtmgt closed 7 years ago

phtmgt commented 7 years ago

In alpha-6 the padding and margin changed and now pt-3, for example, is much smaller than it used to be (in alpha 5/4, etc.). In mdb, however, mb- mt- pb- pt- still have the old sizes. In my workflow, for example, I work on pure bootstrap 4 alpha 6 and when I apply mdb everything needs to be adjusted back. Do you plan on synchronizing padding and margin properties with alpha 6 any time soon? I hate doing the same work over and over again.

phtmgt commented 7 years ago

So, I decided to share my "fix": add the CSS below.

/* start MDB tweaks */
.pt-3 {
    padding-top: 1rem!important;
}
.pb-3 {
    padding-bottom: 1rem!important;
}
.mt-3 {
    margin-top: 1rem!important;
}
.mb-3 {
    margin-bottom: 1rem!important;
}
.pt-2 {
    padding-top: .5rem!important;
}
.pb-2 {
    padding-bottom: .5rem!important;
}
.mt-2 {
    margin-top: .5rem!important;
}
.mb-2 {
    margin-bottom: .5rem!important;
}
.pt-1 {
    padding-top: .25rem!important;
}
.pb-1 {
    padding-bottom: .25rem!important;
}
.mt-1 {
    margin-top: .25rem!important;
}
.mb-1 {
    margin-bottom: .25rem!important;
}

.pr-3 {
    padding-right: 1rem!important;
}
.pl-3 {
    padding-left: 1rem!important;
}
.mr-3 {
    margin-right: 1rem!important;
}
.ml-3 {
    margin-left: 1rem!important;
}
.pr-2 {
    padding-right: .5rem!important;
}
.pl-2 {
    padding-left: .5rem!important;
}
.mr-2 {
    margin-right: .5rem!important;
}
.ml-2 {
    margin-left: .5rem!important;
}
.pr-1 {
    padding-right: .25rem!important;
}
.pl-1 {
    padding-left: .25rem!important;
}
.mr-1 {
    margin-right: .25rem!important;
}
.ml-1 {
    margin-left: .25rem!important;
}
/* end MDB tweaks */