Twitter Bootstrap Question posted in

How to remove unwanted margins in Twitter Bootstrap

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>
Tags:

2

Answers


  1. 0

    ey, try somthing like this:

    @media (max-width: 768px) {
            .col-xs-12{
                    margin: 0;
                    padding: 0;
            }
        }

    adjust if necessary 🙂

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search