CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Chicky Egg
Chicky Egg

Reputation: 153

Get rid of bootstrap grid margin

Im using Bootstrap grid to work on a layout. I want to add a div in 'col-md-10' but there is a margin on the right and left. How do I get rid of those? This never happened before and I've checked all my css. 

.site-wrapper {
    display: table;
    width: 100%;
    height: auto; /* For at least Firefox */
    min-height: 100%;
}

.google-blue {
    background-color: rgba(66,133,244,0.8);
}

.academics .col-md-2,
.academics .col-md-10 {
    height: 60vh;
}
<div class="site-wrapper">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-2"></div>
      <div class="col-md-10">
        <div class="google-blue">
                                
        </div>
      </div>
    </div>
  </div> <!-- container-fluid -->
</div> <!-- site-wrapper -->

Upvotes: 0

Views: 2836

Answers (6)

Tyra Pululi
Tyra Pululi

Reputation: 446

I normally add new classes, so I can choose where I want to remove the padding, margin or both.

.mar0 { margin-left: 0; margin-right:0;}
.pad0 { padding-left: 0; padding-right: 0;}

By doing it this way i dont mess the standard grid. Just remenber to add the pad0 in div col and mar0 in div row.

Upvotes: 0

Dalin Huang
Dalin Huang

Reputation: 11342

You can debug like this:

add some text to div, and added background-color to div

.container-fluid .col-md-10 {
  margin-right: 0 !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

then you can remove the !important; to see if it is still working (because !important is not recommended most of the time, only if you can't overwrite without it.)

then you can remove padding or margin to use the minimum code that is working:

This is all you need.

.container-fluid .col-md-10 {
  padding-left: 0;
  padding-right: 0;
}

Result: https://jsfiddle.net/dalinhuang/7mfhm0mm/

.site-wrapper {
    display: table;
    width: 100%;
    height: auto; /* For at least Firefox */
    min-height: 100%;
}

.google-blue {
    background-color: rgba(66,133,244,0.8);
}

.academics .col-md-2,
.academics .col-md-10 {
    height: 60vh;
}

.google-blue {
	background-color: red;
}

.container-fluid .col-md-10 {
  padding-left: 0;
  padding-right: 0;
}
<div class="site-wrapper">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-2">
      	xxxxx
      </div>
      <div class="col-md-10">
        <div class="google-blue">
                  yyyy              
        </div>
      </div>
    </div>
  </div> <!-- container-fluid -->
</div> <!-- site-wrapper -->

Upvotes: 0

blecaf
blecaf

Reputation: 1645

Override the styles

.site-wrapper .container-fluid .col-md-10 {
       padding-right: 0;
       padding-left:0;
    }

Better Choice. Add a class to ".col-md-10"

.site-wrapper .col-md-10.remove-padding {
           padding-right: 0;
           padding-left:0;
        }

<div class="col-md-10 remove-padding">
    <div class="google-blue">

    </div>
 </div>

Upvotes: 0

Mike Tung
Mike Tung

Reputation: 4821

I typically remove white space in the main css before hand.

* {
    margin: 0;
    padding: 0;
}

Upvotes: 0

Michael Coker
Michael Coker

Reputation: 53664

Instead of overwriting one of the .col-* classes in bootstrap, in case you have multiple of them or something, or want to do this again in the future, add a new class to the element you want to modify, and style that new class.

Here I've added .nopad to the cell you want to remove the padding from. Then you can use that anywhere else you want, and it won't affect other col-* classes.

.site-wrapper {
    display: table;
    width: 100%;
    height: auto; /* For at least Firefox */
    min-height: 100%;
}

.google-blue {
    background-color: rgba(66,133,244,0.8);
  height: 1em;
}

.academics .col-md-2,
.academics .col-md-10 {
    height: 60vh;
}

.row > .nopad {
  padding: 0;
}
<div class="site-wrapper">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-2"></div>
      <div class="col-md-10 nopad">
        <div class="google-blue">
                                
        </div>
      </div>
    </div>
  </div> <!-- container-fluid -->
</div> <!-- site-wrapper -->

Upvotes: 0

ToujouAya
ToujouAya

Reputation: 593

Actually it is padding left and right . It is not margin. This is default style of bootstrap css. You could do something like this

1) Overwrite the bootstrap css . This will Overwrite all css class col-md-10. it is not best choice

.col-md-10 {
   padding-left: 0;
   padding-right: 0;
}

2) Inline css

<div class="col-md-10" style="padding-left: 0; padding-right: 0">
    <div class="google-blue">

    </div>
 </div>

3) Custom class

.noPadding {
   padding-left: 0;
   padding-right: 0;
}
<div class="col-md-10 noPadding" >
    <div class="google-blue">

    </div>
 </div>

Upvotes: 1

Related Questions