What is the best way to position a Button at the bottom of a div using jQuery?

Within my HTML, I have divided into two col-md-6 sections. On the left side, there is a picture and on the right side, there is text. I am considering using jQuery .height() for this layout.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row" style="margin-bottom: 50px">
  <div class="col-md-6 col-xs-6" style="float: right" style=""> 
    <div style="background-color:red;height:456px;width:100%;"></div>
  </div>
  <div class="col-md-6 col-xs-6" style="text-align: right;">  
    <h1 id="head-font" style="font-weight: bolder; margin: 0;">TITLE</h1> 
    <label id="p-font" class="text-font">INFO</label>
    <p class="title text-font" id="p-font" >promotion description</p>
      
    // I want this button to display at the bottom of the image div
    <div class="col-sm-12 col-lg-12 col-md-12">
      <button type="submit" id="but">
        Information
      </button>
    </div>
  </div>
</div>

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

<div class="row" style="margin-bottom: 50px">
   <div class="col-md-6 col-xs-6">
      <div style="background-color:red;height:456px;"></div>
   </div>
   <div class="col-md-6 col-xs-6" style="text-align: right;">
      <h1 id="head-font" style="font-weight: bolder; margin: 0;">TITLE</h1>
      <label id="p-font" class="text-font">INFO</label>
      <p class="title text-font" id="p-font" >promotion description</p>
      // this button I want it to display at the bottom of the image div
   </div>
   <button type="submit" id="but">
   Information
   </button>
</div>


//CSS Code


.row{
  position: relative;
}
#but{
  position: absolute;
  bottom:0;
  right: 3%;
}

Check out the updated Fiddle Link https://jsfiddle.net/DTcHh/38362/ I slightly modified the HTML structure.

If you decide to switch the red background to the right, make sure to adjust the CSS accordingly:

#but {
    position: absolute;
    bottom: 0;
    left: 37%;
}

Answer №2

Check out this solution here

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row" style="margin-bottom: 50px">
    <div class="col-md-6 col-xs-6">  
      <h1 id="head-font" style="font-weight: bolder; margin: 0;">TITLE</h1> 
      <label id="p-font" class="text-font">INFO</label>
      <p class="title text-font" id="p-font" >promotion description</p>
    </div>
     <div class="col-md-6 col-xs-6"> 
      <div style="background-color:red;height:456px;width:100%;"></div>
    </div>
    <div class="col-sm-12 col-lg-12 col-md-12 text-center">
      <button type="submit" id="but">
        Information
      </button>
    </div>
  </div>
</div>

This solution does not require jQuery, just proper container placement.

Another solution here

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-6 col-xs-6">  
      <h1 id="head-font" style="font-weight: bolder; margin: 0;">TITLE</h1> 
      <label id="p-font" class="text-font">INFO</label>
      <p class="title text-font" id="p-font" >promotion description</p>
    </div>
     <div class="col-md-6 col-xs-6"> 
      <div style="background-color:red;height:456px;width:100%;"></div>
    </div>
  </div>
  <div class="row" style="margin-top: 10px;">
    <div class="col-sm-12 col-lg-12 col-md-12 text-center">
      <button type="submit" id="but">
        Information
      </button>
    </div>
  </div>
</div>

Add an extra row to accommodate the button.

Hopefully, this solution serves your needs.

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

Removing a Dynamic Element in ReactJS

--CustomFieldSection.js-- import React, { Component } from 'react'; import CustomField from './CustomField.js'; class CustomFieldSection extends Component{ constructor(props){ super(props); this.stat ...

javascripthtmlreactjs

Designing a webpage with a form and incorporating a dynamic Google graph visualizer using VueJS

Hello VueJS enthusiasts! I'm diving into VueJS and seeking guidance on structuring my code efficiently. My current project involves creating a dynamic Google chart that updates based on user selections from two radio inputs - "House" or "Apartment", ...

javascriptvue.jsbar-chart

The Axios response interceptor consistently yields an Undefined value

The site's API caller, utilizing an Axios instance, employs the function processResponse to handle the response data before sending it to the frontend for display. However, an issue arises when attempting to retrieve the response data in the frontend ...

javascriptnode.jsreactjsaxios

Tips for including a variable in formData and the steps for implementing it in an ajax procedure

<input type='file' name='inpfile' id='inpfile' accept='image/*' hidden> javascript code var clicked; $('#btnplusa').click(function(){ clicked = 'a'; $('#inpfile').click ...

javascriptphpform-data

Having trouble adjusting the appearance of the dropdown menu in Angular Material's Select component

I've been attempting to adjust the style of the overlay panel within an Angular Material's MdSelect component in order to change the default max-width property of 280px. I have tried various methods, such as using '!important' to overr ...

cssangulartypescriptsassangular-material2

Utilizing NodeJS alongside Express to retrieve JSON response on the Client side

Currently, I am facing an issue with my Express server where I am struggling to properly read the information sent to the client as part of the response. One of the endpoints in my server is defined as follows: app.post('/click',(req, res) => ...

javascriptnode.jsjsonexpress

The animation in CSS seems to be malfunctioning, but strangely enough, the exact same code works elsewhere

Recently, I encountered a strange issue with my project. An animation effect that was working perfectly fine suddenly stopped working when I opened the project. To troubleshoot, I downloaded the same project from my GitHub repository and found that the ani ...

cssanimation

Utilize both parent component styling passed down through props and component-specific styling in React Native

Can specific styling properties be set from the parent component as props while others are set within the component itself? Below is the code for the component: import React,{ Component } from 'react'; import { View, Text } from 'react-nat ...

javascriptreactjsstylesnative

Vue fails to update a component's appearance even after changes have been made to its data

Hey guys, I'm having a little trouble with one of my Vue components. My goal is to have an image displayed by default, and then change to another image when clicked, triggering a different action. <b-img v-else-if="isopen = true" fluid s ...

javascripthtmlvue.jsbootstrap-4

What is the best way to incorporate the value of a textbox into a list?

I currently have a list structured like this: <p>Please choose from the following options:</p> <script type="text/javascript"></script> <select id='pre-selected-options1' multiple='multiple'> <opt ...

javascriptjqueryhtml

A guide on updating a MySQL table using a JSON object in Node.js

I have a JSON Object and need to UPDATE a mySQL table without listing all of the keys individually For an INSERT operation, I use the following code: var arrayValue = Object.keys(obj).map(function(key) { return String("'"+obj[key]+"'"); ...

javascriptmysqlnode.jstypescript

When floating a heading 4 (h4) and two divs to the left, and a single div to the right,

When floating a h4 and 2 divs to the left, and another div to the right, how can I place a block inside the remaining space that perfectly fills it? The background color of this space should not spread outside. [h4][div][div][remaining space][div] Thank ...

htmlcsscss-float

Intermittent issue with anchor tag function within a div container

Having trouble with my anchor tag inside a div that should act as a popup. The anchor is clickable but doesn't always navigate to the URL in href. I can't figure out what's causing this intermittent issue. Any assistance would be greatly app ...

htmlcss

Retrieve the name of the selected item in the antd dropdown component

I am facing an issue where I cannot retrieve the name of the select component in Ant Design to use the handleInputChange function on its onChange event. As a workaround, I decided to update the state directly in the onChange event by adding it to an obje ...

javascriptreactjsnext.jsantd

Convert $_FILES['tmp_name'] into JSON format and send it again

I recently experimented with using AJAX to upload multiple images and sort data according to the following data structure. My query pertains to utilizing AJAX to retrieve $_FILES['tmp_name'] and incorporating it into client-side JSON data (the ...

javascriptphpjqueryajaxsecurity

Having trouble viewing the npm version on Ubuntu due to the error message: "Module 'semver' not found"

After reinstalling ubuntu on my computer, I proceeded to install node, react, and npm. However, when I attempted to run an old project, I encountered the same error message that I had faced previously. Even checking the version of npm resulted in an error. ...

javascriptnode.jsnpm

Insert the URL into either a div or an iframe

It seems like a common issue. I've come across multiple solutions for this problem. using jquery load using iframe I attempted both methods but encountered difficulties in loading content. Specifically, I tried to load google.com and it didn't ...

javascriptjqueryhtmlcss

Is there an issue with the newline character ` ` not functioning properly in TypeScript when used with the `<br/>` tag?

Having trouble with using New Line '\n' ' ' in Typescript Here is an example of my typescript code: this.custPartyAddress = estimation.partyName + ',' + '\n' + estimation.partyAddress + ',' + ...

htmltypescriptbootstrap-4newline

The ASP.NET session encounters difficulties in refreshing itself

I have been given the task of enhancing a web application built on ASP.NET 4.0 Web Forms to alert users before their session expires, and give them the option to either continue the session or end it. To achieve this, I have implemented a confirmation dia ...

javascriptjqueryasp.netsession-timeout

What is the best way to use JavaScript to replicate the bootstrap WCAG algorithm for selecting dynamic color schemes?

After transitioning to Bootstrap 5, I observed a unique feature where an algorithm determines the text color for buttons when they are hovered or active. For instance: For a primary color of black, hovering over the button changes the background to black ...

javascriptsassbootstrap-5wcag