Tips for placing the Save button on the right side of a form

In my HTML document for an Angular application using BootStrap4, I am trying to right-align the SAVE button underneath the second form in the same row. I have divided the div container into two forms using col-6 classes for each, but despite trying various Bootstrap classes and CSS align properties, I am still facing alignment issues.

  <div class="container-fluid bgstyle">
      <div class="container pt-2 pb-2 cntnr">
        <div class="row">

          <div class="align-center col-6">
            <form [formGroup]="teacherform" class="pt-2 pb-2">
              <div class="form-group">
                <p class="input-group">
                  <i class="fa fa-camera fa-2x user-icon fa-fw" aria-hidden="true"></i>
                  <label for="file" class="col-sm-10 form-control">Choose profile picture</label>
                  <input type="file" name="pic" accept="image/* " (change)="selectedFile($event)"
                    class="border-left-0 pl-2 pr-2 form-control mr-2px" formControlName="pic">
                </p>
              </div>

              <!-- More form elements here -->

            </form>
          </div>

          <div class="col-6">
            <form [formGroup]="teacherform" class="pt-2 pb-2">


              <!-- Form elements for the second form here -->

              <div class=" input-group text-white text-right">
                <button type="submit" class="btn btn-primary" style="float:right">Save Records </button> 
             </div>
            </form>
          </div>
        </div>
      </div>
    </div>

<!-- end snippet -->

how can i align "save button" to the right side of the form 
Here is my component.html file structure

 

> Updated
<div class="container-fluid bgstyle">
  <div class="container pt-2 pb-2 cntnr">
    <div class="row">

      <div class="align-center col-6">
        <form [formGroup]="teacherform" class="pt-2 pb-2 ">
          <div class="form-group">
            <p class="input-group">
              <i class="fa fa-camera fa-2x user-icon fa-fw" aria-hidden="true"></i>
              <label for="file" class="col-sm-10 form-control">Choose profile picture</label>
              <input type="file" name="pic" accept="image/* " (change)="selectedFile($event)"
                class="border-left-0 pl-2 pr-2 form-control mr-2px" formControlName="pic">
            </p>
          </div>

          <!-- More form elements here -->

        </form>
      </div>

      <div class="col-6">
        <form [formGroup]="teacherform" class="pt-2 pb-2 ">


          <!-- Form elements for the second form here -->

          <div class=" input-group text-white text-right">
            <button type="submit" class="btn btn-primary " style="float:right">Save Records </button> 
         </div>
        </form>
      </div>
    </div>
  </div>
</div>

I'm struggling with aligning the SAVE button to the right side under the second form. Any suggestions on how to achieve this?

htmlcssbootstrap-4

Answer №1

Here's a suggestion to align the "Save button" to the right side of the form:

<div class="container-fluid bgstyle">
  <div class="container pt-2 pb-2 cntnr">
    <div class="row">

      <div class="align-center col-6  ">
        <form [formGroup]="teacherform" class="pt-2 pb-2 ">
          <div class="form-group ">
            <p class="input-group">
              <i class="fa fa-camera fa-2x user-icon fa-fw" aria-hidden="true"></i>
              <label for="file" class="col-sm-10 form-control">Choose profile picture</label>
              <input type="file" name="pic" accept="image/*" (change)="selectedFile($event)"
                class="border-left-0 pl-2 pr-2 form-control mr-2px" formControlName="pic">
            </p>
          </div>

          <div class="form-group ">
            <p class="input-group">
              <i class="fa fa-user fa-2x user-icon fa-fw" aria-hidden="true"></i>
              <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="FirstName"
                placeholder="Teacher ID" formControlName="id">
            </p>
          </div>
          <div class="form-group ">
            <p class="input-group">
              <i class="fa fa-user fa-2x user-icon fa-fw" aria-hidden="true"></i>
              <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
                placeholder="Teacher Name" formControlName="name">
            </p>
          </div>
          <div class="form-group ">
            <p class="input-group">
              <i class="fa fa-user fa-2x fa-fw" aria-hidden="true"></i>
              <input type="text" class="form-control" id="username" aria-describedby="username"
                placeholder="Designation" formControlName="designation">
            </p>
          </div>
          <div class="form-group ">
            <p class="input-group">
              <i class="fa fa-envelope fa-2x fa-fw" aria-hidden="true"></i>
              <input type="text" class="form-control" id="email" aria-describedby="email" placeholder="Date Of Birth"
                formControlName="dob">
            </p>
          </div>


        </form>
      </div>

      <div class="col-6">
        <form [formGroup]="teacherform" class="pt-2 pb-2 ">


          <div class="form-group ">
            <p class="input-group">
              <i class="fa fa-user fa-2x user-icon fa-fw" aria-hidden="true"></i>
              <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="FirstName"
                placeholder="Teacher ID" formControlName="id">
            </p>
          </div>
          <div class="form-group ">
            <p class="input-group">
              <i class="fa fa-user fa-2x user-icon fa-fw" aria-hidden="true"></i>
              <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
                placeholder="Teacher Name" formControlName="name">
            </p>
          </div>
          <div class="form-group ">
            <p class="input-group">
              <i class="fa fa-user fa-2x fa-fw" aria-hidden="true"></i>
              <input type="text" class="form-control" id="username" aria-describedby="username"
                placeholder="Designation" formControlName="designation">
            </p>
          </div>
          <div class="form-group ">
            <p class="input-group">
              <i class="fa fa-envelope fa-2x fa-fw" aria-hidden="true"></i>
              <input type="text" class="form-control" id="email" aria-describedby="email" placeholder="Date Of Birth"
                formControlName="dob">
            </p>
          </div>
          <div class="form-group">
            <p class="input-group">
              <i class="fa fa-unlock fa-2x fa-fw"></i>
              <input type="password" class="form-control" id="password" placeholder="Password"
                formCotrolName="password">
            </p>
          </div>


           <div class="input-group text-white text-right">
            <button type="submit" class="btn btn-primary" style="float:right">Save Records</button>
         </div>
        </form>
      </div>
    </div>
  </div>

</div>

Seeking ways to adjust the positioning of the "Save button" on the right side of the form? Here is the updated component.html file structure:

Updated

<div class="container-fluid bgstyle">
  <div class="container pt-2 pb-2 cntnr">
    <div class="row">

      <div class="align-center col-6  ">
        <form [formGroup]="teacherform" class="pt-2 pb-2 ">
          <div class="form-group ">
            <p class="input-group">
              <i class="fa fa-camera fa-2x user-icon fa-fw" aria-hidden="true"></i>
              <label for="file" class="col-sm-10 form-control">Choose profile picture</label>
              <input type="file" name="pic" accept="image/*" (change)="selectedFile($event)"
                class="border-left-0 pl-2 pr-2 form-control mr-2px" formControlName="pic">
            </p>
          </div>

          <div class="form-group ">
            <p class="input-group">
              <i class="fa fa-user fa-2x user-icon fa-fw" aria-hidden="true"></i>
              <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="FirstName"
                placeholder="Teacher ID" formControlName="id">
            </p>
     </div>
          <div class="form-group ">
            <p class="input-group">
              <i class="fa fa-user fa-2x user-icon fa-fw" aria-hidden="true"></i>
              <input type="text"class="form-control"id="exampleInputEmail1"aria-describedby="emailHelp"placeholder="Teacher Name"formControlName="name">
    
            </p>
          </div>
          . . . (Remaining code truncated for brevity)
        </form>
      </div>

      <div class="col-6">
        <form [formgroup]="teacherform"class="pt-2 pb-2">
          
     . . . (Remaining code truncated for brevity) 

                <div class="text-white text-right">
            <button type="Submit" class="btn btn-primary"Style="float:right">Save Records </button> 
         </div>
        </form>
      </div>
   </div>
  </div>
</div>

Answer №2

To position your button on the right side of the form, you can use style="float: right".

<button type="submit" class="btn btn-primary" style="float: right">Save Records</button>

If you want to specify the distance in pixels, you can use margin-left: some px.

<button type="submit" class="btn btn-primary" style="margin-left: 100px">Save Records</button>

Check out the DEMO here!

Answer №3

There are a couple of methods you can employ to achieve this:

  1. Utilizing the bootstrap class

    <button type="submit" class="btn btn-primary float-right">Save Records</button>

  2. Applying the style attribute directly

    <button type="submit" class="btn btn-primary" style="float:right">Save Records</button>

Answer №4

Issue Identified 

<div class=" input-group text-white text-right">
            <button type="submit" class="btn btn-primary "style="float:right">Save 
           Records </button>

I had originally used the input-group class but realized it was unnecessary.

<div class="  text-white text-right">
                <button type="submit" class="btn btn-primary "style="float:right">Save 
               Records </button> 

</div>

A big thank you to all contributors :-)

Answer №5

To implement a button in Bootstrap 4, place it within a div with the class name set to text-right.

<div class ="container-fluid">
<div class ="container">
    <div class="row">
        <div class="col-12">
            <input class="form-control mb-3" placeholder="Enter">
            <div class="text-right">
                <button type="submit" class="btn btn-primary ">Save Records        </button> 
            </div>
            </p>
        </div>
    </div>
</div>

This solution should satisfy your requirement.

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

Struggling to position table correctly in Angular 2 - excess white space appearing on the right side

I am currently working on creating a table in Angular 2 with 4 columns. However, I have encountered an issue where unwanted white space appears to the right of the last column. Bootstrap is being utilized as well. Below is the HTML code snippet: < ...

htmlcssangular

Create a 3D vertical flip effect for images using CSS

Learning About HTML <div class="container"> <div class="wrapper"> <div class="im-fix"><img src="foo.jpg"></div> <div class="img-closed"><img src="foo-close.jpg"></div> <div class="img- ...

htmlcss

Querying the database to check for the presence of a file in a .js file on Google App Engine

I'm currently working on implementing an upload button for users to upload files to our storage system using Google App Engine with Python, as well as HTML and JavaScript for the views. To achieve this, we have an HTML file and a.js script that promp ...

javascriptpythonhtmlgoogle-app-enginegql

Turn off smooth scrolling in Bootstrap 5 using HTML and CSS techniques

On my website, I have implemented anchor links that activate smooth scrolling when clicked, thanks to the Bootstrap feature. However, the unique layout of my website requires me to turn off smooth scrolling in either the HTML or CSS code. I appreciate an ...

htmlcssbootstrap-5

Responsive Bootstrap 5 table - occupies full width on mobile devices, adjusts automatically on desktop screens

Is there a way to create a table that is full width on mobile using pure bootstrap classes, but only auto width on desktop? I attempted to achieve this with the following code: <table class="table table-bordered w-md-auto w-100 text-start mb-2&quo ...

htmlcssbootstrap-5

Replace the checkbox display heading with a text box in the designated area

I'm new to using kendo ui Currently, I am attempting to show a text box in the first column header. Instead of the checkboxDisplay heading, I want to replace it with a text box. Could someone please provide guidance on how to resolve this issue? Here ...

javascripthtmlangularjskendo-uikendo-grid

Dynamic carousel - integrate seamlessly with AJAX requests

I've implemented the Liquid Slider on my website. There are numerous project pages on my site and I would like to utilize this slider with ajax to load individual HTML content in each slide. However, I'm unsure of where to begin with this proces ...

htmlajaxjsonslider

How can you position a table above a div in HTML and jQuery without using absolute positioning?

I am trying to create a toggle effect for an information table that needs to be displayed above another DIV. I have managed to achieve this using z-index and position:absolute, but I am wondering if there is a way to do it without using absolute positionin ...

jqueryhtmlcss

Hold off on scrolling up while hovering over the screen

I've been attempting to implement a scroll-up behavior in WordPress, but I'm facing difficulties in pausing the animation when hovering over it. I've experimented with both jQuery and CSS methods, but have not been successful so far. Any ass ...

htmljquerycsswordpress

Navigating through images via opacity changes in HTML

Is there a way to create a smooth transition effect between pictures in HTML without reloading the page? I have a series of images that I want users to navigate through by clicking a "Next" button, and I would like each image to fade into the screen. Are ...

javascripthtmlcssimagefade

The HTML document is struggling to load the CSS file as the browser is displaying the error message net::ERR_ABORTED 404, despite both files

I am currently working on developing a basic flask application, and I am relatively new to HTML and CSS. However, I am encountering an issue with linking my CSS file to my HTML file so that it loads properly on the webpage. Despite checking various resourc ...

pythonhtmlcssflask

Targeting all children instead of just the odd ones when using `nth-child(odd)`

In the portfolio, I have a unique requirement where every odd entry should be reversed. These projects are generated dynamically from an array and passed into the component through props. To style it, I'm utilizing styled-components. However, I&apos ...

cssreactjscss-selectorsstyled-components

Instructions for accessing a website with JavaScript authentication

Attempting to log in to a website using Java script. Found the login form on the site but unsure of next steps. Added values "myemail" and "mypass" while inspecting code, successfully logged in. Having trouble incorporating Java script function into own c ...

javascripthtml

Ways to display an image for a duration of 3 seconds upon clicking each button

Need help with my HTML/js code. I have a button that should display an image when clicked, but it's not working properly. Here is the code snippet: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&qu ...

javascripthtmlimage

Adding numerous rows to a database by iterating through a while loop

Greetings! I am currently facing an issue with storing values in my database. The program's logic involves the user inputting the number of subjects they will take. For instance, if a user inputs 6 subjects, 6 input fields with text values should be g ...

phphtmlmysql

What are the best ways to integrate jQuery into a React application?

I am in the process of developing a responsive menu for my react app, but I'm facing some challenges as a newcomer to react. In order to achieve the desired functionality, I am trying to incorporate jQuery for menu toggling. However, when I attempt to ...

jqueryhtmlcssreactjs

What causes the unusual behavior of `overflow-x: auto;` when used within a parent element with `flex-direction: row;` styling

I have gone through numerous other queries regarding horizontally scrolling tables, but none seem to address this particular problem. When using a responsive table in the default Blazor Server template of a new project built with Bootstrap 4, the browser ...

cssbootstrap-4flexboxoverflowblazor-server-side

Why are two vertical scrolls appearing on the screen simultaneously?

I utilized this method to hide the body scrollbar initially and then display it upon clicking a link: $('body').css('overflow', 'hidden'); $('#site').click(function(e) { $('#wrapper').remove(); $(& ...

javascriptjquerycssoverflow

Exploring the contrasting behaviors of CSS in Codepen and Bootstrap

I am attempting to adjust the text to fit into divs of varying sizes that are responsive due to viewport units. There seems to be an issue: the code below works well in a Codepen, at least for the four examples I have: https://codepen.io/gramm/pen/VJPavg ...

htmlcssbootstrap-4codepen

Having trouble getting a div to slide to the left on hover and collapse on mouseout using Jquery?

Hey there! I need some assistance in completing this code snippet. I have a div with overflow:hidden and a margin-left of 82px. Inside it, there is a share link and a ul list containing three external links. When I hover over the share link, everything w ...

javascriptjquerycsshoveronmouseover