Bootstrap Spacing Classes - Bootstrap Tutorial 23 скачать в хорошем качестве

Bootstrap Spacing Classes - Bootstrap Tutorial 23

Notes for You:: Bootstrap Spacing Classes - Bootstrap Tutorial 23 Margin indicates the space around an element Padding indicates the space around the content of an element Basic Syntax: {property} [ side - device ] {- size} where: property: p or m p: indicates padding m: indicates margin side: t, l, r, b, x, or y t - top l - left r - right b- bottom x - left and right y - top and bottom Note: if you do not specify the side then it indicates all sides device : sm, md, lg, or xl sm : in small screen device and above md: in medium screen device and above lg : in large screen device and above xl : in extra large screen device and above Note: if you do not specify the device then it indicates in any screen size device size: 0, 1, 2, 3, 4, or 5 0 : $spacer * 0 = 16px * 0 = 0px 1 : $spacer * 0.25 = 16px * 0.25 = 4px 2 : $spacer * 0.50 = 16px * 0.50 = 8px 3 : $spacer * 1 = 16px * 1 = 16px 4 : $spacer * 1.5 = 16px * 1.5 = 24px 5 : $spacer * 2 = 16px * 2 = 32px auto: used only with margin Example code: Padding <div style="border:1px solid black;" class="p-0"> Some Text </div> <div style="border:1px solid black;" class="p-1"> Some Text </div> <div style="border:1px solid black;" class="p-2"> Some Text </div> <div style="border:1px solid black;" class="p-3"> Some Text </div> <div style="border:1px solid black;" class="p-4"> Some Text </div> <div style="border:1px solid black;" class="p-5"> Some Text </div> <div style="border:1px solid black; padding:5rem;"> Some Text </div> <div style="border:1px solid black;" class="pl-3"> Some Text </div> <div style="border:1px solid black;" class="pt-3"> Some Text </div> <div style="border:1px solid black;" class="pr-3"> Some Text </div> <div style="border:1px solid black;" class="pb-3"> Some Text </div> <div style="border:1px solid black;" class="px-3"> Some Text </div> <div style="border:1px solid black;" class="py-3"> Some Text </div> <div style="border:1px solid black;" class="p-sm-3 p-md-4 p-lg-5"> Some Text </div> Example code: Margin <div style="border:1px solid black;" class="m-0"> Some Text </div> <div style="border:1px solid black;" class="m-1"> Some Text </div> <div style="border:1px solid black;" class="m-2"> Some Text </div> <div style="border:1px solid black;" class="m-3"> Some Text </div> <div style="border:1px solid black;" class="m-4"> Some Text </div> <div style="border:1px solid black;" class="m-5"> Some Text </div> <div style="border:1px solid black; margin:5rem;"> Some Text </div> <div style="border:1px solid black;" class="ml-3"> Some Text </div> <div style="border:1px solid black;" class="mt-3"> Some Text </div> <div style="border:1px solid black;" class="mr-3"> Some Text </div> <div style="border:1px solid black;" class="mb-3"> Some Text </div> <div style="border:1px solid black;" class="mx-3"> Some Text </div> <div style="border:1px solid black;" class="my-3"> Some Text </div> <div style="border:1px solid black;" class="w-75 mx-auto"> Some Text </div> <div style="border:1px solid black;" class="m-sm-3 m-md-4 m-lg-5"> Some Text </div> Note: replace < with less-than symbol. replace > with greater-than symbol. ========================================= Follow the link for next video: Bootstrap Tutorial 24 - Bootstrap Border Related Classes | Bootstrap Borders    • Bootstrap Border Classes - Bootstrap Tutor...   Follow the link for previous video: Bootstrap Tutorial 22 - Bootstrap Sizing Related Classes | Bootstrap Sizing    • Bootstrap Sizing Classes - Bootstrap Tutor...   ========================================= 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... ========================================= Hash Tags:- #ChidresTechTutorials #Bootstrap #BootstrapTutorial