Bootstrap Rounded Corner Classes - Bootstrap Tutorial 25

Опубликовано: 29 Сентябрь 2024
на канале: ChidresTechTutorials

4,933

Notes for You:: Bootstrap Rounded Corner Classes - Bootstrap Tutorial 25

rounded:
- sets the 4 pixels (i.e. 0.25 rem) border radius on all corners of an html element
- rounds all corners of an html element by 0.25rem i.e. 4 pixels

rounded-top:
- sets the 4 pixels border radius on top left and top right corners of an html element
- rounds top left and top right corners of an html element by 0.25rem i.e. 4 pixels

rounded-right:
- sets the 4 pixels border radius on top right and bottom right corners of an html element
- rounds top right and bottom right corners of an html element by 0.25rem i.e. 4 pixels

rounded-bottom:
- sets the 4 pixels border radius on bottom left and bottom right corners of an html element
- rounds bottom left and bottom right corners of an html element by 0.25rem i.e. 4 pixels

rounded-left:
- sets the 4 pixels border radius on bottom left and top left corners of an html element
- rounds bottom left and top left corners of an html element by 0.25rem i.e. 4 pixels

rounded-circle:
- sets the 50% border radius on all corners of an html element
- use it to display an html element in circle or oval shape

rounded-0:
- sets the 0px border radius on all corners of an html element
- use it to remove rounded corners of an html element

Example Code:

<div style="width:100px; height:100px;" class="bg-primary m-1 rounded">
</div>

<div style="width:100px; height:100px;" class="bg-primary m-1 rounded-top">
</div>

<div style="width:100px; height:100px;" class="bg-primary m-1 rounded-right">
</div>

<div style="width:100px; height:100px;" class="bg-primary m-1 rounded-bottom">
</div>

<div style="width:100px; height:100px;" class="bg-primary m-1 rounded-left">
</div>

<div style="width:100px; height:100px;" class="bg-primary m-1 rounded-circle">
</div>

<div style="width:150px; height:100px;" class="bg-primary m-1 rounded-circle">
</div>

<div style="width:100px; height:100px; border-radius:50%;" class="bg-primary m-1">
</div>

<div style="width:100px; height:100px; border-top-left-radius:50%;" class="bg-primary m-1">
</div>

<div style="width:100px; height:100px; border-top-right-radius:50%;" class="bg-primary m-1">
</div>

<div style="width:100px; height:100px; border-top-left-radius:50%; border-bottom-right-radius:50%;" class="bg-primary m-1">
</div>

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

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

Follow the link for next video:
Bootstrap Tutorial 26 - Bootstrap Float & Clearfix Related Classes | Bootstrap Float & Clearfix
   • Bootstrap Float and Clearfix Classes ...

Follow the link for previous video:
Bootstrap Tutorial 24 - Bootstrap Border Related Classes | Bootstrap Borders
   • Bootstrap Border Classes - Bootstrap ...

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

Bootstrap Tutorials Playlist:-
   • Bootstrap4 Tutorials

=========================================
Watch My Other Useful Tutorials:-

Dreamweaver Tutorials Playlist:-
   • Dreamweaver Tutorials

PHP Tutorials Playlist:-
   • PHP Tutorials

MySQL Tutorials Playlist:-
   • MySQL Tutorials

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

Subscribe to our YouTube channel:-
   / chidrestechtutorials

Join as member of our YouTube channel:-
https://www.youtube.com/chidrestechtu...

Become our Patron:-
  / chidrestechtutorials

Visit our Website:-
https://www.chidrestechtutorials.com

Download our notes from Instamojo:-
https://chidrestechtutorials.myinstam...

Buy our products on Spring:-
https://chidres-tech-tutorials.creato...

=========================================
Follow Us:-

Google My Business:-
https://chidrestechtutorials.business...

Google Blog:-
http://manjunathchidre.blogspot.com

LinkedIn:-
  / chidrestechtutorials

Facebook:-
  / chidrestechtutorials

Twitter:-
  / manjunathchidre

Tumblr:-
  / chidrestechtutorials

Pinterest:-
  / chidrestechtutorials

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

Despite my inconsistent uploads; Thanks for being amazing learners and still sticking with me on YouTube.

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