CODEWITHSUNDEEP
htmlcssbootstrap-4
mat
mat

Reputation: 130

How to make responsive two columns in a row? In first text, in second image in bootstrap 4

How to make two columns in a row, one with text, second with image in Bootstrap 4 to be full responsive? I want to make a something like in this picture: 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class='container'>
    <div class='row'>
        <div class='col-md-6'>
            <div class='text'>
                <h2>Test test</h2>
                <p>Lorem pep lorem pep lorem pep lorem pep lorem </p>
            </div>
        </div>
        <div class='col-md-6'>
            <img src='https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg' alt=''>
        </div>
     </div>
     <div class='row'>
         <div class='col-md-6'>
             <img src='https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg' alt=''>
         </div>
         <div class='col-md-6'>
             <div class='text'>
                 <h2>Test test</h2>
                 <p>Lorem pep lorem pep lorem pep lorem pep lorem </p>
             </div>
         </div>
     </div>
</div>

enter image description here

How to make the image always have the same parameters as div with text, to be full responsive?

Upvotes: 0

Views: 1961

Answers (4)

Gaurav Rana
Gaurav Rana

Reputation: 445

Hope this is useful.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


    <style>
	.img-section{
    	width:100%;
        height:400px;
    }
    .text {
        height: 380px;
    }
</style>
<div class='container'>
  <div class='row'>
    <div class='col-sm-6'>
      <div class='text'>
        <h2>Test test</h2>
        <p>Lorem pep lorem pep lorem pep lorem pep lorem </p>
      </div>
    </div>
    <div class='col-sm-6'>
        <img class="img-section" src='https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg' alt=''>
    </div>
  </div>
  <div class='row'>
    <div class='col-sm-6'>
    <img class="img-section" src='https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg' alt=''>
    </div>
    <div class='col-sm-6'>
      <div class='text'>
        <h2>Test test</h2>
        <p>Lorem pep lorem pep lorem pep lorem pep lorem </p>
      </div>
    </div>
  </div>
    <div class='row'>
    <div class='col-sm-6'>
      <div class='text'>
        <h2>Test test</h2>
        <p>Lorem pep lorem pep lorem pep lorem pep lorem </p>
      </div>
    </div>
    <div class='col-sm-6'>
        <img class="img-section" src='https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg' alt=''>
    </div>
  </div>
  <div class='row'>
    <div class='col-sm-6'>
    <img class="img-section" src='https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg' alt=''>
    </div>
    <div class='col-sm-6'>
      <div class='text'>
        <h2>Test test</h2>
        <p>Lorem pep lorem pep lorem pep lorem pep lorem </p>
      </div>
    </div>
  </div>
    <div class='row'>
    <div class='col-sm-6'>
      <div class='text'>
        <h2>Test test</h2>
        <p>Lorem pep lorem pep lorem pep lorem pep lorem </p>
      </div>
    </div>
    <div class='col-sm-6'>
        <img class="img-section" src='https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg' alt=''>
    </div>
  </div>
  <div class='row'>
    <div class='col-sm-6'>
    <img class="img-section" src='https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg' alt=''>
    </div>
    <div class='col-sm-6'>
      <div class='text'>
        <h2>Test test</h2>
        <p>Lorem pep lorem pep lorem pep lorem pep lorem </p>
      </div>
    </div>
  </div>
    <div class='row'>
    <div class='col-sm-6'>
      <div class='text'>
        <h2>Test test</h2>
        <p>Lorem pep lorem pep lorem pep lorem pep lorem </p>
      </div>
    </div>
    <div class='col-sm-6'>
        <img class="img-section" src='https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg' alt=''>
    </div>
  </div>
  <div class='row'>
    <div class='col-sm-6'>
    <img class="img-section" src='https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg' alt=''>
    </div>
    <div class='col-sm-6'>
      <div class='text'>
        <h2>Test test</h2>
        <p>Lorem pep lorem pep lorem pep lorem pep lorem </p>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

RAGINROSE
RAGINROSE

Reputation: 724

add this to your css

img{
  min-width:100%;
  min-height:100%;
  max-height:100%;
  max-width:100%;
}

Here is a working fiddle https://jsfiddle.net/fk04wndL/

Upvotes: 0

Xenio Gracias
Xenio Gracias

Reputation: 2758

add img-fluid class to both images.

or you can media of bootstrap 4 check below link. thanks.

https://getbootstrap.com/docs/4.0/layout/media-object/

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class='container'>
<div class='row'>
<div class='col-md-6'>
<div class='text'>
<h2>Test test</h2>
<p>Lorem pep lorem pep lorem pep lorem pep lorem </p>
</div>
</div>
<div class='col-md-6'>
<img class="img-fluid" src='https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg' alt=''>
</div>
</div>
<div class='row'>
<div class='col-md-6'>
<img class="img-fluid" src='https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg' alt=''>
</div>
<div class='col-md-6'>
<div class='text'>
<h2>Test test</h2>
<p>Lorem pep lorem pep lorem pep lorem pep lorem </p>
</div>
</div>
</div>
</div>

Upvotes: 0

Viira
Viira

Reputation: 3911

Set image width to 100% so that it won't be overflowed to the next block.

Check out this.

Since bootstrap uses display:flex all the blocks inside the div row will have same height.

.col-md-6 img{width:100%;}
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


    <div class='container'>
    <div class='row'>
    <div class='col-md-6'>
    <div class='text'>
    <h2>Test test</h2>
    <p>Lorem pep lorem pep lorem pep lorem pep lorem </p>
    </div>
    </div>
    <div class='col-md-6'>
    <img src='https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg' alt=''>
    </div>
    </div>
    <div class='row'>
    <div class='col-md-6'>
    <img src='https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg' alt=''>
    </div>
    <div class='col-md-6'>
    <div class='text'>
    <h2>Test test</h2>
    <p>Lorem pep lorem pep lorem pep lorem pep lorem </p>
    </div>
    </div>
    </div>
    </div>

Also a codepen: https://codepen.io/Ev1tw1n/pen/GPGvmd

Note: If you want the text content centered use align-items:center;

Upvotes: 1

Related Questions