Button fill div height using Bootstrap - html

Question

I want my div col-md-9 to have a height the same as the content in my first div col-md-3's contents.
I also want my div col-md-9's button inside to be the same height as the col-md-3's content.
I'd like the text on the button to fill the button also.
How do I accomplish this?
<div class="row" style="height:300px;">
<div class="col-md-3">
<div class="thumbnail">
<a href="#(Url.Content("~/ProjectTimer/LITL.DesktopTimer.application"))">
<img src="#(Url.Content("~/Images/LIJayCow-135.png"))" alt="Download Timer App" />
</a>
<div class="caption">
<p>Run the Timer App on your computer to keep track of your time.</p>
<a class="btn btn-primary" href="#(Url.Content("~/ProjectTimer/LITL.DesktopTimer.application"))">
<span class="glyphicon glyphicon-download"></span> Download
</a>
</div>
</div>
</div>
<div class="col-md-9" style="height:300px; background: #f0e68c">
<div class="thumbnail" style="width:100%; height:300px">
<a class="btn btn-block btn-primary" style="display: block; width: 100%; height:100%; font-size:large" href="#(Url.Content("~/ProjectTimer/LITL.DesktopTimer.application"))">
<span class="glyphicon glyphicon-share"> LIRA</span>
</a>
</div>
</div>
</div>

Answer 1

All you have to do is change the div with the class "row" to the height you want.
<div class="row" style="height:300px;">
<div class="col-md-3" style="height:100%">
<div class="thumbnail" style="width:100%; height:100%">
<a href="#(Url.Content("~/ProjectTimer/LITL.DesktopTimer.application"))">
<img src="#(Url.Content("~/Images/LIJayCow-135.png"))" alt="Download Timer App" />
</a>
<div class="caption">
<p>Run the Timer App on your computer to keep track of your time.</p>
<a class="btn btn-primary" href="#(Url.Content("~/ProjectTimer/LITL.DesktopTimer.application"))">
<span class="glyphicon glyphicon-download"></span> Download
</a>
</div>
</div>
</div>
<div class="col-md-9" style=" background: #f0e68c;height:100%">
<div class="thumbnail" style="width:100%; height:100%;">
<a class="btn btn-primary" style="" href="#(Url.Content('~/ProjectTimer/LITL.DesktopTimer.application'))">
<span class="glyphicon glyphicon-share"> LIRA</span>
</a>
</div>
</div>
</div>

Answer 2

Are you looking for a result like this?
Codepen: link
<div class="row" style="height:300px;">
<div class="col-md-3">
<div class="thumbnail">
<a href="#(Url.Content("~/ProjectTimer/LITL.DesktopTimer.application"))" >
</a>
<div class="caption" style="height:300px;">
<p>Run the Timer App on your computer to keep track of your time.</p>
<a class="btn btn-primary" href="#(Url.Content("~/ProjectTimer/LITL.DesktopTimer.application"))">
<span class="glyphicon glyphicon-download"></span> Download
</a>
</div>
</div>
</div>
<div class="col-md-9" style="height:300px; background: #f0e68c">
<div class="thumbnail" style="width:100%; height:300px">
<a class="btn btn-block btn-primary" style="display: block; width: 100%; height:100%; font-size:large" href="#(Url.Content("~/ProjectTimer/LITL.DesktopTimer.application"))">
<span class="glyphicon glyphicon-share" style="font-size: 300px;">LIRA</span>
</a>
</div>
</div>
</div>

Answer 3

Just use the btn-block class, like this:
<div class="col-md-3"><button class="btn btn-block" >Show Details</button></div>

Answer 4

The issue is that the button is 100% height when using h-100, the solution is to set the form element to 100% also.
So it'll look like this:
#using(Html.BeginForm("Action","Controller", FormMethod.Post, new { #class = "h-100" }) {
<button class="h-100">Button</button>
}