Bootstrap Border Classes - Bootstrap5 Tutorial 21

Notes for You:: Bootstrap Border Classes - Bootstrap5 Tutorial 21

How to Add Border:
border:
- sets (1 pixel solid light gray) border on all sides of an HTML element
border-top:
- sets (1 pixel solid light gray) the border only on top side of an HTML element
border-end:
- sets (1 pixel solid light gray) the border only on right side of an HTML element
border-bottom:
- sets (1 pixel solid light gray) the border only on bottom side of an HTML element
border-start:
- sets (1 pixel solid light gray) the border only on left side of an HTML element

How to Remove Border:
border-top-0:
- sets the top border to 0 pixels, i.e. it removes the top border of an HTML element
border-end-0:
- sets the right border to 0 pixels, i.e. it removes the right border of an HTML element
border-bottom-0:
- sets the bottom border to 0 pixels, i.e. it removes the bottom border of an HTML element
border-start-0:
- sets the left border to 0 pixels, i.e. it removes the left border of an HTML element
border-0:
- sets the border to 0 pixels, i.e. it removes the border from all sides of an HTML element

How to Apply Color to Border:
border-primary:
- sets the border color to blue color
border-secondary:
- sets the border color to mid gray color
border-success:
- sets the border color to green color
border-warning:
- sets the border color to yellow color
border-info:
- sets the border color to pale blue color
border-danger:
- sets the border color to red color
border-dark:
- sets the border color to dark gray color
border-light:
- sets the border color to light gray color

Example Code:

<div class="m-3 border">Some text</div>
<div class="m-3 border-top">Some text</div>
<div class="m-3 border-end">Some text</div>
<div class="m-3 border-bottom">Some text</div>
<div class="m-3 border-start">Some text</div>

<div class="m-3 border border-top-0">Some text</div>
<div class="m-3 border border-end-0">Some text</div>
<div class="m-3 border border-bottom-0">Some text</div>
<div class="m-3 border border-start-0">Some text</div>
<div class="m-3 border border-0">Some text</div>

<div class="m-3 border border-primary">Some text</div>
<div class="m-3 border border-secondary">Some text</div>
<div class="m-3 border border-success">Some text</div>
<div class="m-3 border border-warning">Some text</div>
<div class="m-3 border border-info">Some text</div>
<div class="m-3 border border-danger">Some text</div>
<div class="m-3 border border-dark">Some text</div>
<div class="m-3 border border-light">Some text</div>
<div class="m-3 border border-white">Some text</div>
<div class="m-3" style="border:5px solid red;">Some text</div>
<div class="m-3" style="border:5px double red;">Some text</div>

Note:
- replace < with less-than symbol.
- replace > with greater-than symbol.

=========================================

Follow the link for next video:

Follow the link for previous video:

=========================================

Bootstrap5 Tutorials Playlist:

Bootstrap4 Tutorials Playlist:-

=========================================
Watch my other useful tutorials:-

Dreamweaver Tutorials Playlist:-

PHP Tutorials Playlist:-

MySQL Tutorials Playlist:-

=========================================

Subscribe to our YouTube channel:-

Join as member of our YouTube channel:-

Become our Patron:-

Visit our Website:-

Download our notes from Instamojo:-

Buy our products on Spring:-

=========================================
Follow us:-

Google My Business:-

Google Blog:-

LinkedIn:-

Facebook:-

Twitter:-

Tumblr:-

Pinterest:-

=========================================
Hash Tags:-
#ChidresTechTutorials #Bootstrap #BootstrapTutorial #Bootstrap5