What is the best way to position two buttons on the bottom of a div, one on the left and the other on the right

I am looking to incorporate the Back and Next buttons into my screen design in a fixed position at the bottom. However, when I resize the screen, the buttons end up moving to the top or bottom (see screenshots attached). Can someone review my code and provide a solution?

https://i.sstatic.net/H30N4.png https://i.sstatic.net/pdvZ7.png

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>
htmlcssbuttonposition

Answer №1

My problem has been resolved thanks to everyone for their assistance. 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I remove a specific JSON object from localStorage based on the data associated with the element that is currently being clicked on?

Unique Scenario A user interacts with an element, triggering a change in the background image and storing data related to that element in localStorage: this process functions correctly. Next, the toggle variable is set to 0, the background image change ...

javascriptjqueryhtmlcsslocal-storage

Retrieve information using Angular's EventEmitter

Recently I started learning Angular and encountered a challenging issue that has kept me occupied for the past few hours. I have implemented a parent-child relationship between two components, with a need to share a boolean variable from the parent to the ...

htmlangulartypescript

I'm seeking assistance with a frontend script problem. I'm curious if there are alternative approaches to coding this script that may be more effective. Can anyone offer guidance on this?

As a frontend developer specializing in script injection, I have been utilizing Adobe Target to inject scripts. However, this method presents several challenges: 1. It is difficult to debug code errors as my HTML and CSS are wrapped inside ' ' a ...

javascripthtmlcssfrontend

Enhance the functionality of the button by implementing AJAX with the use of data

I am currently working on implementing an update function without using forms. Instead, I am utilizing data-* attributes and ajax. My goal is to prevent the button from triggering after updating the values. However, I am facing an issue with my script as ...

javascriptphpjqueryajaxhtml

New to using JavaScript and JQuery, attempting to position a form underneath an image at a specific URL for the

Hello, I'm having difficulties placing a form below an image with a specific URL. As someone who is still learning JQuery, I am unsure of what mistake I might be making. Is there anyone who can help me figure out what's wrong here? <html> ...

javascriptjqueryhtmlimageforms

Tips for deleting directory path from a file name

Similar Question: How to extract file name from full path using PHP? echo '<td width="11%" class="imagetd">'. ( ( empty ($arrImageFile[$key]) ) ? "&nbsp;" : htmlspecialchars( is_array( $arrImageFile[$key] ) ? implode(",", $arrImag ...

phphtml

Is it possible to change the color of an element in Angular when using the ngClass and ngStyle directives with

Hey everyone! I've created a StackBlitz demo for reference, where I used an expansion panel to expand content based on click events. For example, clicking on the All element expands all content, while clicking on the B element expands only 'B&apo ...

cssangularng-classng-style

Steps to activate the main menu of a navigation bar after choosing a submenu:

I am currently working on a bootstrap nav bar that has main menus and submenus. I am trying to figure out how to make one of the main menus highlighted after selecting its submenu. For example, when I choose "For Shippers", I want "HOW IT WORKS" to become ...

javascriptjqueryhtmlcsstwitter-bootstrap

Adjusting the size and style of the <textarea > dynamically

Is it possible to dynamically change the size of a field based on user input? I have a select field with 3 options, each with different values. When a user selects an option, I want the value to fit within the field size. How can I adjust the size of ...

javascripthtmlcoding-stylesizetextarea

Dynamic web design: leverage variable font sizes in the DOM

I'm having trouble adjusting the font size using a variable in my code. Can anyone pinpoint the issue? Link to the code snippet <div id = "letter"> <span>A</span> <span>l</span> <span>p</span> ...

javascriptcssdom

Difficulty replicating 3 input fields using JavaScript

Combining the values of 3 input fields into 1 Displaying 'fname mnane lname' in the fullname input field. Then copying the fullname value into another input field called fullname2. Check out the code below for both HTML and JavaScript implemen ...

javascripthtmlbootstrap-4

What could be causing Ajax's html() function to create a loop that never ends?

Is there a way to incorporate an animation during the database operation and update the table content in the HTML document once the operation is completed? <script> var jobj = new Object(); jobj.uid = <?php echo "'".$_SESSION['user_ ...

javascriptjqueryhtmlajax

Calling the ColdFusion component with $.ajax results in returning plain text instead of HTML

Apologies if this question has already been addressed. I am working on setting up a pagination system that involves sending variables to a ColdFusion function query in order to fetch a specific number of elements and display those records on a web page wi ...

jqueryhtmlajaxcoldfusioncfc

It seems like there may be an issue with the React Table Pagination in reactjs

As a newcomer to React JS, I have been utilizing react-table to create a component that can filter, sort, and paginate sample data from a JSON file. If you are interested in the tutorial I am following, you can find it here: Currently, I am encountering ...

javascripthtmlreactjsfrontend

Creating dual modes (night/day) for your AngularJS application

Currently, I am in the process of developing a project with Angularjs and facing an obstacle with animations. My goal is to implement a feature in my application that allows it to display in two different modes - night mode and day mode. I have come ac ...

javascriptcssangularjssassangular-ui-router

Every time I attempt to utilize pdf.js, I encounter a Cross-Origin Request block

When attempting to read a local PDF file using pdf.js, I included the following script tag: <script src="https://cdn.jsdelivr.net/npm/pdfjs/build/pdf.min.js"> </script> To check if it was working, I added a simple console.log: ...

htmlpdf.js

Switch up the arrangement of layout rows and columns using Bootstrap and CSS

On my desktop screen, the order of cols in Bootstrap is as follows: COL-A COL-B COL-C <div class"container"> <div class="row"> <div class="col-lg-4 col-md-4">Text 1</div> <div class="col-lg-4 col-md-4"><img sr ...

cssbootstrap-4

Creating a see-through cursor resembling the one found on the App Store using CSS

Currently, I’m struggling a bit with understanding how to accomplish this task: The issue is that the pointer/arrow within the nav-element appears transparent and displays the content rather than its parent, which is the nav-element. Here is my HTML co ...

htmlcsstransparency

Upon submitting the form, an Ajax call will execute and transfer data to a distinct views.py template

I'm currently in the process of developing a web application with Django. On the index page, I have implemented a search function. The goal is to trigger an AJAX call when a user submits the form. This AJAX call should gather all the necessary data fr ...

javascriptpythonhtmldjangoajax

Unable to define an object within the *ngFor loop in Angular

In order to iterate through custom controls, I am using the following code. These controls require certain information such as index and position in the structure, so I am passing a config object to keep everything organized. <div *ngFor="let thing of ...

javascripthtmlangulartypescript