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