<!DOCTYPE html>
<html lang="en">
<head>
<title>
How to align buttons in Card footer in Bootstrap ?
</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<script src=
</script>
</head>
<body>
<div class="card" style="width: 22rem; margin:0 auto;">
<img class="card-img-top"
src=
alt="Card image cap">
<div class="card-body">
<h5 class="card-title" style="color:green">
Card title
</h5>
<p class="card-text" style="color:green;">
This is just a simple card
text inside card body
</p>
<p class="card-text" style="color:green;">
Welcome to geeksforgeeks
</p>
</div>
<div class="card-footer text-center">
<p style="color:green;">We are inside card footer</p>
<button class="btn btn-primary btn-sm float-left"
id="left" style="color:white">
Left Button
</button>
<button class="btn btn-warning btn-sm"
id="center" style="color:white">
Center Button
</button>
<button class="btn btn-danger btn-sm float-right"
id="right" style="color:white">
Right Button
</button>
</div>
</div>
</body>
</html>