Gap between 2 blocks

HTML & CSS
1

I am a newbie in bootstrap. I am trying to create a skeleton of a site, but I am not able to add a gap in between the 2 blocks as provided in the screenshot attached. I am trying to add an image in between 2 blocks but it does not extend to the height defined in the body.Can anyone guide me? OR is there any other solution rather than using an image file?

This is my code:

 <body class="bgcolor">
    <div class="container" style="background-color:#fff;">
      <div class="row bgcolor">
	      <div class="col-md-12 text-right">
              Links
          </div>
          <div class="col-md-12">
              <h1>HEADING and LOGO</h1>
          </div>
      </div>

	  <div class="row">
		  <div class="col-md-8">
			  <h3>Post Title 1</h3>
			  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
		  </div>
		  <div class="col-md-1">
			  <div><img src="t.gif" alt="" width="20" style="background-color:#f1f1f1;"></div>
		  </div>
		  <div class="col-md-3">
			  <h3>Post Title 1</h3>
			  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
		  </div>
	  </div>

    </div>
  </body>

2

Adding images is not how you create gaps inbetween elements.
Use a margin to add gaps.
margin-right on the first one or margin-left on the second.
One other thing, <h2>s should follow <h1>, not <h3>s.

2 Likes
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.