i am trying to have a set of bootstrap cards and i want to have them all share the same size and locate the items in the cards at the same position across all cards, meaning all buttons and text fields to be aligned across each row of cards.
i have created three cards,
in each card i have a button and an input field.
after reading some answer here i found out how to position the buttons on the bottom of the card regardless of how much text there is in the card, so all 3 cards now have the buttons on the same level.
but the same approach is not working for text fields, can you please check the code here and see what is it i am doing wrong:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Card Layout</title>
<link href="https://getbootstrap.com/docs/4.0/examples/pricing/pricing.css" rel="stylesheet">
</head>
<body>
<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom box-shadow">
<h5 class="my-0 mr-md-auto font-weight-normal">Company name</h5>
<nav class="my-2 my-md-0 mr-md-3">
<a class="p-2 text-dark" href="#">Features</a>
<a class="p-2 text-dark" href="#">Enterprise</a>
<a class="p-2 text-dark" href="#">Support</a>
<a class="p-2 text-dark" href="#">Pricing</a>
</nav>
<a class="btn btn-outline-primary" href="#">Sign up</a>
</div>
<div class="container">
<div class="card-deck mb-3 text-center">
<div class="card mb-4 box-shadow">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Longest Word</h4>
</div>
<!-- i have three cards below, each one has a button and an input field -->
<div class="card-body d-flex flex-column">
<!-- <h5 class="card-title" style="font-size: 200%">Longest Word</h5> -->
<p class="card-text" style="font-size: 100%">a Function to find and display the longest word in a
phrase, namely the first longest word in case multiple equal size words are present </p>
<input type="text" name="1Input" class="mt-auto" id="cell1Input">
<input type="button" class="btn mt-auto btn-primary" name="1Button" value="Click Me!"
id="cell1Button"></input>
</br>
<span id="1FunctionResult"></span>
</div>
</div>
<div class="card mb-4 box-shadow">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Reverse Text</h4>
</div>
<div class="card-body d-flex flex-column">
<!-- <h5 class="card-title" style="font-size: 200%">Reverse Text</h5> -->
<p class="card-text" style="font-size: 100%">a Function to reverese letters in each word </p>
<input type="text" name="2Input" class="mt-auto" id="cell2Input">
<input type="button" class="btn mt-auto btn-primary" name="2Button" value="Click me!"
id="cell2Button">
</br>
<span id="2FunctionResult"></span>
</div>
</div>
<div class="card mb-4 box-shadow">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Capitalize</h4>
</div>
<div class="card-body d-flex flex-column">
<!-- <h5 class="card-title" style="font-size: 200%">Capitalize</h5> -->
<p class="card-text" style="font-size: 100%">a Function to split words and capitalize all initial
letters in each word</p>
<input type="text" name="3Input" class="mt-auto" id="cell3Input">
<input type="button" class="btn mt-auto btn-primary" name="3Button" value="Click me!"
id="cell3Button">
</br>
<span id="3FunctionResult"></span>
</div>
</div>
</div>
<footer class="pt-4 my-md-5 pt-md-5 border-top">
<div class="row">
<div class="col-12 col-md">
<img class="mb-2" src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" alt="" width="24"
height="24">
<small class="d-block mb-3 text-muted">© 2017-2018</small>
</div>
<div class="col-6 col-md">
<h5>Features</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Cool stuff</a></li>
<li><a class="text-muted" href="#">Random feature</a></li>
<li><a class="text-muted" href="#">Team feature</a></li>
<li><a class="text-muted" href="#">Stuff for developers</a></li>
<li><a class="text-muted" href="#">Another one</a></li>
<li><a class="text-muted" href="#">Last time</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>Resources</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Resource</a></li>
<li><a class="text-muted" href="#">Resource name</a></li>
<li><a class="text-muted" href="#">Another resource</a></li>
<li><a class="text-muted" href="#">Final resource</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>About</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Team</a></li>
<li><a class="text-muted" href="#">Locations</a></li>
<li><a class="text-muted" href="#">Privacy</a></li>
<li><a class="text-muted" href="#">Terms</a></li>
</ul>
</div>
</div>
</footer>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>
</html>https://jsfiddle.net/eliasRob/v7c0f9d2/6/
