How can I set Button at bottom div by using jQuery

Question

In my HTML I use divine into 2 col-md-6 and in left side I've a picture and right side I've a text , not sure maybe I should use jQuery .height() ?

 <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> // this buttuon I want it to display at bottom of div image <div class="col-sm-12 col-lg-12 col-md-12"> <button type="submit" id="but"> Information </button> </div> </div> </div> 

Answer 1

Here you go with a solution https://jsfiddle.net/hhhy8uhv/

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

Solution is without jQuery , just by placing the containers.

One more solution https://jsfiddle.net/hhhy8uhv/1/

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

Include one more row and there you can keep the button.

Hope this will help you.

Answer 2

<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 buttuon I want it to display at bottom of div image
   </div>
   <button type="submit" id="but">
   Information
   </button>
</div>


//CSS Code


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

Updated Fiddle Link https://jsfiddle.net/DTcHh/38362/ Slightly changed the structure of HTML.

You can swap the red background to right then change the css to the following

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