Second col goes to second line instead of sharing the same row-CodePudding

For some reason, the second column doesn't share the same row, instead, it goes to the second line (row). May you please help me with this? I'm new to this.

<div >
  <div >
    <div >

      <br>

      <h4 style="color:black;"> 3D Prikaz </h4>
      <div > <span></span></div>

      <div id="portfolio">
        <a  href="assets/img/proba/27.jpg">
          <img  src="assets/img/proba/27.jpg" >
      </div>
    </div>

    <br>

    <div >
      <h4 style="color:black;"> 3D Prikaz </h4>
      <div > <span></span></div>

      <div id="portfolio">
        <a  href="assets/img/proba/27.jpg">
          <img  src="assets/img/proba/27.jpg" >
      </div>
    </div>


  </div>
</div>

Instead of

|   6   |   6   |

I am getting

|       6      |
|       6      |

CodePudding user response：

I think it happened because you didn't close your links </a> otherwise your col-md-6 classes needs to be reduced to either col-sm-6 or just col-6 -- see in the snippet this is working

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X R7YkIZDRvuzKMRqM OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">


<div >
  <div >
    <div >
      <h4 style="color:black;"> 3D Prikaz </h4>
      <div > <span></span></div>

      <div id="portfolio">
        <a  href="assets/img/proba/27.jpg">
          <img  src="assets/img/proba/27.jpg" >
          </a>
      </div>
    </div>

    <br>

    <div >
      <h4 style="color:black;"> 3D Prikaz </h4>
      <div > <span></span></div>

      <div id="portfolio">
        <a  href="assets/img/proba/27.jpg">
          <img  src="assets/img/proba/27.jpg" >
          </a>
      </div>
    </div>


  </div>
</div>