Twitter Bootstrap Question posted in

Twitter Bootstrap: margin-bottom built in css class

Is there built in margin bottom class to use?
I tried with bottom5 like

<div class="col-lg-2 bottom5"></div>

but this doesn’t work.

Tags:

6

Answers


  1. 0

    Try adding the class, named
    margin-bottom-5

    The classes are named using the format: {property}-{sides}-{size}

    from: here

    Login or Signup to reply.
  2. 0

    There is no bootstrap class for margins like you describe. The reasons would be the need for classes for margins 0 to 10s or 100s, as well as the need for multiple units, such as px, em, %, etc.

    You can make your own classes fairly easy. Even easier with sublime text-editor and multi-select.

    That being said, you don’t want to abstract every style rule into the html. Original CSS is useful for something particular to your element, such as margins. Using bootstrap classes for every style would lead to difficult to read HTML.

    This Question is tagged Bootstrap 3, but when you update to Bootstrap 4, there is a built in utility for this.

    Login or Signup to reply.
  3. 0

    Boostrap 4 has a spacing feature that solves that problem https://getbootstrap.com/docs/4.0/utilities/spacing/

    But, in you are sticked to older bootstrap version or can’t use it a all and in case you need a complete list of margin and padding classes, here it is

    /* MARGINS & PADDINGS */
.p-xxs {
  padding: 5px !important;
}
.p-xs {
  padding: 10px !important;
}
.p-sm {
  padding: 15px !important;
}
.p-m {
  padding: 20px !important;
}
.p-md {
  padding: 25px !important;
}
.p-lg {
  padding: 30px !important;
}
.p-xl {
  padding: 40px !important;
}
.m-xxs {
  margin: 2px 4px;
}
.m-xs {
  margin: 5px;
}
.m-sm {
  margin: 10px;
}
.m {
  margin: 15px;
}
.m-md {
  margin: 20px;
}
.m-lg {
  margin: 30px;
}
.m-xl {
  margin: 50px;
}
.m-n {
  margin: 0 !important;
}
.m-l-none {
  margin-left: 0;
}
.m-l-xs {
  margin-left: 5px;
}
.m-l-sm {
  margin-left: 10px;
}
.m-l {
  margin-left: 15px;
}
.m-l-md {
  margin-left: 20px;
}
.m-l-lg {
  margin-left: 30px;
}
.m-l-xl {
  margin-left: 40px;
}
.m-l-n-xxs {
  margin-left: -1px;
}
.m-l-n-xs {
  margin-left: -5px;
}
.m-l-n-sm {
  margin-left: -10px;
}
.m-l-n {
  margin-left: -15px;
}
.m-l-n-md {
  margin-left: -20px;
}
.m-l-n-lg {
  margin-left: -30px;
}
.m-l-n-xl {
  margin-left: -40px;
}
.m-t-none {
  margin-top: 0;
}
.m-t-xxs {
  margin-top: 1px;
}
.m-t-xs {
  margin-top: 5px;
}
.m-t-sm {
  margin-top: 10px;
}
.m-t {
  margin-top: 15px;
}
.m-t-md {
  margin-top: 20px;
}
.m-t-lg {
  margin-top: 30px;
}
.m-t-xl {
  margin-top: 40px;
}
.m-t-xxl {
  margin-top: 50px;
}
.m-t-xxxl {
  margin-top: 60px;
}
.m-t-n-xxs {
  margin-top: -1px;
}
.m-t-n-xs {
  margin-top: -5px;
}
.m-t-n-sm {
  margin-top: -10px;
}
.m-t-n {
  margin-top: -15px;
}
.m-t-n-md {
  margin-top: -20px;
}
.m-t-n-lg {
  margin-top: -30px;
}
.m-t-n-xl {
  margin-top: -40px;
}
.m-r-none {
  margin-right: 0;
}
.m-r-xxs {
  margin-right: 1px;
}
.m-r-xs {
  margin-right: 5px;
}
.m-r-sm {
  margin-right: 10px;
}
.m-r {
  margin-right: 15px;
}
.m-r-md {
  margin-right: 20px;
}
.m-r-lg {
  margin-right: 30px;
}
.m-r-xl {
  margin-right: 40px;
}
.m-r-n-xxs {
  margin-right: -1px;
}
.m-r-n-xs {
  margin-right: -5px;
}
.m-r-n-sm {
  margin-right: -10px;
}
.m-r-n {
  margin-right: -15px;
}
.m-r-n-md {
  margin-right: -20px;
}
.m-r-n-lg {
  margin-right: -30px;
}
.m-r-n-xl {
  margin-right: -40px;
}
.m-b-none {
  margin-bottom: 0;
}
.m-b-xxs {
  margin-bottom: 1px;
}
.m-b-xs {
  margin-bottom: 5px;
}
.m-b-sm {
  margin-bottom: 10px;
}
.m-b {
  margin-bottom: 15px;
}
.m-b-md {
  margin-bottom: 20px;
}
.m-b-lg {
  margin-bottom: 30px;
}
.m-b-xl {
  margin-bottom: 40px;
}
.m-b-n-xxs {
  margin-bottom: -1px;
}
.m-b-n-xs {
  margin-bottom: -5px;
}
.m-b-n-sm {
  margin-bottom: -10px;
}
.m-b-n {
  margin-bottom: -15px;
}
.m-b-n-md {
  margin-bottom: -20px;
}
.m-b-n-lg {
  margin-bottom: -30px;
}
.m-b-n-xl {
  margin-bottom: -40px;
}
.space-15 {
  margin: 15px 0;
}
.space-20 {
  margin: 20px 0;
}
.space-25 {
  margin: 25px 0;
}
.space-30 {
  margin: 30px 0;
}

    It’s taken from Homer Responsive Admin Theme by WebAppLayers. I guess author don’t mind sharing that. It probably will save 20min of time of some Web Developer out there.

    Login or Signup to reply.
  4. 0

    Now available in bootstrap 4

    Example-

    <div class="mb-5 p-5">
    margin-bottom and padding with size 5
    </div>

    You can use-

    m for margin
p for padding

    And for sides:

    t - top
b - bottom
l - left
r - right
x - both left & right
y - both top & bottom
blank -all sides

    For size- 0,1,2,3,4,5

    Login or Signup to reply.
  5. 0

    UPDATE : Bootstrap 4 Classes

    Bootstrap 4 classes to add margin and padding

    Bootstrap 4 has a wide range of responsive margin and padding utility classes. They work for all breakpoints: xs (<=576px), sm (>=576px), md (>=768px), lg (>=992px) or xl (>=1200px)):

    The classes are used in the format: {property}{sides}-{size}
    for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.

    Where property is one of:

    m – sets margin

    p – sets padding

    Where sides is one of:

    t – sets margin-top or padding-top

    b – sets margin-bottom or padding-bottom

    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(X-axis)

    y – sets both padding-top and padding-bottom or margin-top and margin-bottom(Y-axis)

    blank – sets a margin or padding on all 4 sides of the element
    Where size is one of:

    0 – sets margin or padding to 0

    1 – sets margin or padding to .25rem (4px if font-size is 16px)

    2 – sets margin or padding to .5rem (8px if font-size is 16px)

    3 – sets margin or padding to 1rem (16px if font-size is 16px)

    4 – sets margin or padding to 1.5rem (24px if font-size is 16px)

    5 – sets margin or padding to 3rem (48px if font-size is 16px)

    auto – sets margin to auto

    Reference Links : https://getbootstrap.com/docs/4.0/utilities/spacing/

    HOW TO USE

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="pt-4 bg-warning">I only have a top padding (1.5rem = 24px)</div>
<div class="p-5 bg-success">I have a padding on all sides (3rem = 48px)</div>
<div class="m-5 pb-5 bg-info">I have a margin on all sides (3rem = 48px) and a bottom padding (3rem = 48px)</div>
    Login or Signup to reply.
  6. 0

    If you want to add margin bottom you can add from mb-0 to mb-5.
    See :https://getbootstrap.com/docs/4.4/utilities/spacing/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search