Question 44515 in Html Question posted in
Some basic documentation can be found here.

button make the same position with other element – Html

I have an HTML layout that is divided into two columns as shown below:

<div class="card-body">
    <div class="row">
        <div class="col-md-10">
            <form id="bookform">
                <div class="row">
                    <div class="col">
                        <label for="datefrom" class="form-label">Date From</label>
                        <input id="datefrom" name="datafrom" type="text">
                    </div>
                    <div class="col">
                        <label for="dateto" class="form-label">Date To</label>
                        <input id="dateto" name="dateto" type="text">
                    </div>
                    <div class="col-2">
                        <label for="bookname" class="form-label">Book Name</label>
                        <input id="bookname" name="bookname" type="text">
                    </div>
                    <div class="col-2">
                        <label for="batchno" class="form-label">Batch No</label>
                        <input id="batchno" name="batchno" type="text">
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <label for="address" class="form-label">Address</label>
                        <input id="address" name="address" type="text">
                    </div>
                </div>
            </form>
        </div>
        <div class="col-md-auto">
            <div class="row">
                <button class="btn btn-outline-success">Excel Export</button>
            </div>
        </div>
    </div>
</div>

The output is
enter image description here
I want the button to be aligned with the bottom of the textboxes. Can you please help me with how to achieve this?

Tags:

2

Answers


  1. 0

    im not sure if this a good way to do

    you can add style inside the button,
    it would be like

    <button class="btn btn-outline-success" style="padding-top: 1rem;">

    or

    <button class="btn btn-outline-success pt-1">

    ref: https://getbootstrap.com/docs/5.0/utilities/spacing/#notation

    note: change the number as you need

    Login or Signup to reply.
  2. 0

    You can align vertically and horizontally the content of a column. Maybe the class align-self-end could solve your problem:

    <div class="col-md-auto align-self-end">
    <div class="row">
    <button class="btn btn-outline-success ">
      Excel Export
    </button>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search