Currently, I am a university student working on a project where I am trying to design a layout with multiple images on the left and text along with a button on the right. Despite using Bootstrap classes, I'm facing an issue with aligning these elements properly.
The images below show my current output and the desired outcome: https://i.sstatic.net/wbwZp.png
https://i.sstatic.net/Bqh84.png
Here is the code snippet:
<style>
#points {display: block;}
</style>
<div class="row" style="border: black solid 2px;">
<div class="col-8">
<img class="img-responsive" src="http://placehold.it/450x250" />
<div class="row">
<div class="col-3"> <img class="img-responsive" src="http://placehold.it/210x150" /></div>
<div class="col-3"> <img class="img-responsive" src="http://placehold.it/210x150" /> </div>
</div>
</div>
<div class="col-4" >
<div class="property-wrap">
<div class="text">
<h3><a href="#">Name </a></h3>
<ul class="property_list mt-3 mb-0">
<li><span class="flaticon-bed"></span>3</li>
<li><span class="flaticon-bathtub"></span>2</li>
<li><span class="flaticon-blueprint"></span>1,878 sqft</li>
</ul>
</div>
<div class="text">
<p>This is some sample text for demonstration purposes. Feel free to edit it as needed. </p>
<ul >
<li id="points">test</li>
<li id="points">test</li>
<liid="points">test</li>
<li id="points" >test</li>
</ul>
<a class="btn btn-primary" href="#!">View More →</a>
</div>
</div>
</div>
</div>
I'm seeking guidance on how to adjust the width of the text div to align it next to the images without compromising their size.
UPDATE: After implementing the provided code from the answer, my page now appears like this https://i.sstatic.net/NZMeI.jpg
While it's an improvement, I aim to make it more compact - notice the blue line I added.
Below is the revised code:
<div class="row" style="border: red 2px solid; margin: 50px;padding: 10px">
<div class="col-8">
<div class="row" style="border: yellow 2px solid; padding: 2px">
<div class="col-12">
<img class="img-responsive" src="instagram.jpg" />
</div>
</div>
<div class="row">
<div class="col-6" style="border: yellow 2px solid; padding: 2px"> <img class="img-responsive" src="product.jpg" /></div>
<div class="col-6" style="border: yellow 2px solid; padding: 2px"> <img class="img-responsive" src="product.jpg" /> </div>
</div>
</div>
<div class="col-4" style="border: gray 2px solid; padding: 2px">
<div class="property-wrap">
<div class="text">
<h3><a href="#">Name </a></h3>
<ul class="property_list mt-3 mb-0">
<li><span class="flaticon-bed"></span>3</li>
<li><span class="flaticon-bathtub"></span>2</li>
<li><span class="flaticon-blueprint"></span>1,878 sqft</li>
</ul>
</div>
<div class="text">
<p>This here is some sample text. This is going to be a mini paragraph. This here is some sample text.
This is going to be a mini paragraph. This here is some sample text. This is going to be a mini
paragraph. </p>
<ul>
<li id="points">test</li>
<li id="points">test</li>
<liid="points">test</li>
<li id="points">test</li>
</ul>
<a class="btn btn-primary" href="#!">View More →</a>
</div>
</div>
</div>
</div>