Using Bootstrap to align a button and an input field on the same line within a form-control

Is there a way to ensure that the button remains on the same line as the input text in the previous forms-control?

<div class="row">
  <div class="form-group col-xs-6 col-md-5 ">
    <label for="">Name</label>
    <input class="form-control " type="text" >
  </div>
  <div class="form-group col-xs-6 col-md-5 ">
    <label for="">E-mail</label>
    <input class="form-control " type="text" ">
  </div>
  <div class="form-group col-xs-6 col-md-2">
    <button class="btn btn-primary">Save</button>
  </div>
</div>

To view an example, check out this fiddle: Fiddle

I attempted to add a label above the button tag, but I'm unsure if this is the most effective solution.

Answer №1

To ensure the button aligns at the bottom with the inputs, apply align-items-end to the flexbox row...

<div class="container">
  <div class="row align-items-end">
    <div class="form-group col-5 col-md-5 ">
      <label for="">Name</label>
      <input class="form-control " type="text" id="inputHrDiariamaxima">
    </div>
    <div class="form-group col-5 col-md-5 ">
      <label for="">E-mail:</label>
      <input class="form-control " type="text" id="inputKmDiariamaxima">
    </div>
    <div class="form-group col-6 col-md-2">
      <button class="btn btn-primary">Salvar</button>
    </div>
  </div>
</div>

Bootstrap 4 no longer supports the -xs breakpoint.

Check out the demo here: https://jsfiddle.net/xLc28pg5/

Answer №2

Transform your final column into a flexbox layout and align the items to the end. Incorporate Bootstrap by applying the d-flex align-items-end classes to the button within the respective column.

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

When it comes to the CSS `:visited` pseudo-class, I have

I'm having trouble changing the color of the anchor tag and blurring the image after visiting the link. Despite my CSS code, only the color is changing and the image remains unchanged. Here's my CSS code: <style> .image123{ paddin ...

Guide to aligning a container to the left in Bootstrap 5

I have a grid container in Bootstrap 5 and I'd like to align it to the left on my webpage. <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3f5d50504b4c4b4b54e42f56b61a0acf40"&g ...

"Can you guide me on positioning an image logo before text by utilizing the content attribute within the style tag

I am new to coding and experimenting with HTML. I want to display an image before the text "hello html" but for some reason, it is not working. Here is the code I have tried: <head> <style> .img::before { content: url("img/smartphone.png"); ...

How can I add rows to the tbody of a table that is already inside a div container?

I have an existing table and I want to append a tbody element to it. Below is an example of the HTML table: <div id="myDiv"> <table class="myTable"> <thead> <tr> <th>ID</th> ...

Presentation and selection list

Here is the CSS code I am using: .nav li a { background-color:#000; color:#fff; text-decoration:none; padding:10px 15px; display:block; } .nav > li { float:left; } .nav li a:hover { background-color:#4db4fa; } .nav li ul { ...

Ensure that the headers of the table are in perfect alignment with the

Is there a way to create a table with fixed row headers so that column headings stay in place while scrolling? I've managed to achieve this, but now the table headers are not aligned properly with the rows below. I've also created a helpful jsfid ...

Adaptable Design for Smartphones

Currently in the process of creating a website for my brother with Joomla 3.4 and Bootstrap. This marks my first venture into building a responsive site, so I'm seeking guidance on essential elements to include in my CSS such as font sizes in specific ...

Finding the identification of the first element within a nested div using JQuery

Here is the HTML snippet that I am working with: <div id="parent"> <div id="computer"> <div id="items"> <div id="1">hp</div> <div id="2">compaq</div> <div id="3"& ...

What is the best way to retrieve data from a POST request?

I am attempting to post data from the same site and create a new order when the submit button is clicked. However, I am not receiving any information in my req.body, leading me to suspect that there may be an issue with my ejs file. Any feedback on this ma ...

When utilizing jQuery lightbox to pull data from a database using PHP/Ajax, it may require a double click the

Encountering a strange issue where I must click on specific buttons with unique IDs. These IDs are then sent through Ajax to a PHP script, which searches for corresponding entries in the database. The retrieved data is then displayed in a jQuery lightbox. ...

Assign the value/text of a div element by using JavaScript/jQuery within a PHP loop

I'm struggling to figure out how to set the value/text of a div using javascript/jquery inside a loop. Can anyone offer some guidance on this issue? Goals: Extract data from a database. Use javascript/jquery to assign the extracted data to an eleme ...

Modify the button transition background color in Bootstrap 4 for a new look

I am looking to customize the hover behavior of buttons on my website. By default, the buttons darken in color when hovered over. I was attempting to modify this behavior by adjusting variables in the _variables.scss file within the Bootstrap source code. ...

What could be causing the malfunction in my Bootstrap navbar?

<!-- Including Bootstrap CSS files locally-->> <link rel="stylesheet" href="bootstrap.min.css"> <link rel="stylesheet" href="bui.css" <!-- Creating a Navbar--> <nav class="navbar navbar-expand-lg navbar-light bg- ...

Firefox experiencing glitchy rotation in CSS animations

I attempted to create a rotating div using a simple code snippet: <!DOCTYPE html> <html> <head> <style> .spinner { width: 100px; height: 100px; margin: auto; border-radius: 50%; border-bottom: 1px solid #f00; animation ...

Secure your URL with password protection

I have a website that requires restricted access upon entry. Prior to loading the page, users must enter three fields: username, password (belonging to the client), and a specific password unique to that particular page. These credentials are stored in a d ...

Step-by-step guide on programmatically activating a radio button

I am working with a radio button and input field. I need the ability to programmatically toggle the radio button so that when this.iAreaOfCoverageForThresholdPasser.average-height is set to true, the radio button appears highlighted. Snippet of HTML: < ...

Addressing the status bar gap issue on the iPhone X with Cordova for iOS 11.0

After receiving helpful feedback on my previous Cordova question regarding status bars, I've encountered a new issue with the iPhone X on iOS 11.0. I came across this thread: Users are reporting a white bar appearing specifically on the iPhone X run ...

Django causing CSS issues following the utilization of an if statement

I have been working on adding a dropdown list to my navbar, which I created using Bootstrap. However, whenever I place the dropdown menu inside an if statement for looping categories into a list, it seems to be breaking the CSS. Check out the navbar witho ...

Creating a full-width row and columns layout using CSS Flex Box styling

Hello my fellow coding enthusiasts! I'm trying to create a simple box layout using flexbox, but I'm struggling to get it just right. The goal is to have a row with two columns within one container. Here's what I'm aiming for: Essentia ...

The validity of AngularJS form is constant and always returns true with formName.$valid

I am facing an issue with my Angular application form where even though the input fields are blank, formName.$valid is always true. Below is the HTML code for my form: <form name="contactForm" novalidate ng-submit="processForm(formData)" autocomplete=" ...