<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
http-equiv
=
"X-UA-Compatible"
content
=
"IE=edge"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
>
<
link
href
=
rel
=
"stylesheet"
>
<
script
src
=
</
script
>
<
script
src
=
</
script
>
</
head
>
<
body
class
=
"m-4"
>
<
div
class
=
"container text-center "
>
<
h1
class
=
"text-success"
>GeeksforGeeks</
h1
>
<
h5
>Bootstrap 5 Card styles</
h5
>
</
div
>
<
div
class
=
"row border p-5 bg-light"
>
<
div
class
=
"card border-secondary"
style
=
"max-width: 17rem;"
>
<
div
class
=
"card-header"
>Write GeeksforGeeks</
div
>
<
div
class
=
"card-body text-secondary"
>
<
h5
class
=
"card-title"
>
Secondary card Border</
h5
>
<
p
class
=
"card-text"
>
Geeks for Geeks have online as well as
offline courses for on-demand topics like
C++.
</
p
>
</
div
>
</
div
>
<
div
class
=
"card border-warning ms-3"
style
=
"max-width:17rem;"
>
<
div
class
=
"card-header"
>Write GeeksforGeeks</
div
>
<
div
class
=
"card-body text-warning"
>
<
h5
class
=
"card-title"
>Warning card border</
h5
>
<
p
class
=
"card-text"
>
Geeks for Geeks have online as well
as offline courses for on-demand topics like
C++.
</
p
>
</
div
>
</
div
>
<
div
class
=
"card border-dark ms-3"
style
=
"max-width:17rem;"
>
<
div
class
=
"card-header"
>
Write Geeksforgeeks</
div
>
<
div
class
=
"card-body text-dark"
>
<
h5
class
=
"card-title"
>Dark card Border</
h5
>
<
p
class
=
"card-text"
>
Geeks for Geeks have online as well
as offline courses for on-demand topics like
C++.
</
p
>
</
div
>
</
div
>
<
div
class
=
"card border-danger ms-3"
style
=
"max-width:17rem;"
>
<
div
class
=
"card-header"
>
Write GeeksforGeeks</
div
>
<
div
class
=
"card-body text-danger"
>
<
h5
class
=
"card-title"
>Danger card Border</
h5
>
<
p
class
=
"card-text"
>
Geeks for Geeks have online as well as
offline courses for on-demand topics like
C++.
</
p
>
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>