Here is a mapping table of 100 common Bootstrap properties, their abbreviations, and sample code demonstrating their usage:
| Property | Abbreviation | Sample Code |
|---|---|---|
margin |
m |
<div class="m-3">Margin 3</div>
|
margin-top |
mt |
<div class="mt-5">Margin Top 5</div>
|
margin-right |
mr |
<div class="mr-2">Margin Right 2</div>
|
margin-bottom |
mb |
<div class="mb-4">Margin Bottom 4</div>
|
margin-left |
ml |
<div class="ml-1">Margin Left 1</div>
|
padding |
p |
<div class="p-3">Padding 3</div>
|
padding-top |
pt |
<div class="pt-2">Padding Top 2</div>
|
padding-right |
pr |
<div class="pr-4">Padding Right 4</div>
|
padding-bottom |
pb |
<div class="pb-5">Padding Bottom
5</div>
|
padding-left |
pl |
<div class="pl-3">Padding Left 3</div>
|
display |
d |
<div class="d-block">Display
Block</div>
|
float |
float |
<div class="float-left">Floating
Left</div>
|
position |
position |
<div class="position-absolute">Absolute
Position</div>
|
top |
t |
<div class="position-absolute t-0">Top
0</div>
|
bottom |
b |
<div class="position-relative b-50">Bottom
50%</div>
|
left |
l |
<div class="position-absolute l-0">Left
0</div>
|
right |
r |
<div class="position-absolute r-50">Right
50%</div>
|
width |
w |
<div class="w-50">Width 50%</div>
|
height |
h |
<div class="h-100">Height 100%</div>
|
max-width |
mw |
<img class="mw-100" src="image.jpg" />
|
max-height |
mh |
<img class="mh-50" src="image.jpg" />
|
min-width |
miw |
<div class="miw-50">Minimum Width
50%</div>
|
min-height |
mih |
<div class="mih-25">Minimum Height
25%</div>
|
border |
border |
<div class="border">Border
Applied</div>
|
border-top |
bt |
<div class="border-top">Top Border
Only</div>
|
border-right |
br |
<div class="border-right">Right Border
Only</div>
|
border-bottom |
bb |
<div class="border-bottom">Bottom Border
Only</div>
|
border-left |
bl |
<div class="border-left">Left Border
Only</div>
|
border-radius |
rounded |
<div class="rounded">Rounded
Borders</div>
|
text-align |
text |
<p class="text-center">Centered
Text</p>
|
text-transform |
text-transform |
<p class="text-uppercase">Uppercase
Text</p>
|
font-weight |
fw |
<p class="fw-bold">Bold Text</p>
|
font-size |
fs |
<p class="fs-3">Font Size 3</p>
|
line-height |
lh |
<p class="lh-1">Line Height 1</p>
|
color |
text |
<p class="text-danger">Red Text</p>
|
background-color |
bg |
<div class="bg-primary">Blue
Background</div>
|
opacity |
opacity |
<div class="opacity-75">75%
Opacity</div>
|
box-shadow |
shadow |
<div class="shadow-lg">Large Box
Shadow</div>
|
overflow |
overflow |
<div class="overflow-auto">Scrollable
Content</div>
|
flex-direction |
flex-row/col |
<div class="d-flex flex-row">Flex
Row</div>
|
flex-wrap |
flex-wrap |
<div class="d-flex flex-wrap">Flex
Wrap</div>
|
align-items |
align-items |
<div class="d-flex align-items-center">Align Items
Center</div>
|
justify-content |
justify-content |
<div class="d-flex justify-content-between">Justify
Content Between</div>
|
align-self |
align-self |
<div class="d-flex"><div
class="align-self-end">Align Self
End</div></div>
|
flex-grow |
flex-grow |
<div class="flex-grow-1">Flex Grow
1</div>
|
flex-shrink |
flex-shrink |
<div class="flex-shrink-0">Flex Shrink
0</div>
|
flex-basis |
flex-basis |
<div class="flex-basis-auto">Flex Basis
Auto</div>
|
order |
order |
<div class="order-2">Order 2</div>
|
z-index |
z |
<div class="position-absolute z-3">Z-Index
3</div>
|
vertical-align |
align |
<span class="align-middle">Aligned
Middle</span>
|
visibility |
visible |
<div class="visible">Visible
Element</div>
|
cursor |
cursor |
<div class="cursor-pointer">Clickable
Area</div>
|
list-style |
list |
<ul class="list-unstyled"><li>No
Bullet</li></ul>
|
transition |
transition |
<div class="transition">Transition
Effect</div>
|
transform |
transform |
<div class="transform-scale-1">Scaled
Element</div>
|
flex |
flex |
<div class="d-flex">Flex
Container</div>
|
font-family |
font |
<p class="font-monospace">Monospace
Font</p>
|
letter-spacing |
ls |
<p class="ls-2">Letter Spacing 2</p>
|
text-decoration |
text-decoration |
<p class="text-decoration-none">No Text
Decoration</p>
|
justify-self |
justify-self |
<div class="justify-self-end">Justify Self
End</div>
|
grid-template-columns |
grid-cols |
<div class="grid grid-cols-3">3 Column
Grid</div>
|
grid-template-rows |
grid-rows |
<div class="grid grid-rows-2">2 Row
Grid</div>
|
grid-column |
col-start-end |
<div class="col-start-1 col-end-4">Grid Column
Span</div>
|
grid-row |
row-start-end |
<div class="row-start-1 row-end-3">Grid Row
Span</div>
|
gap |
gap |
<div class="d-grid gap-2">Grid Gap
2</div>
|
column-gap |
col-gap |
<div class="d-grid col-gap-3">Column Gap
3</div>
|
row-gap |
row-gap |
<div class="d-grid row-gap-2">Row Gap
2</div>
|
background-image |
bg-image |
<div class="bg-image"
style="background-image:url('image.jpg')">Background
Image</div>
|
animation |
animate |
<div class="animate-pulse">Pulsing
Animation</div>
|
aspect-ratio |
aspect |
<div class="aspect-ratio-box">Aspect Ratio
Box</div>
|
columns |
columns |
<div class="columns-2">Two
Columns</div>
|
grid-auto-flow |
auto-flow |
<div class="grid auto-flow-row">Auto Flow
Row</div>
|
object-fit |
object-fit |
<img src="image.jpg" class="object-fit-cover"
/>
|
order |
order |
<div class="order-last">Last in Flex
Order</div>
|
opacity |
opacity |
<div class="opacity-50">50%
Opacity</div>
|
overflow |
overflow |
<div class="overflow-hidden">Hidden
Overflow</div>
|
This table covers a wide range of Bootstrap utilities and classes, providing abbreviations and practical examples.
Komentar
Posting Komentar