Home How can I move the button on the right part instead of main with negative right Y?

Questions

How can I move the button on the right part instead of main with negative right Y?

March 29, 2023

I want something like that:

enter image description here

With button on the right part not simply at the right of input.
enter image description here

Where the button is on the right side. Actually, I’m using ugly width: 138%, which seems to don’t work the same between browser, computers etc. Actually, the button goes to bottom instead of going at good place.

I can’t put it on the right side box directly as it’s never at the good Y position. And my way to put on the right make the button no longer working.

I’m using bootstrap 5 and I prefer to don’t use JS (as in the mre, I didn’t put any js)

.full-width {
   width: 100%;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>

<div class="row">
  <div class="col-3">
    Left part
  </div>
  <div class="col-6">
    <label>Input 1</label>
    <input type="text" class="form-control full-width">
    <label>Input 2</label>
    <input type="text" class="form-control full-width">
    <label>Input 3</label>
    <input type="text" class="form-control full-width">
    <div class="row" style="width: 138%;">
        <div class="col-9">
            <label for="sim">Special input</label>
            <input class="full-width form-control" type="text" name="sim">
        </div>
        <div class="col-3">
            <button type="button" class="btn btn-danger my-4">One button</button>
        </div>
    </div>
  </div>
  <div class="col-3">
    Right part
  </div>
</div>

How can I fix it?

>Solution :

Disclaimer:

This solution is in no way universal and will really depend on what you’re actually planning to do with the page. However, I will try to explain why your solution didn’t work and the important aspects you should consider.

Since you want your button to be to the right of the entire form, you should keep it out of it. aka, it should be part of the Right part div. This will make sure you never need to do things like 106% width, and will remove your need for forcing overflows.

Once you’ve gotten to that part, it really becomes a matter of preference and situation:

.full-width {
  width: 100%;
}

.right-part {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>

<div class="row">
  <div class="col-3">
    Left part
  </div>
  <div class="col-6">
    <label>Input 1</label>
    <input type="text" class="form-control full-width">
    <label>Input 2</label>
    <input type="text" class="form-control full-width">
    <label>Input 3</label>
    <input type="text" class="form-control full-width">
    <label for="sim">Special input</label>
    <input class="full-width form-control" type="text" name="sim">
  </div>
  <div class="col-3 right-part">
    <span>
            Right part
        </span>
    <div>
      <button type="button" class="oneButton btn btn-danger">One button</button>
    </div>
  </div>
</div>

Here, I used justify-content: space-between; because it was a convenient way to reach the desired result, but this solution fails if you have any other elements after the button inside the same parent div.

So, this solution will work if:

Your parent div shares the same height as it’s neighboring columns.
You have more than 1 element in the parent div (otherwise use justify-content: end;)
Your button is the last item in that div.

Otherwise, you’ll have to explore other options, but ultimately you should avoid using % and px values when using bootstrap’s grid system and css flexbox is possible.