How to remove unwanted margins in Twitter Bootstrap - html

Question

I am building a website in Twitter bootstrap. Using the grid system, I have 2 rows of 4 images which I have given the classes col-xs-12,col-sm-6 and col-md-3 respectively. In order to have a gap between the top row and bottom row I have given the top row an id and styled it in css as img-responsive {margin-bottom: 30px}. This is fine in desktop view, but on smaller devices it creates additional space once the images stack upon each other. Is there a way that this additional margin can be prevented using the media query function? Many thanks in advance, Jon.
Here is the link to my website
<div class="row" id="toprow">
<div class="col-xs-12 col-sm-6 col-md-3">
<img src="images/about1_700x700.jpg" class="img-responsive" height="700" width="auto" alt=""/>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<img src="images/about1_700x700.jpg" class="img-responsive" height="700" width="auto" alt=""/>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<img src="images/about1_700x700.jpg" class="img-responsive" height="700" width="auto" alt=""/ id="image3">
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<img src="images/about1_700x700.jpg" class="img-responsive" height="700" width="auto" alt=""/ id="image4">
</div>
</div>
<div class="row" id="bottomrow">
<div class="col-xs-12 col-sm-6 col-md-3">
<img src="images/about1_700x700.jpg" class="img-responsive" height="700" width="auto" alt=""/>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<img src="images/about1_700x700.jpg" class="img-responsive" height="700" width="auto" alt=""/>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<img src="images/about1_700x700.jpg" class="img-responsive" height="700" width="auto" alt=""/ id="image7">
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<img src="images/about1_700x700.jpg" class="img-responsive" height="700" width="auto" alt=""/ id="image8">
</div>
</div>

Answer 1

Mobile First
While the other answers are perfectly fine, Bootstrap is a mobile-first framework. This probably shouldn't be it's own answer but I feel it needs a mention.
Adding to #Majid's code...
#toprow {
margin-bottom: 30px;
}
#media screen and (max-width: 768px) {
#toprow {
margin-bottom:0;
}
}
Doing this is fine. The margin will be set to 30px regardless of screen size and then removed for mobile screens. The mobile-first approach would be more like this...
#media screen and (min-width: 769px) {
#toprow {
margin-bottom: 30px;
}
}
Notice how we're targeting min-width and we don't have to set the margin twice? We're adding it as we need it instead of overriding an existing rule. In a lot of situations this can save you from redundant code and make your projects a bit easier to maintain.

Answer 2

ey, try somthing like this:
#media (max-width: 768px) {
.col-xs-12{
margin: 0;
padding: 0;
}
}
adjust if necessary :)