What is the best way to use Bootstrap to position form input at the bottom of a page?

Does anyone have any tips on aligning a bootstrap form input to the bottom of the page? I've tried a few different methods but haven't had any luck.

Here's how it looks currently.

And here's how I'd like it to look.

I'm aiming to align the form element at the bottom to give it a proper messaging input appearance.

However, my attempt using 

form { position: fixed; bottom: 0; }
ends up changing the formatting of the input like this.

Any suggestions would be greatly appreciated.

<div class="container-fluid">
  <div class="row">
    <div class="col-md-3 messages">
      <p class="city">Edinburgh University <i class="fa fa-graduation-cap"></i><i style="float:right" class="fa fa-sort-desc"></i></p>
      <p class="paddingLeft" style="margin-top:-15px"><i class="fa fa-user-circle"></i> Jack</p>
    </div>
    <div class="col-md-9">
      <h4 style="margin-top:20px">International Business 📈 <i style="float:right" class="fa fa-cog"></i></h4>
      <p class="description"><i class="fa fa-user"></i> 10 | Support group for International Business Students class of 2019.</p>
      <hr>
      <form>
        <div class="form-row">
          <div class="col">
            <input type="text" class="form-control" placeholder="Message">
          </div>
          <button type="submit" class="btn btn-primary">Send</button>
        </div>
      </form>
    </div>
  </div>
</div>
htmlcssbootstrap-4

Answer №1

To achieve this layout, apply absolute positioning with the "bottom: 0;" property.

Implement absolute positioning on the form element, ensuring that it is positioned at the bottom of its parent container. Ensure that the parent container (with class "col-md-9") has a sufficient height to accommodate this placement.

Answer №2

Give this a shot (try using the position that suits your needs best):

div { position: absolute; bottom: 0; }

Hopefully this suggestion is useful :)

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 are some strategies for creating a smooth transition with a max-height of 0 for a single-line div?

I have a div that is one "line" in height. When a button is clicked, I want it to disappear and simultaneously another div with more lines should appear. I have managed to make this work, but no matter what I do, the one-line div disappears very quickly al ...

jqueryhtmlcss

What could be causing the background image on my Jumbotron to fail to load?

Having some trouble with setting my image as the background of the Jumbotron. I've tried a few different approaches, but none seem to be working. It's not an issue with static loading because using img src directly into the Jumbotron section does ...

htmlcssdjango

Looking to include some extra padding when an item is displayed - jQuery

So, I'm working on a jQuery code snippet that controls the visibility of a rectangle element: $("#rectangle").hide(); $("#toggle-rec").click(function () { $("#rectangle").toggle(2000); }); This code hides the rectangle initially and toggles it ...

javascriptjqueryhtmlcss

Achieving seamless navigation with a React JS Bootstrap navbar through smooth scrolling

I am having trouble implementing smooth scrolling on my web application, especially with a navbar from bootstrap. Can anyone offer guidance on how to achieve this? Your help is greatly appreciated! import React, {Component} from 'react'; import { ...

reactjsbootstrap-4

Conditionally assign a class to the body tag in your Jade template

Let's imagine I have a main template file called layout.jade and several files that extend this template - home, about, products, and more. Within the main template, I have structured it like this: body section.main-content b ...

javascripthtmlnode.jspuggulp

JavaScript progress bar with extended duration, inspired by the success-oriented approach

Currently, I am in search of a unique solution or plugin that can replicate the same effect as Kickstarter's crowd fund long term progression bar. It seems like existing solutions only offer short term dynamic progress bars that indicate the percentag ...

javascriptjquerycssjquery-ui

Display a DIV element when hovering over another DIV element using CSS or JavaScript without them being directly related as parent and

So I've figured out how to use CSS to show a hidden div when you hover over its parent. But what if the hidden div is not a child of the parent you want to hover on? How do you make it appear then? For example: <div class="field-1"></div> ...

javascriptjqueryhtmlcss

Drawbacks of adjusting design according to screen width via javascript detection

When creating a website, I want it to be compatible with the most common screen resolutions. Here is my proposed method for achieving this: -Develop CSS classes tailored to each screen resolution, specifying properties such as width and position. -Write ...

javascripthtmlcss

Looking to turn off animation for a WordPress theme element?

Is there a code that I can insert into the style.css file to deactivate the theme animations on my WordPress page? As users scroll down, each element either drops in or slides in. I recently purchased the WP Alchemy theme from , but the animation speed is ...

htmlcsswordpress

Combine the elements within the HEAD tag into a group

I am currently developing a dynamic page system using AJAX. Whenever a link is clicked, an AJAX call is made to retrieve data from the requested page. However, I have encountered an issue where certain data in the page file needs to be placed within the h ...

javascriptphpjqueryhtmlajax

What could be causing Prettier code formatter to suddenly stop formatting in VS Code?

I've been having trouble formatting my code using Prettier in VS Code. Even after reinstalling it, the issue persists and I can't seem to format my HTML/CSS code properly. The screenshot I provided shows that the code remains unformatted even aft ...

htmlcssvisual-studio-codecode-formattingprettier

Creating properly formatted HTML strings using C#

Does anyone know of a C# equivalent to the Beautify Code function found on ? For example, I have this string: <div><div><input type="radio" value="radio" id="radio_0">Radio</div><div><input type="radio" value="radio" id="r ...

c#htmlformattingstring-formatting

able to move through the content without displaying the scrollbar

I am looking to keep my content able to scroll, but I don't want the scrollbar to be visible. I have written my CSS like this: #content-three{ width:100%; height:100%; position:relative; overflow:hidden; } .block_s{ width:90%; ...

javascriptjqueryhtmlcss

Unnecessary additional spacing caused by inline blocks in Firefox

On my webpage, I have organized my div elements using inline-block properties. Strangely, Firefox is adding extra spacing between two specific divs, while Safari and Chrome display the design consistently. Check out this example here. #main { display ...

cssfirefox

How do you position items in the center and lower right corner of a flexbox that takes up the entire

One feature on my website is a flex box that takes up the entire window with a width of 100% and a height of 100vh. Within this flex box, I've centered text and a button, but now I'd like to add a footer to the page. If I simply place the footer ...

cssruby-on-railsrubywebflexbox

Could you please provide instructions on how to manipulate the :root CSS variable using JQuery?

Is there a way to update the :root css variable using jquery? :root { --color: #E72D2D; } .box-icon { background-color: var(--color); } I tried but it doesn't seem to work $("#blueColor").click(function(e) { $(":root").css("-- ...

jquerycss

Combining various array values into a single key in JSON格式

Issue: I am working on a sign-up form for new users using HTML. The goal is to store multiple arrays (each containing "username: username, password: password, topScore: 0) within one JSON key ("user" key). However, the current functionality only allows f ...

javascripthtmlarraysjsonobject

Error: Unable to execute $(...).stellar since it is not a recognized function

Having some trouble implementing the stellar plugin. I've included all the necessary js, but keep getting an error in the dev tools console: 'Uncaught TypeError: $(...).stellar is not a function'. Here's what I have in the head tags: ...

javascriptjqueryhtml

Tips for implementing validation in a multi-step form as outlined in w3schools tutorial

I came across a multistep form creation tutorial on w3schools. However, the tutorial only covers generic validation (checking if a field is empty), which is not sufficient for my needs. How can I implement HTML validation (e.g., min, max, length) for text ...

javascripthtmlcssbootstrap-4

Passing the value in a td element to a JavaScript function using Thymeleaf onClick

Trying to utilize "Thymeleaf" for the first time, I am attempting to pass a value to JavaScript with the following code: onclick="getPropId('${properties.id}')" The corresponding function is as follows: getPropId(inputID){alert(inputId);} Unf ...

javascriptjavajqueryhtmlthymeleaf