Positioning of Buttons in Bootstrap 4 Forms

Hey there, I'm encountering an issue with the placement of my button on my website

 <form id="filter_view" method="POST"> {% csrf_token %}
    <div class="form-row">
      <div class="form-group col-md-1">
        <label for="select_id">option</label>
        <select id="select_id" class="form-control">
          <option selected>Choose...</option>
          <option>...</option>
        </select>
      </div>
      <div class="form-group col-md-1">
        <label for="inputZip">write</label>
        <input type="text" class="form-control" id="inputZip">
        <button type="submit" class="btn btn-secondary align-bottom">submit</button>
      </div>
    </div>
  </form>

This results in a site layout similar to this: View Website

I aim to have the submit button aligned within the row of my input box. Any suggestions?

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Utilize flexbox to position the button at the bottom of the column.

To see the effect in fullscreen, you can check out this Codepen link

.flex-bottom {
  display: flex;
  align-items: flex-end;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<form>
  <div class="form-row">
    <div class="form-group col-md-1">
      <label for="inputState">option</label>
      <select id="inputState" class="form-control">
          <option selected>Choose...</option>
          <option>...</option>
        </select>
    </div>
    <div class="form-group col-md-1">
      <label for="inputZip">write</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
    <div class="form-group col-1 flex-bottom ">
      <button type="submit" class="btn btn-secondary ">submit</button>
    </div>
  </div>
</form>

Answer №2

To create a horizontal form layout, simply include the "form-inline" class within the form tag and add a label without any text in the last form group.

.form-inline .form-control {
margin-left:5px;
margin-right:5px;
}

.form-inline .btn {
margin-left:5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8>
  <meta name="viewport" content="width=device-width, initial-scale=1>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js></script>
</head>
<body>


  <form class="form-inline">>
    <label for="select_id">option</label>
        <select id="select_id" class="form-control">
          <option selected>Choose...</option>
          <option>...</option>
        </select>
        <label for="inputZip">write</label>
        <input type="text" class="form-control" id="inputZip">>
        <button type="submit" class="btn btn-secondary align-bottom">submit</button><?xml version="1.0"?>
      </form>


</body>
</html¬;

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

Tips for reusing an SVG element that is embedded on the same page

My HTML5 page includes an embedded SVG icon element. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo="> </head> <body> ...

htmlsvg

Tips for utilizing bootstrap.css to position a web design form in the center of the page and place the copyright at the bottom

I have spent several hours trying to figure out how to achieve this, but still haven't found the solution. I have a form that I believe doesn't look very good: https://i.sstatic.net/t1MRd.png So, I attempted to center the form on the page and ...

jqueryhtmlcsstwitter-bootstrap

Behaviors of size are specified differently in percentage and em/px units

My page consists of a navigation bar wrapped in a header element and a content frame that should be placed below it, both sharing the same width. When I specify the header width using percentages, this is how the page appears: However, when I define the ...

htmlcss

Switch the default blue color of Ngx-Pagination to a different color option

I am currently using the ngx-pagination plugin in my Angular 16 project and I would like to change the default blue color to a different one, is there anyone who can assist me with this? https://i.sstatic.net/NNuy7.png This is the HTML code snippet: < ...

cssangularngx-pagination

Using HTML Dropdowns to Dynamically Generate Options for Lists

I am currently updating a web application that is built using C# with an HTML front-end. The form within the application has two drop-down selection menus. The first drop-down menu needs to call a C# function in order to populate its options with the retu ...

c#htmldrop-down-menu

In next js, the component exceeds 100% overflow when padding is added

https://i.sstatic.net/W30tk.png Hey there, I've been encountering some issues with next js and styled-components. I have a parent component (sc-hgRfpC lbMBdR) with a width of 400px, and swap-div-5 with a width: 100%. However, when I add padding: 12px ...

cssnext.jsstyled-components

Element with absolute position does not expand along with scrollable content (over 100%)

In my popup window, the fade element is supposed to stretch to the full width of the screen. However, when the content exceeds 100% of the browser window height, the element does not extend to the full page height. If I set html, body { height: 100%; over ...

javascriptjqueryhtmlcss

Resolve the menu issue in bootstrap 4 by preventing the sub-dropdown menus from overlapping

This is essentially what I am aiming to achieve: https://i.sstatic.net/OJhAy.png To illustrate my issue, I have created this codepen: CodeLink /** Main Nav **/ #main-nav{ margin:0 auto; padding-top: 10px; padding-bottom: 10px; } #main-nav .container ...

htmlcss

Utilizing data binding in AngularJS upon choosing an item from a drop-down menu

I'm new to AngularJS and would appreciate any help on how to accomplish the following task: When I select an option from a dropdown list, I want the relevant information to be displayed in readonly fields. Here is an attachment for reference: https:// ...

htmlangularjsjson

Attempting to customize a layout to showcase a document in PDF format

Hey there, I am currently working on customizing a template to showcase a PDF file instead of an image in a lightbox. Initially, the template was designed to display an image when clicked, but I'm having trouble getting the PDF to load properly. Since ...

javascripthtmlpdflightboxlightbox2

Having issues with Jquery's ".fadeIn('slow')" function not properly loading the <tbody> element in Internet Explorer

I divided my table into two parts, <thead> and <tbody>. The <thead> is always displayed on the page, while the <tbody> is initially set to "display:none" and loads with content when a button is clicked. To load the <tbody>, I ...

jqueryhtmlcssinternet-explorer

Ensuring the checkbox is disabled prior to editing

Check out my table below: https://i.stack.imgur.com/7byIa.png Whenever I click the edit button, I can modify the status field and action field. This feature works correctly. However, the issue is that I am able to change the values of status and action e ...

javascriptjqueryhtmlnode.js

Using a background image in CSS for horizontal rules can override other styling rules

Encountered an unusual CSS bug: After using background-image to style hr, none of the subsequent rules or selectors are displaying on the page: hr { border: 0; height: 1px; background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0 ...

cssfirefox

Guide on generating angular <popover-content> programmatically

My goal is to generate angular elements dynamically. While static creation works perfectly fine, I am facing challenges when trying to create them dynamically using data. For instance: <div> <popover-content #pop1 title=" ...

htmlangular

A guide on utilizing radio buttons to delete specific rows within a table with the help of AngularJS

My current issue involves using radio buttons to delete rows in a table. The problem I'm encountering is that multiple rows are being deleted at once instead of just one. You can view an image of my table here. As we all know, with radio buttons, onl ...

htmlangularjsradio-buttonangularjs-ng-repeat

Achieve button highlighting by hovering over the card - Bootstrap 5

Is there a way to make a button focus when hovering over a card in Bootstrap from any place on the card? Currently, the button only focuses when directly hovered over. I want to achieve the effect shown in the second image after hovering over any part of t ...

htmlcsstwitter-bootstrapbootstrap-5

Browsing through the HTML element: receiving a higher number of iterations than initially anticipated

Currently, I am utilizing a Google Web App to construct a web user form with a table containing 10 dropdown lists (select elements). Upon clicking a button, I have implemented a code that loops through all the "select" HTML elements (initially debugging w ...

javascripthtmlgoogle-apps-script

Creating a PHP form

I am in the process of creating a simple inventory system and I would like to include a drop-down menu for users to select a part and input the quantity. The drop-down menu will be populated with items from a mySQL database. While I am comfortable with myS ...

phphtmlmysql

After examining the width properties in the CSS code, it was discovered that one particular icon is larger in

Is there a way to adjust the width of the first icon in my container using CSS? The first icon appears larger than the others, and I'm having trouble making it the right size. #features { margin-top: 35px; } .grid { display: flex; } #feat ...

htmlcssfont-awesome

Experiencing difficulties with running the prefixer script in npm

I'm facing issues while trying to run prefix CSS despite having installed the necessary npm packages like prefixer and postcss-cli in my development environment. When attempting to run the prefixer for my CSS file, I encountered some errors. Here&apos ...

cssnode.jsnpmsassnode-sass