Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 411
user1765862 Avatar asked Jan 18 '16 21:01

user1765862


People also ask

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.

How do I add a margin to a bootstrap row?

If you need to separate rows in bootstrap, you can simply use . form-group . This adds 15px margin to the bottom of row.

What is margin-bottom in CSS?

The margin-bottom CSS property sets the margin area on the bottom of an element. A positive value places it farther from its neighbors, while a negative value places it closer.


5 Answers

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.

like image 76
Piotr Salaciak Avatar answered Oct 16 '22 16:10

Piotr Salaciak


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

like image 41
Shivam Chhetri Avatar answered Oct 16 '22 17:10

Shivam Chhetri


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.

like image 24
Goose Avatar answered Oct 16 '22 16:10

Goose


Try adding the class, named margin-bottom-5

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

from: here

like image 25
CriPstian Avatar answered Oct 16 '22 17:10

CriPstian


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>
like image 1
Ashish Singh Rawat Avatar answered Oct 16 '22 16:10

Ashish Singh Rawat