CODEWITHSUNDEEP
bootstrap-5
Node.JS
Node.JS

Reputation: 1570

bootstrap5 way of right aligning two buttons

I am using Bootstrap5 and wondering how to align two buttons to the right in the same column as the "Delete" button. Another problem is no matter which "breakpoint" (md, sm) I use it's not possible to right align these two buttons properly. I am wondering what is the bootstrap way of doing it.

enter image description here

Snippet

<form>

  <div class="hx-form-group position-relative">
    <label for="el62ba8cb87eb84be2bebc9c2970de0552" class="form-label">Goal #1</label><span class="input-group"><input id="el62ba8cb87eb84be2bebc9c2970de0552" type="text" class="form-control" placeholder="Enter goal #1 text here." _bl_6="">

      <button type="button" class="hx-button btn btn-danger" _bl_7="">

        Delete
      </button>
    </span>

    <div class="form-text">Hint: enter short, precise description what you want to do today</div>
  </div>

  <div class="hx-form-group position-relative">
    <label for="el28a7e89fc62249dd80048d65487a2354" class="form-label">Goal #2</label><span class="input-group"><input id="el28a7e89fc62249dd80048d65487a2354" type="text" class="form-control" placeholder="Enter goal #2 text here." _bl_8="">

      <button type="button" class="hx-button btn btn-danger" _bl_9="">

        Delete
      </button>
    </span>

    <div class="form-text">Hint: enter short, precise description what you want to do today</div>
  </div>

  <div class="hx-form-group position-relative">
    <label for="ele59dd34cf9ed4db2a92de894f47b5946" class="form-label">Goal #3</label><span class="input-group"><input id="ele59dd34cf9ed4db2a92de894f47b5946" type="text" class="form-control" placeholder="Enter goal #3 text here." _bl_10="">

      <button type="button" class="hx-button btn btn-danger" _bl_11="">

        Delete
      </button>
    </span>

    <div class="form-text">Hint: enter short, precise description what you want to do today</div>
  </div>
  <div class="container text-center">
    <div class="row justify-content-end">
      <div class="col-4">

        <button type="button" class="hx-button btn btn-secondary" _bl_4="" disabled="">

          New Goal
        </button>
      </div>

      <div class="col-4">

        <button type="submit" class="hx-button btn btn-primary">

          Save
        </button>
      </div>
    </div>
  </div>
</form>

Upvotes: 0

Views: 438

Answers (1)

Vivek
Vivek

Reputation: 44

First of all, you don't need to use row and col as a wrapper of buttons as row cols have different purposes so you can do it like this:

<form>

  <div class="hx-form-group position-relative">
    <label for="el62ba8cb87eb84be2bebc9c2970de0552" class="form-label">Goal #1</label><span class="input-group"><input id="el62ba8cb87eb84be2bebc9c2970de0552" type="text" class="form-control" placeholder="Enter goal #1 text here." _bl_6="">
      <button type="button" class="hx-button btn btn-danger" _bl_7="">
        Delete
      </button>
    </span>

    <div class="form-text">Hint: enter short, precise description what you want to do today</div>
  </div>

  <div class="hx-form-group position-relative">
    <label for="el28a7e89fc62249dd80048d65487a2354" class="form-label">Goal #2</label><span class="input-group"><input id="el28a7e89fc62249dd80048d65487a2354" type="text" class="form-control" placeholder="Enter goal #2 text here." _bl_8="">

      <button type="button" class="hx-button btn btn-danger" _bl_9="">

        Delete
      </button>
    </span>

    <div class="form-text">Hint: enter short, precise description what you want to do today</div>
  </div>

  <div class="hx-form-group position-relative">
    <label for="ele59dd34cf9ed4db2a92de894f47b5946" class="form-label">Goal #3</label><span class="input-group"><input id="ele59dd34cf9ed4db2a92de894f47b5946" type="text" class="form-control" placeholder="Enter goal #3 text here." _bl_10="">

      <button type="button" class="hx-button btn btn-danger" _bl_11="">

        Delete
      </button>
    </span>

    <div class="form-text">Hint: enter short, precise description what you want to do today</div>
  </div>
    <div class="d-flex justify-content-end">
      <div class="col-auto">

        <button type="button" class="hx-button btn btn-secondary" _bl_4="" disabled="">

          New Goal
        </button>
      </div>

      <div class="col-auto">
        <button type="submit" class="hx-button ms-3 btn btn-primary">
          Save
        </button>
      </div>
    </div>
</form>

Source: https://codepen.io/kukrati/pen/YzaYEXy

and make sure you have removed its parent .container class

if you don't want to change your existing layout due to some limitations then you just need to replace .col-lg-4 with .col-auto and then remove the parent .container class

Upvotes: 1

Related Questions