0
Bootstrap 5 No Gutters
source link: https://www.geeksforgeeks.org/bootstrap-5-no-gutters/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Bootstrap 5 No Gutters
Last Updated :
15 Dec, 2022
Bootstrap 5 No gutters remove margin and padding from .row and columns.
Bootstrap 5 No gutter Class:
- g-0: This class is used to remove the gutter between our columns and rows.
Syntax:
<div class="g-0">
...
</div>
Example 1: let us see an example of no gutters.
<!DOCTYPE html> <html> <head> <!-- Bootstrap CDN --><link rel="stylesheet" href= crossorigin="anonymous"> </head> <body class="m-2"> <h1 class="text-success">GeeksforGeeks</h1> <h3>Bootstrap5 No Gutters</h3> <div class="container"> <div class="g-0"> <div class="col-4 border">GFG-1</div> <div class="col-4 border">GFG-2</div> <div class="col-4 border">GFG-3</div> <div class="col-4 border">GFG-4</div> <div class="col-4 border">GFG-4</div> <div class="col-4 border">GFG-6</div> </div> </div> <br><br> <p><b> There is no margin and padding between rows</b></p> </body> </html> |
Output:
Example 2: Let us see another example of no gutters.
<!DOCTYPE html> <html> <head> <!-- Bootstrap CDN --><link rel="stylesheet" href= crossorigin="anonymous"> </head> <body class="m-2"> <h1 class="text-success">GeeksforGeeks</h1> <h3>Bootstrap5 No Gutters</h3> <div class="container"> <div class="row g-0"> <div class="col-4 border">GFG-1</div> <div class="col-4 border">GFG-2</div> <div class="col-4 border">GFG-3</div> <div class="col-4 border">GFG-4</div> <div class="col-4 border">GFG-5</div> <div class="col-4 border">GFG-6</div> <div class="col-4 border">GFG-7</div> <div class="col-4 border">GFG-8</div> <div class="col-4 border">GFG-9</div> <div class="col-4 border">GFG-10</div> </div> </div> <br><br> <p><b> There is no margin and padding between rows </b></p> </body> </html> |
Output:
Reference: https://getbootstrap.com/docs/5.0/layout/gutters/#no-gutters
Here's a complete roadmap for you to become a developer: Learn DSA -> Master Frontend/Backend/Full Stack -> Build Projects -> Keep Applying to Jobs
And why go anywhere else when our DSA to Development: Coding Guide helps you do this in a single program! Apply now to our DSA to Development Program and our counsellors will connect with you for further guidance & support.
Like Article
Suggest improvement
Share your thoughts in the comments
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK