1. 選擇 Documentation -- 選擇Utilities -- Spacing
2. margin
和 padding
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 size is one of:
0
- for classes that eliminate themargin
orpadding
by setting it to0
1
- (by default) for classes that set themargin
orpadding
to$spacer * .25
2
- (by default) for classes that set themargin
orpadding
to$spacer * .5
3
- (by default) for classes that set themargin
orpadding
to$spacer
4
- (by default) for classes that set themargin
orpadding
to$spacer * 1.5
5
- (by default) for classes that set themargin
orpadding
to$spacer * 3
auto
- for classes that set themargin
to auto
<div class="container">
<div class="bg-danger m-5">I am simple div</div>
<div class="bg-success m-4">I am simple div</div>
<div class="bg-info m-3">I am simple div</div>
<div class="bg-warning m-2">I am simple div</div>
<div class="bg-primary m-1">I am simple div</div>
<div class="bg-secondary m-0">I am simple div</div>
<div class="bg-dark text-light m-0">I am simple div</div>
</div>
<br>
<br>
<br>
<div class="container">
<div class="bg-danger p-5">I am simple div</div>
<div class="bg-success p-4">I am simple div</div>
<div class="bg-info p-3">I am simple div</div>
<div class="bg-warning p-2">I am simple div</div>
<div class="bg-primary p-1">I am simple div</div>
<div class="bg-secondary p-0">I am simple div</div>
<div class="bg-dark text-light p-0">I am simple div</div>
</div>
<div class="container">
<div class="bg-danger ml-5 ml-md-5">I am simple div</div>
<div class="bg-success mt-4 mt-lg-5">I am simple div</div>
<div class="bg-info mb-3 mb-sm-5" >I am simple div</div>
<div class="bg-warning mr-2">I am simple div</div>
<div class="bg-primary m-1">I am simple div</div>
<div class="bg-secondary m-0">I am simple div</div>
<div class="bg-dark text-light m-0">I am simple div</div>
</div>
m-5
ml-5
ml-md-5
DIV水平居中
<div class="container">
<div class="bg-danger mx-auto w-25 text-center">I am simple div</div>
</div>
負margin(有負的margin,沒有負的padding)
<div class="row mx-md-n5 ">
<div class="col px-md-5">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col px-md-5">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
mx-n5 mx-md-n5