You need to ensure that you've closed all your divs correctly. This means you will need to close your first column <div>
and then your row <div>
.
You should also apply CSS to the images themselves to keep them within the confines of their columns. In the example below I've made it so the images span the entire width and have an automatic height (so it keeps its aspect ratio).
Rows should also be kept within a container. You can either use the container
or container-fluid
class to specify what sort of container you would like.
Keep in mind that you've used col-lg-*
, and so lg
means that your columns will collapse when on large screen sizes. Running the snippet below will cause the two columns to stack (as it is a small screen) but you can see the two columns side-by-side in the one row by expanding the code snippet view:
.img {
height: auto;
width: 100%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<img class="img" src="https://images.unsplash.com/photo-1524293581917-878a6d017c71?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" />
<p>(text)</p>
</div>
<div class="col-lg-6">
<img class="img" src="https://images.unsplash.com/photo-1500622944204-b135684e99fd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" />
<p>(text)</p>
</div>
</div>
</div>