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

Questions

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

October 28, 2024

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>