Two column bootstrap layout without any padding or spaces - html

Question

This is similar to the layout I'm trying to achieve:
The code I have now
<div class="row ">
<div class="col-lg-6 row-eq-height push-right">
<img src="1.jpg" class="img-responsive">
</div>
<div class="col-lg-6 row-eq-height">
<div class="eq-row-text ">
<p class="row-text">Text description for image </p>
</div>
</div>
</div>
<div class="row ">
<div class="col-lg-6 row-eq-height ">
<div class="eq-row-text ">
<p class="row-text"> Text description for the image </p>
</div>
</div>
<div class="col-lg-6 row-eq-height">
<img src="1.jpg" class="img-responsive">
</div>
</div>
I have tried using CSS class "no-padding" and also tried playing around with margins. when i apply 0 padding, the left side of the first image touches the edge of the browser( this is desired), however the other edge(right side of image) still has some empty space.
How do I get rid of that empty space get the results like the reference layout?

Answer 1

.col-md-6{
padding-right: 0px;
padding-left: 0px;
}

Answer 2

There could be an issue with the <p> padding/margin, could also be an issue with the <img> padding/margin. However it seems to be an issue with the sizing of the elements within the row.
I did however seemingly fix the issue in my PEN HERE
I added a height: *** to the row class, this may be needed for desired results as you are using row-eq-height bootstrap class.
HTML
<div class="row ">
<div class="col-lg-6 row-eq-height push-right">
<img src="1.jpg" class="img-responsive">
</div>
<div class="col-lg-6 row-eq-height">
<div class="eq-row-text ">
<p class="row-text">Text description for image </p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 row-eq-height ">
<div class="eq-row-text ">
<p class="row-text"> Text description for the image </p>
</div>
</div>
<div class="col-lg-6 row-eq-height">
<img src="1.jpg" class="img-responsive">
</div>
</div>
CSS
p{
margin: 0;
padding: 0;
}
img{
margin: 0;
padding: 0;
}
.row {
margin: 0;
padding: 0;
height:60px;
background-color: #eee
}

Answer 3

If using the LESS/SASS source: change #grid-gutter-width in the variables file to 0

Answer 4

If you want to get rid of the white space you will need to make your image bigger to span the cols. You can manually adjust the width of an image using css:
img {
width: 100%;
}