setting the grids in the grid system next to each other

Question

Hey guys i am working on react with UNSPALSH API so on searcing a term i am retreiving list of details of the term in console and then in that upon running the map function i am retreiving the list of images in my screen so the thing is that i wanna make a column of 12 grids and want to assign 2 images next to each other in each row. so i wrote a code like

 <div className="row">
 <div className="col-lg-12">
 <div className="image-list col-lg-6">
 {images}
 </div>
 </div>
 </div>

css file

.image-list img{
width: 90%;
height: 50vh;
margin-bottom: 40px;
}

but it is giving me only one image in each row , here is the ss of the output https://ibb.co/343Rhb2

so how do i make it correct ?

score 0 · Answer 1 · answered May 22 '19 at 20:51

parent element of a 'col... should be a 'row...

in your case,

<div className="row">
  <div className="col-6">
    image goes here
  </div>
  <div className="col-6">
    image goes here
  </div>
</div>

if you need them inside a col-12, then

<div className="row">
  <div className="col-12">
    <div className="row">
      <div className="col-6">
        image goes here
      </div>
      <div className="col-6">
        image goes here
      </div>
    </div>
  </div>
</div>

setting the grids in the grid system next to each other

1 Answers1