Bootstrap 5 Cards Sizing using custom CSS
Last Updated :
18 Nov, 2022
Bootstrap 5 card component provides a flexible and extensible content container with multiple variants and options. It includes options for headers and footers. Cards support a wide variety of content, including images, text, list groups, links, and more.
Cards using custom CSS is used to set the custom CSS styles in external stylesheets or as inline styles to set the width of the card.
Syntax:
<div class="card" style="...">
<div class="card-body">
Content
</div>
</div>
Example 1: In this example, we will set the width of the card using inline CSS.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
Bootstrap 5 Cards Sizing using custom CSS
</ title >
rel = "stylesheet"
integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
</ head >
< body >
< div class = "container" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h3 >Cards Using custom CSS</ h3 >
< div class = "card" style = "width: 18rem;" >
< img src =
class = "card-img-top" >
< div class = "card-body" >
< h5 class = "card-title" >Java</ h5 >
< p class = "card-text" >
Java is Object Oriented. However,
it is not considered as pure
object-oriented as it provides
support for primitive data types
(like int, char, etc)
</ p >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Example 2: In this example, we will set the width of the card using an external stylesheet.
File Name: style.css
HTML File: We will import style.css in this HTML File.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
Bootstrap 5 Cards Sizing using custom CSS
</ title >
rel = "stylesheet"
integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
< link href = "./style.css" rel = "stylesheet" >
</ head >
< body >
< div class = "container" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h3 >Cards Using custom CSS</ h3 >
< div class = "card" id = "GFG" >
< img src =
class = "card-img-top" >
< div class = "card-body" >
< h5 class = "card-title" >Java</ h5 >
< p class = "card-text" >
Java is Object Oriented. However, it is
not considered as pure object-oriented
as it provides support for primitive
data types (like int, char, etc)
</ p >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/card/#using-custom-css
Share your thoughts in the comments
Please Login to comment...