htmlbootstrap-5

Bootstrap Columns not moving to the right and instead staying below each other

So I'm coding a website homepage and I try to make another column, yet it wont move to the right, I've even tried to justify it to the right which doesnt work.

I want it to be specifically to the right of the col-md-6 but instead it shows below it

HTML Code below. I want the col-md-4 to be to the right of col-md-6 but instead it shows below col-md-6

<body>
    <div class="row">

        <div class="container-fluid">
            <div class="col-16 bg-dark order-1">
                <div class="d-flex justify-content-center"><h1 class="text-white">Welcome to the Website</h1></div>
            </div>
            <div class="col-md-6 bg-dark order-2">
                <div class="justify-content-center">
                    <h1 class="text-white">Rate our website</h1>
                </div>
                <div class="justify-content-between">
                    <button onclick="increasenumber()" id="coolbutton" type="button" class="btn btn-success">Upvote</button>
                    <button onclick="decreasenumber()" id="coolbutton1" type="button" class="btn btn-danger">Downvote</button>
                    <button onclick="resetcount()"id="coolbutton2" type="button" class="btn btn-info">Reset</button>
                </div>
                <div class="justify-content-center">
                    <h1 class="text-white" id="counter">0</h1>
                </div>
                
            </div>
            <div class="col-md-4 bg-dark">

            </div>
    </div>



</body>

I attempted to use justify content right with a d-flex but that just shifted it right and not where I wanted it, I also tried using the bootstrap native order class but that didn't really work either

Solution

  • You have an extra <div class="container-fluid"> that is interfering with the row. If you just remove it everything will fall into place. You will also need to remove the order-x classes.

    <body>
  <div class="row">

    <div class="col-16 bg-dark">
      <div class="d-flex justify-content-center">
        <h1 class="text-white">Welcome to the Website</h1>
      </div>
    </div>
    <div class="col-md-6 bg-dark">
      <div class="justify-content-center">
        <h1 class="text-white">Rate our website</h1>
      </div>
      <div class="justify-content-between">
        <button onclick="increasenumber()" id="coolbutton" type="button" class="btn btn-success">Upvote</button>
        <button onclick="decreasenumber()" id="coolbutton1" type="button" class="btn btn-danger">Downvote</button>
        <button onclick="resetcount()" id="coolbutton2" type="button" class="btn btn-info">Reset</button>
      </div>
      <div class="justify-content-center">
        <h1 class="text-white" id="counter">0</h1>
      </div>

    </div>
    <div class="col-md-4 bg-dark">

    </div>
  </div>

</body>