0

The bootstrap grid system divides the entire screen into 12 pieces, so I created a row and then divided it into two columns and put an image and some texts on both the columns but they are coming one after another not inline

<div class="row">
  <div class="col-lg-6">
    <img src=""> (text)

  <div class="col-lg-6">
    <img src=""> (text)         
  </div>

I am expecting a result where there would be two images in one row and some texts after each image

Nick Parsons
  • 45,728
  • 6
  • 46
  • 64
  • read this: https://stackoverflow.com/questions/183532/what-is-the-difference-between-html-tags-div-and-span – Jinjinov Oct 05 '19 at 11:29

1 Answers1

0

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>
Nick Parsons
  • 45,728
  • 6
  • 46
  • 64