I want to remove the space between multiple columns in the Bootstrap grid.
How can we overwrite Bootstrap's CSS to achieve this task or any other better solution with pure CSS?
main.html
<div class="row"> <div class="col-md-2"> // stuff here for this column </div> <div class="col-md-10"> // stuff here for columns </div> </div>
You can add new class to your div elements and remove padding/margin with css. To make it more clear, bootstrap assigns margin-left: -15px and margin-right: -15px for . row selector and padding-left: 15px and padding-right: 15px on all . col-* selectors to get 30px space between all the cols.
If you want to use bootstrap to control line spacing it is recommended to use the margin and padding settings in bootstrap. i.e. my-0 and py-0.
add a class when you need to remove spaces use it
.padding-0{ padding-right:0; padding-left:0; }
in html write this class
<div class="row"> <div class="col-md-2 padding-0"> //stuff here for this column </div> <div class="col-md-10 padding-0"> //stuff here for columns </div> </div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With