html - How to place 2 buttons at the left and right sides of the bottom of a div?

Question

I want to add the Back and Next buttons at the bottom of the screen with a fixed position. For my code, the button moves to the top/bottom of the screen if I change the screen size (I have attached the screenshot for both). Please check my code and help me solve this.

Code

    <div id="text-area">
        <p class="mb-4">
            <strong>Textarea</strong>
        </p>
        <textarea></textarea>
        <p class="d-flex justify-content-between">
            <button class="btn btn-link button" id="back">
                <i class="fa fa-long-arrow-alt-left me-3"></i>
                Back
            </button>
            <button class="btn btn-link button" id="next">
                Next
                <i class="fa fa-long-arrow-alt-right ms-3"></i>
            </button>
        </p>
    </div>

@AbinThaha If I used fixed, then the 2 buttons will overlap with each other. — Rich
You should use fixed to keep the content fixed to some place and that you should give to the parent element. Then give display flex to align the buttons to the ends — Abin Thaha

Rich Rich · Accepted Answer · 2021-07-01T10:27:45

This solved my problem. Thanks all for your time. Happy coding.

<div class="d-flex flex-column flex-grow-1" id="text-area">
    <div class="flex-grow-1">
        <p class="mb-4">
            <strong>Textarea</strong>
        </p>
        <textarea></textarea>
    </div>
    <p class="d-flex justify-content-between">
        <button class="btn btn-link button" id="back">
            <i class="fa fa-long-arrow-alt-left me-3"></i>
            Back
        </button>
        <button class="btn btn-link button" id="next">
            Next
            <i class="fa fa-long-arrow-alt-right ms-3"></i>
        </button>
    </p>
</div>

html - How to place 2 buttons at the left and right sides of the bottom of a div?

1 Answers