Issue with indentation using bootstrap Container class

Asked Feb 27 '17 at 10:36

Active Feb 27 '17 at 15:19

Viewed 180 times

.left-text {
 margin-right : 25%;
 margin-left : 5%;
}

.img-left {
 z-index : 10 ;
}

.color-overlap-right {
 background-color : #d93;
 margin-right : -25%;
}

  <div class="row">
    <div class="col-sm-6" style="background-color:lavenderblush;">
  <div class="color-overlap-right">
   <div class="left-text">
    <h1 id="heading">Top 8 reasons</h1>

   </div>
  </div>  
 </div>
    <div class="col-sm-6 img-left" style="background-color:lavender;">
  <img class="img-responsive" src="img/1.PNG" alt="1">
 </div> 
  </div>

I am trying to make below HTML layout

Here is how my layout looks like. Entire content on the page is left aligned as shown in image. However there are image and color boxes going outside the width of container. I am facing issue in aligning the content inside the div spanning across entire width to indent along with the text in above column. Can someone please provide me hints?

Edit 1

This answer has been marked duplicate. However just want to add that height of column 1 is more than column 2. Also image in column 2 overlaps the color in column 1. In the solution you have provided, background color is applied to entire parent row which is overwritten in 2nd column by different color which is not case in my scenario.

Edit 2

edited Feb 27 '17 at 15:19

asked Feb 27 '17 at 10:36

Rajan Phatak

Can you update your code in fiddle. – tamilselvancst Feb 27 '17 at 10:38
put some code you did – Banzay Feb 27 '17 at 10:38
NEED code to help! – neophyte Feb 27 '17 at 10:43
@Banzay code added – Rajan Phatak Feb 27 '17 at 11:02
@Banzay Answer you have marked is not duplicate of question i have asked. I need height of column 1 in row 2 to be more than the image. It would not work with the solution you have provided – Rajan Phatak Feb 27 '17 at 11:10
I choose another reason, not duplicate. it was gold-badged member desicion – Banzay Feb 27 '17 at 11:21
anyway try to set orange background color to row. – Banzay Feb 27 '17 at 11:24
@Banzay can't set complete row color since Text and Image are part of 2 columns and height of 1st Column text is more than image in 2nd column – Rajan Phatak Feb 27 '17 at 12:31
@ZimSystem Please review duplicate Tag. I have reviewed solution and its not duplicate. Please help – Rajan Phatak Feb 27 '17 at 15:32

Issue with indentation using bootstrap Container class

0 Answers0