Tile button should be stick in bottom

[shahzadsiddiqui8]

Hi I am trying to create a custom card-tile but my tile-footer button is not sticking in bottom, please help how I can fix my button in bottom. I am using bootstrap 4.1.0…

<div class="col-md-4 col-sm-6">
	<div class="tile-card card-boxshadow ht-300">
		<div class="tile-header">
			<h3 class="pull-left">Sibel</h3>
			<div class="pull-right tile-icon">
				<i class="fa fa-fire col-Red" aria-hidden="true"></i>
				<i class="fa fa-tint col-lightBlue" aria-hidden="true"></i>
			</div>
			<div class="clearfix"></div>
			<p class="card-subheading1">IBU - ASV SUPP</p>
			<p class="card-subheading1">Location - Bengaluru, India</p>	
		</div>
		
		<div class="tile-body pt-10">
			<ul>
				<li>Request ID : 12345</li>
				<li>Location: Noida</li>
				<li>Job Status : Open</li>
				<li>Job Posted : 3 weeks Ago</li>
			</ul>
		</div>
		<div class="tile-footer">
			<button class="btn btn-primary blue">View Details &amp; Apply </button>
		</div>
	</div>
</div>

.tile-card {
    border: 1px solid #ccc;
    display: block;
    overflow: hidden;
    margin-bottom: 10px;
    border-radius: 5px;
    padding: 10px;
    text-align: left;
}

.ht-300 {
    height: 300px;
}

.tile-footer {
    position: relative;
}
.tile-footer button {
    letter-spacing: 1px;
    position: absolute;
    top: 20px;
    text-align: center;
    left: 0;
    right: 0%;
    margin: 0 auto;
    padding: 3px 5px;
}

[DaveMaxwell]

What version of bootstrap are you using? It looks OK to me if I include the latest bootstrap, so if you’re using latest, then some other css is overriding the default styles. But using the styles you included in your post, it sticks to the bottom.

[PaulOB]

Assuming your problem is that you have 3 of those columns and you want to match the height but keep the footer at the bottom then you need to utilise flex and not absolute positioning (although that would work for fixed height items).

If you create nested flex boxes you can create a full height context and then push the footer down so it matches any height of the other boxes.

By the way never do this: ht_300 {height:300px}. Never give a fixed height to items that hold fluid content like text. use a min-height if needed but please allow the element to grow when needed.

[jonmcghee77]

In your CSS you could try changing position from absolute to fixed