htmlcsstwitter-bootstraprowcol

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


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 class="container-fluid w-80">
  <div class="row ">
    <div class="col-md-6 ">

      <br>

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

      <div id="portfolio">
        <a class="portfolio-box" href="assets/img/proba/27.jpg">
          <img class="img3d img-fluid" src="assets/img/proba/27.jpg" class="w-101 h-100">
      </div>
    </div>

    <br>

    <div class="col-md-6 ">
      <h4 style="color:black;"> 3D Prikaz </h4>
      <div class="divider-new"> <span></span></div>

      <div id="portfolio">
        <a class="portfolio-box" href="assets/img/proba/27.jpg">
          <img class="img3d img-fluid" src="assets/img/proba/27.jpg" class="w-101 h-100">
      </div>
    </div>


  </div>
</div>

Instead of

|   6   |   6   |

I am getting

|       6      |
|       6      |

Solution

  • 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/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
    
    
    <div class="container-fluid w-80">
      <div class="row ">
        <div class="col-6 ">
          <h4 style="color:black;"> 3D Prikaz </h4>
          <div class="divider-new"> <span></span></div>
    
          <div id="portfolio">
            <a class="portfolio-box" href="assets/img/proba/27.jpg">
              <img class="img3d img-fluid" src="assets/img/proba/27.jpg" class="w-101 h-100">
              </a>
          </div>
        </div>
    
        <br>
    
        <div class="col-6">
          <h4 style="color:black;"> 3D Prikaz </h4>
          <div class="divider-new"> <span></span></div>
    
          <div id="portfolio">
            <a class="portfolio-box" href="assets/img/proba/27.jpg">
              <img class="img3d img-fluid" src="assets/img/proba/27.jpg" class="w-101 h-100">
              </a>
          </div>
        </div>
    
    
      </div>
    </div>