093-padding-gutters, remove all default padding which is 15px
row g-0
first block
second block
third block


094-padding-y-axis-top-bottom-padding
lblue py-5
first block
second block
third block


095-padding-x-axis-both-sides-padding
lblue px-5 & green py-5
first block
second block
third block


096-margin-x-y-axis
lblue mx-5 & green my-5
first block
second block
third block


097-padding-with-breakpoints
lblue px-lg-5 & green py-lg-5 & orange py-lg-2
first block breakpoint
second block breakpoint
third block breakpoint


098-margin-with-breakpoints
lblue mx-lg-5 & green my-lg-5 & orange my-lg-2
margin block breakpoint
margin block breakpoint
margin block breakpoint


099-negative-margin-with-breakpoints
lblue mx-lg-n5 & green my-lg-n5 & orange my-lg-n2
negative margin
negative margin
negative margin


Exported from Notepad++
<!DOCTYPR html> <html lang="en"> <head> <meta charset="UTF-8"> <title>BootStrap</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"> <style> .container{ border:1px solid black; } .row{ border:1px solid red;} .col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { border:1px solid blue;} .pink{ background:pink; } .green{ background:green; } .silver{ background:silver; } .lblue{ background:lightblue; } .Orange{ background:orange; } .Violet{ background:Violet; } .msgreen{ background:MediumSeaGreen; } </style></head> <body> <!-- padding-gutters --> 093-padding-gutters, remove all default padding which is 15px </br> row g-0 <div class="container"> <div class="row g-0"> <div class="col-md-4" ><div class="lblue">first block</div></div> <div class="col-md-4" ><div class="green">second block</div></div> <div class="col-md-4" ><div class="orange">third block</div></div> </div> </div></br></br> <!-- padding-y axis top bottom padding--> 094-padding-y-axis-top-bottom-padding</br> lblue py-5 <div class="container"> <div class="row"> <div class="col-md-4" ><div class="lblue py-5">first block</div></div> <div class="col-md-4" ><div class="green">second block</div></div> <div class="col-md-4" ><div class="orange">third block</div></div> </div> </div></br></br> <!-- padding-x axis both sides padding--> 095-padding-x-axis-both-sides-padding</br> lblue px-5 & green py-5 <div class="container"> <div class="row"> <div class="col-md-4" ><div class="lblue px-5">first block</div></div> <div class="col-md-4" ><div class="green py-5">second block</div></div> <div class="col-md-4" ><div class="orange">third block</div></div> </div> </div></br></br> <!-- margin-x y axis --> 096-margin-x-y-axis</br> lblue mx-5 & green my-5 <div class="container"> <div class="row"> <div class="col-md-4" ><div class="lblue mx-5">first block</div></div> <div class="col-md-4" ><div class="green my-5">second block</div></div> <div class="col-md-4" ><div class="orange">third block</div></div> </div> </div></br></br> <!-- padding with breakpoints --> 097-padding-with-breakpoints</br> lblue px-lg-5 & green py-lg-5 & orange py-lg-2 <div class="container"> <div class="row"> <div class="col-md-4" ><div class="lblue px-lg-5">first block breakpoint</div></div> <div class="col-md-4" ><div class="green py-lg-5">second block breakpoint</div></div> <div class="col-md-4" ><div class="orange py-lg-2">third block breakpoint</div></div> </div> </div></br></br> <!-- margin with breakpoints --> 098-margin-with-breakpoints</br> lblue mx-lg-5 & green my-lg-5 & orange my-lg-2 <div class="container"> <div class="row"> <div class="col-md-4" ><div class="lblue mx-lg-5">margin block breakpoint</div></div> <div class="col-md-4" ><div class="green my-lg-5">margin block breakpoint</div></div> <div class="col-md-4" ><div class="orange my-lg-2">margin block breakpoint</div></div> </div> </div></br></br> <!-- negative margin with breakpoints --> 099-negative-margin-with-breakpoints</br> lblue mx-lg-n5 & green my-lg-n5 & orange my-lg-n2 <div class="container"> <div class="row"> <div class="col-md-4" ><div class="lblue mx-lg-n5">negative margin </div></div> <div class="col-md-4" ><div class="green my-lg-n5">negative margin </div></div> <div class="col-md-4" ><div class="orange my-lg-n2">negative margin </div></div> </div> </div></br></br> </body> </html>