Basically there are dozens of bootstrap class to make a faster and mobile friendly development and designing. For example borders, spacing, shadows, hiding, aligning, showing, scrolling, margins, paddings, popover, and tooltips. Hope you will enjoy this tutorial.
Spacing
In this example p class is used padding and
m class is used for margin. While the size given
to padding and margins depend on the screen size. On the big
screen it apply big padding and margins.
<div class="m-4 pt-5 bg-info">Box with m-4 and pt-5</div>
<div class="m-5 pb-5 bg-primary">Box with m-5 and pb-5</div>
<div class="m-2 p-5 bg-info">Box with m-2 and p-5</div>
Output of above code
Box with m-4 and pt-5
Box with m-5 and pb-5
Box with m-2 and p-5
Basic example Width
In this example class w is used for width.
The value of width is given in percentage which depends on the screen size. While
mw class used for maximum-width.
<divclass="w-25 bg-danger text-white p-2">Danger 25%</div><divclass="w-50 bg-danger text-white p-2">Danger 50%</div><divclass="w-75 bg-danger text-white p-2">Danger 75%</div><divclass="w-100 bg-danger text-white p-2">Danger 100%</div><divclass="mw-100 bg-danger text-white p-2">Maximum Danger 100%</div>
Output of above code
Danger 25%
Danger 50%
Danger 75%
Danger 100%
Maximum Danger 100%
Basic example Height
In this example h class used for height.
The value of height is given in percentage which depends on the screen size. While
mh class used for maximum-height.
<divstyle="height:250px;overflow:auto;"><divclass="h-25 d-inline-block bg-danger text-white p-2">Danger 25%</div><divclass="h-50 d-inline-block bg-danger text-white p-2">Danger 50%</div><divclass="h-75 d-inline-block bg-danger text-white p-2">Danger 75%</div><divclass="h-100 d-inline-block bg-danger text-white p-2">Danger 100%</div><divclass="mh-100 d-inline-block bg-danger text-white p-2"style="height:100%">Maximum Height 100%</div></div>
Output of above code
Danger 25%
Danger 50%
Danger 75%
Danger 100%
Maximum Height 100%
Basic example Borders
In this example bootstrap class border is used
for borders.
<styletype="text/css">div{display:inline-block;width:60px;height:60px;margin:7px;}</style><divclass="border bg-light">Box 1</div><divclass="border bg-light border-0">Box 2</div><divclass="border bg-light border-top-0">Box 3</div><divclass="border bg-light border-right-0">Box 4</div><divclass="border bg-light border-bottom-0">Box 5</div><divclass="border bg-light border-left-0">Box 6</div>
Output of above code
Box 1
Box 2
Box 3
Box 4
Box 5
Box 6
Border Colors
In this example different bootstrap class like border-primary,
border-secondary and other classes are for border colors.
<styletype="text/css">div{display:inline-block;width:60px;height:60px;margin:7px;}</style><divclass="border bg-light border-primary">Box 1</div><divclass="border bg-light border-secondary">Box 2</div><divclass="border bg-light border-info">Box 3</div><divclass="border bg-light border-danger">Box 4</div><divclass="border bg-light border-warning">Box 5</div><divclass="border bg-light border-dark">Box 6</div>
Output of above code
Box 1
Box 2
Box 3
Box 4
Box 5
Box 6
The Best
Comment here
If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.
