What is class= mb-0 in Bootstrap 4?
Bootstrap 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 & {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.
m - sets margin
p - sets padding
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
y - sets both padding-top and padding-bottom or margin-top and margin-bottom
blank - sets a margin or padding on all 4 sides of the element
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
See more at Bootstrap 4.5 - Spacing
Read more in w3schools
what do css classes like my-2, my-lg-0, mr-sm-2 do in bootstrap 4?
Those are bootstrap spacing utilities classes :
mr-sm-2
:
r - for classes that set
margin-right
orpadding-right
my-2
, my-lg-0
:
y - for classes that set both
*-top
and*-bottom
the m
m - for classes that set margin
you can see the notation from boostrap spacing here
sm
and lg
are utilities classes that everyone who uses bootstrap are use to see it:
sm
- small
lg
- large
How to understand mb-5 class attribute in Bootstrap
First of all, I highly suggest you read the Bootstrap 4 docs. The docs relating to this question about mb-5
class can be found here. It explains in detail about the classes. The mb-5
class is all about the element spacing...
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.
So in particular to mb-5
class, this is the margin bottom spacing with a sizing of 5. As you have figured out, this class has only one property of the margin-bottom
. That is all this class does.
To find all other styling properties, I suggest you use some sort of dev tools, such as Chrome's Dev Tools, and inspect the h1 to find all the relevant styles for it.
It is recommended to create your own class for the element and change any attributes in a separate linked CSS file. This way, you don't change any of Bootstrap's file in case you need to revert back to their attributes at a later date.
How do I use the Spacing Utility Classes in Bootstrap
Refer to the Spacing (Bootstrap v4 alpha) documentation.
The classes are named using the format: {property}-{sides}-{size}
Where size is one of: *
0
- for classes that eliminate themargin
orpadding
by setting it to0 * 1
- (by default) for classes that
set the margin or padding to$spacer-x
or$spacer-y * 2
- (by
default) for classes that set the margin or padding to$spacer-x *
or
1.5$spacer-y * 1.5 * 3
- (by default) for classes that set the margin or padding to$spacer-x * 3
or$spacer-y * 3
.
So use m-t-3
instead of m-t-lg
.
Does bootstrap have builtin padding and margin classes?
There are built in classes, namely:
.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; }
responsive spacing (i.e. mb-lg-2 mb-sm-3 etc) not working in Bootstrap 5
The margin classes mb-0 mb-md-3 mb-lg-0
should work as expected in both Bootstrap 4 and Bootstrap 5.
Responsive margin bottom working in Bootstrap 5
However text-lg-left text-md-right
has changed to text-lg-start text-md-end
in Bootstrap 5
Meaning of numbers in col-md-4 , col-xs-1 , col-lg-2 in Bootstrap
Applies to Bootstrap 3 only.
Ignoring the letters (xs, sm, md, lg) for now, I'll start with just the numbers...
- the numbers (1-12) represent a portion of the total width of any div
- all divs are divided into 12 columns
- so,
col-*-6
spans 6 of 12 columns (half the width),col-*-12
spans 12 of 12 columns (the entire width), etc
So, if you want two equal columns to span a div, write
<div class="col-xs-6">Column 1</div>
<div class="col-xs-6">Column 2</div>
Or, if you want three unequal columns to span that same width, you could write:
<div class="col-xs-2">Column 1</div>
<div class="col-xs-6">Column 2</div>
<div class="col-xs-4">Column 3</div>
You'll notice the # of columns always add up to 12. It can be less than twelve, but beware if more than 12, as your offending divs will bump down to the next row (not .row
, which is another story altogether).
You can also nest columns within columns, (best with a .row
wrapper around them) such as:
<div class="col-xs-6">
<div class="row">
<div class="col-xs-4">Column 1-a</div>
<div class="col-xs-8">Column 1-b</div>
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-2">Column 2-a</div>
<div class="col-xs-10">Column 2-b</div>
</div>
</div>
Each set of nested divs also span up to 12 columns of their parent div. NOTE: Since each .col
class has 15px padding on either side, you should usually wrap nested columns in a .row
, which has -15px margins. This avoids duplicating the padding and keeps the content lined up between nested and non-nested col classes.
-- You didn't specifically ask about the xs, sm, md, lg
usage, but they go hand-in-hand so I can't help but touch on it...
In short, they are used to define at which screen size that class should apply:
- xs = extra small screens (mobile phones)
- sm = small screens (tablets)
- md = medium screens (some desktops)
- lg = large screens (remaining desktops)
Read the "Grid
Options"
chapter from the official Bootstrap documentation for more details.
You should usually classify a div using multiple column classes so it behaves differently depending on the screen size (this is the heart of what makes bootstrap responsive). eg: a div with classes col-xs-6
and col-sm-4
will span half the screen on the mobile phone (xs) and 1/3 of the screen on tablets(sm).
<div class="col-xs-6 col-sm-4">Column 1</div> <!-- 1/2 width on mobile, 1/3 screen on tablet) -->
<div class="col-xs-6 col-sm-8">Column 2</div> <!-- 1/2 width on mobile, 2/3 width on tablet -->
NOTE: as per comment below, grid classes for a given screen size apply to that screen size and larger unless another declaration overrides it (i.e. col-xs-6 col-md-4
spans 6 columns on xs
and sm
, and 4 columns on md
and lg
, even though sm
and lg
were never explicitly declared)
NOTE: if you don't define xs
, it will default to col-xs-12
(i.e. col-sm-6
is half the width on sm
, md
and lg
screens, but full-width on xs
screens).
NOTE: it's actually totally fine if your .row
includes more than 12 cols, as long as you are aware of how they will react. --This is a contentious issue, and not everyone agrees.
Does bootstrap 4 have a built in horizontal divider?
HTML already has a built-in horizontal divider called <hr/>
(short for "horizontal rule"). Bootstrap styles it like this:
hr {
margin-top: 1rem;
margin-bottom: 1rem;
border: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<p>
Some text
<hr/>
More text
</p>
Related Topics
Ie8 Display Inline-Block Not Working
What Do "Flex" and "Justify-Content" Achieve That "Text-Align" Doesn'T
How to Position an Element Fixed Relative to Parent
How to Center Elements Horizontally or Vertically With Twitter Bootstrap
What Does @Media Screen and (Max-Width: 1024Px) Mean in Css
How to Rotate the Background Image in the Container
Remove Gutter Space For a Specific Div Only
What Does an Asterisk Do in a CSS Property Name
How to Make React CSS Import Component-Scoped
How to Animate Handwriting Text on the Web Page Using Svg
Applying CSS Styles Only to Certain Elements
How to Create an Angled Corner in Css
Css: Margin-Top When Parent'S Got No Border
Css Background-Size: Cover + Background-Attachment: Fixed Clipping Background Images
Css Native Variables Not Working in Media Queries
Any Way to Limit Border Length
"Text-Decoration" and the ":After" Pseudo-Element, Revisited