The alignment of the label button within the form-group is being set to the top

While using Bootstrap 4, I encountered an issue with aligning the save button in a form group because there was no label at the same level. Despite trying to follow an example from here, I still had to hard code margin-top to prevent the button from being aligned to the bottom. Is there a way to achieve this alignment using pure Bootstrap without any overrides?

<form method="POST" enctype="multipart/form-data" class="form-horizontal">
  <div class="form-group row">
    <div class="col-md-4">
      <input class="form-control" type="text" placeholder="Search by Unit" />
    </div>
    <div class="col-md-4">
      <button type="submit" class="btn  btn-primary"><i class="fa fa-fw fa-search"></i>Search</button>
    </div>
  </div>
</form>
<form method="POST" enctype="multipart/form-data" class="form-horizontal">
  <div class="row">
    <div class="col-md-4">
      <div class="form-group">
        <label for="zones">Zones</label>
        <select class="form-control" id="zones">
          <option>Zone1</option>
          <option>Zone2</option>
        </select>
      </div>
    </div>
    <div class="col-md-5">
      <div class="form-group">
        <label for="unitname">Unit Name</label>
        <input class="form-control" type="text" id="unitname" placeholder="Enter the Unit Name" />
      </div>
    </div>
    <div class="col-md-3">
      <button type="submit"  class="btn  btn-primary"><i
          class="fa fa-fw fa-save"></i>Save</button>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-md-12">
      <table class="table table-stripped">
        <thead>
          <tr>
            <th>#</th>
            <th>Zone Name</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let zone of zones|async">
            <td>{{zone.zoneId}}</td>
            <td>{{zone.zoneName}}</td>
            <td>{{zone.status}}</td>
          </tr>
        </tbody>

      </table>
    </div>
  </div>
</form>

Answer №1

To improve the layout, you can enclose the button in a form-group and then apply classes like d-flex and align-items-end to the col-* div that surrounds it. Here's an example:

<div class="col-md-3 d-flex align-items-end">
  <div class="form-group">
    <button type="submit" class="btn btn-primary">
      <i class="fa fa-fw fa-save"></i>Save
    </button>
  </div>
</div>

Condensed Version:

Please note that the use of border and border-* classes is purely for visual aid.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<link rel="stylesheet" href="/stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

<div class="container-fluid">

<form method="POST" enctype="multipart/form-data" class="form-horizontal">
  <div class="form-group row">
    <div class="col-md-4">
      <input class="form-control" type="text" placeholder="Search by Unit"/>
    </div>
    <div class="col-md-4">
      <button type="submit" class="btn btn-primary">
        <i class="fa fa-fw fa-search"></i>Search
      </button>
    </div>
  </div>
</form>

<form method="POST" enctype="multipart/form-data" class="form-horizontal">
  <div class="row">
    <div class="col-md-4 border border-warning">
      <div class="form-group">
        <label for="zones">Zones</label>
        <select class="form-control" id="zones">
          <option>Zone1</option>
          <option>Zone2</option>
        </select>
      </div>
    </div>
    <div class="col-md-5 border border-primary">
      <div class="form-group">
        <label for="unitname">Unit Name</label>
        <input class="form-control" type="text" id="unitname" placeholder="Enter the Unit Name" />
      </div>
    </div>
    <div class="col-md-3 d-flex align-items-end border border-danger">
      <div class="form-group">
        <button type="submit" class="btn btn-primary">
          <i class="fa fa-fw fa-save"></i>Save
        </button>
      </div>
    </div>
  </div>
</form>

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

What is the best way to move the numerical range value into a span element?

How can I implement the "update" function to retrieve the current slider value and transfer it to a Meter element with the message "Value: [current value]". The indicator color should be #ffff00 if the current value is at least 85, otherwise, it should b ...

What could be the reason for the malfunction of the min value in my Material UI date textfield?

I am attempting to set a minimum date for the picker to start from, but it does not seem to be working as expected. <TextField id="date" type="date" defaultValue="2017-05-24" minDate="24/01/2019" ...

How to troubleshoot Javascript code that fails to identify if a color is white

What could be causing my code to malfunction? I am attempting to determine if the paragraph text color is white (as determined by CSS settings). If it is indeed white, I want to change it to black for better visibility. function adjustColor() { if (d ...

React Traffic Light Component: Colors Stuck After Timeout

I've been working on solving a React issue and followed a tutorial on YouTube. I'm using CodeSandbox for my project, but I'm facing a problem where the colors of the signal are not showing up and do not change after some time. I even tried u ...

Tips for efficiently implementing AJAX requests for multiple forms within a single webpage

Previously, I had a form where clicking submit would hide the form and display the result on a div with classname=dig. However, after adding more forms, all the forms started submitting at the same time instead of individually. How can I fix this issue in ...

The Infinite Loop: Unveiling the En

I'm interested in creating a unique shape resembling the symbol of infinity using CSS, SVG, or Canvas. If you're unfamiliar with what an infinity symbol looks like, here's an example: https://i.stack.imgur.com/cLhBh.jpg So far, I've a ...

Seeking assistance with changing the pages

Looking for assistance with troubleshooting my function. All variables are accounted for. var swith = document.getElementById("sub"); var one = document.getElementById("rule"); var two = document.getElementById("cool"); var three = document.getElementByI ...

When pressed, the button changes color to a vibrant shade of blue, and not just a simple outline

I'm experiencing an issue with a button that turns blue when the user holds onto it for a while on mobile. You can see an example in the image below: https://i.sstatic.net/VmnZ8.png Adding ::selected or outline did not resolve the problem as the ent ...

What are the steps for editing and preserving a logo with an 8-bit indexed color palette?

After purchasing a RE/MAX franchise, I now need to make edits to the official logo found on remax.com using Adobe Photoshop. However, I have encountered a problem when trying to edit their logo in Photoshop. When I open their PNG logo, the layer appears d ...

Bootstrap form validation solution

Utilizing bootstrap validation to validate a jsp page. The folder structure is as follows: WebContent ├── bootstrap-form-validation ├── js └── pages All three folders are under the web content. If I create another folder called teacher ...

Position the Radio Buttons on Top of the Image

I need assistance with positioning radio buttons on top of an image at a specific location. Both the image and radio buttons are currently in a Div container, but I am unsure about the next steps. Below is where I would like to place the radio buttons (red ...

What is the best approach for maximizing user experience: setting a maximum screen width or allowing for auto-width?

I manage a blog with responsive design that adjusts to the width of the screen. The majority of our blog posts consist of lengthy content, often reaching over 1000 words, along with user comments. My main concern is about the reading comfort and usability ...

Trim the edges of a photo and add the Kinetic filter

Currently, I am utilizing Kinetic for image processing purposes. The issue arises when I crop an image and then attempt to convert it to black and white by clicking a button. Unfortunately, the straightforward setFilter function does not seem to work in th ...

How can I convert a JSON template to HTML using AngularJS?

As someone who is just starting out with AngularJS, I am facing an issue where the HTML tags in a JSON file are not being encoded when rendered in HTML using AngularJS. Is there a specific method in AngularJS that can help with this? This is what my HTML ...

What is the best way to display and conceal various elements with each individual click?

Utilizing the onClick function for each triggering element, I have implemented a show/hide feature for multiple element IDs upon click. The default setting is to hide the show/hide elements using CSS display property, except for the initial 3 main elements ...

Preventing document.getElementById from throwing errors when the element is null

Is there a way to handle null values returned by document.getElementById in JavaScript without adding if statements or checks to the code? I'm looking for a solution that allows the execution of subsequent JavaScript calls even after encountering a nu ...

What should be done in Android when the app crashes due to incoming HTML content?

If I register using an email and password, the process is successful if the email exists within the domain. However, if a malformed email address like [email protected] is used, it returns HTML and crashes my app. How can I handle this issue? publi ...

The navigation bar in responsive view on Bootstrap 4 causes the content below it to shift

Recently I have been exploring bootstrap-4 and encountered an issue while creating a nav-bar. The problem is that in responsive view, when toggling the nav-bar it simply pushes the content below it. Is there any way to address this issue within (bootstra ...

Retrieve information from the identical registration form in Codeigniter

https://i.stack.imgur.com/FWTIf.png The student registration form includes fields for father and mother information in the student table, while guardian information is stored in a separate guardians table. When selecting "Father" in the "Guardian Informat ...

Enhancing your design with animated borders on hover

This unique border animation caught my eye and sparked my curiosity. I'm interested to know if it can be achieved using only HTML5/CSS for a hover effect. Have you discovered any other visually appealing hover animations worth mentioning? ...