CODEWITHSUNDEEP
htmltwitter-bootstrap
Fighter
Fighter

Reputation: 55

How to remove the default padding of bootstrap grid column

I have a grid system, and i add a table into the grid column.But the table did not cover the entire width of the column.It shows space on both left and right side.Is it happens because of the default padding of grid column?

Upvotes: 0

Views: 6729

Answers (3)

Zerow7
Zerow7

Reputation: 1

You can remove default gutters between columns by just adding .g-0 to your columns.

<div class="col g-0">
  <h1>Heading</h1>
  <p>Lorem ipsum</p>
</div>

https://getbootstrap.com/docs/5.0/layout/gutters/#no-gutters

Upvotes: 0

Rahul
Rahul

Reputation: 2071

If you scss from Bootstrap V4 you can change gutter width using variable.

$grid-gutter-width: 2rem !default;

If you want to change column padding certain section. You should add custom class and do like this.

HTML

<div class="row custom-row">
    <div class="col-12 col-md-4"></div>
    <div class="col-12 col-md-4"></div>
    <div class="col-12 col-md-4"></div>
</div>

CSS

.custom-row{
    margin-left: -10px;
    margin-right: -10px;
}
.custom-row .col-12{
    padding-left: 10px;
    padding-right: 10px;
}
/* Wild card with class */
.custom-row [class~=col]{
    padding-left: 10px;
    padding-right: 10px;
}
.custom-row [class*='col-']{
    padding-left: 10px;
    padding-right: 10px;
}
/* Wild card with global */
[class*='col-']{
    padding-left: 10px;
    padding-right: 10px;
}

Upvotes: 0

AlainIb
AlainIb

Reputation: 4728

please provide your code first of all.

you can the no-gutters option : Columns have horizontal padding to create the gutters between individual columns, however, you can remove the margin from rows and padding from columns with .no-gutters on the .row.

https://getbootstrap.com/docs/4.0/layout/grid/

<div class="row no-gutters">
  <div class="col-md-2">
    // stuff here for this column
  </div>
  <div class="col-md-10">
    // stuff here for columns
  </div>
</div>

OR : you have to see which attribute (maybe col) is adding the space (margin or padding)

i adding this in a previous project to reduce the space of all cols 

.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto
 { padding: 3px !important; }

adjust it to your need

Upvotes: 3

Related Questions