Bootstrap 5 No Gutters
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.
HTML
<!DOCTYPE html> < html > < head > <!-- Bootstrap CDN --> < link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" crossorigin = "anonymous" > </ head > < body class = "m-2" > < h1 class = "text-success" >w3wiki</ 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.
HTML
<!DOCTYPE html> < html > < head > <!-- Bootstrap CDN --> < link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" crossorigin = "anonymous" > </ head > < body class = "m-2" > < h1 class = "text-success" >w3wiki</ 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
Contact Us