CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
freeradik
freeradik

Reputation: 7

How do i reduce the vertical space/margin between two bootstrap rows?

Below is my code and i want the "portfolio1Info" div element row to be vertically adjacent with no space/margin to "portfolioSite" div element row. I have tried .noBottomMargin{margin-bottom:0px !important;}, .noTopMargin{margin-top:0px !important}. It doesn't seem to work and i always end up with a gap between image and the row that follows the image row

    <div id="portfolio1" class="col-lg-4" style="border:solid">
      <div class="row">
        <div class="col-lg-12">
        <a href="www.placekitten.com" target="_blank"><img class="img-responsive" src="http://s.wordpress.com/mshots/v1/http%3A%2F%2Fwww.placekitten.com?" border="1" /></a>
        </div>
        </div>
      <div id="portfolio1Info" class="row">
        <div class="col-lg-12">
          <div style="background-color:#000000">
          <h5 align="center"> Please hold 1? </h5>
          <h6 align="center"><i> HTML? </i></h6>
          </div>
        </div>
      </div>
    </div>

Upvotes: 0

Views: 2823

Answers (3)

Jijesh Cherayi
Jijesh Cherayi

Reputation: 1125

Try this code

         <style type="text/css">
            #portfolio1Info h5 ,#portfolio1Info h6 {
                margin-top: 0 !important;
            }
        </style>

It works well

Upvotes: 0

Will
Will

Reputation: 4155

It's not the .row, it's the <h5> in your second row. It has a margin-top of 10px.

Upvotes: 0

Deepak Yadav
Deepak Yadav

Reputation: 7069

#portfolio1Info h6 {
  margin-bottom: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div id="portfolio1" class="col-lg-4" style="border:solid">
  <div class="row">
    <div class="col-lg-12">
      <a href="www.placekitten.com" target="_blank">
        <img class="img-responsive" src="http://s.wordpress.com/mshots/v1/http%3A%2F%2Fwww.placekitten.com?" border="1" />
      </a>
    </div>
  </div>
  <div id="portfolio1Info" class="row">
    <div class="col-lg-12">
      <div style="background-color:#000000">
        <h5 align="center"> Please hold 1? </h5>
        <h6 align="center"><i> HTML? </i></h6>
      </div>
    </div>
  </div>
</div>

If you want to stick that footer at bottom, then remove the space coming due to H6 tag, by default, your h6 has some margin.

Upvotes: 2

Related Questions