Open In App

Bootstrap 5 Cards Border

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

Bootstrap 5 Cards Border is part of the utilities that can be used to add borders on cards. Borderless cards are so ugly but the cards of bootstrap will always have borders. According to this utility, classes are used to define the color of the card borders.

Bootstrap 5 Cards Border Classes:

  • border-primary: This class is used to set the color of the card border to blue.
  • border-secondary: This class is used to set the color of the card border to gray.
  • border-success: This class is used to set the color of the card border to green.
  • border-danger: This class is used to set the color of the card border to red.
  • border-warning: This class is used to set the color of the card border to yellow.
  • border-info: This class is used to set the color of the card border to sky blue.
  • border-light: This class is used to set the color of the card border to light gray.
  • border-dark: This class is used to set the color of the card border to dark gray.

Syntax:

<div class="card border-warning ">
      <div class="card-header">..</div>
      <div class="card-body">
        <h5 class="card-title">...</h5>
        <p class="card-text">...</p>
      </div>
</div>

 

Example 1: In this example, we will use four informative border colors for the card.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link href=
        rel="stylesheet"
        integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
</head>
  
<body>
    <div class="container">
        <h1 class="text-success text-center">
            GeeksforGeeks
        </h1>
        <h3 class="text-center">
            Bootstrap 5 Cards Border
        </h3>
  
        <div class="card border-info">
            <div class="card-header">HTML</div>
            <div class="card-body">
                <h5 class="card-title">
                    Hypertext Markup Language
                </h5>
                <p class="card-text">
                    HTML stands for HyperText Markup 
                    Language. It is used to design 
                    web pages using the markup language
                </p>
            </div>
        </div>
        <br>
        <div class="card border-success">
            <div class="card-header">HTML</div>
            <div class="card-body">
                <h5 class="card-title">
                    Hypertext Markup Language
                </h5>
                <p class="card-text">
                    HTML stands for HyperText Markup 
                    Language. It is used to design 
                    web pages using the markup language    
                </p>
            </div>
        </div>
        <br>
        <div class="card border-danger">
            <div class="card-header">HTML</div>
            <div class="card-body">
                <h5 class="card-title">
                    Hypertext Markup Language
                </h5>
                <p class="card-text">
                    HTML stands for HyperText Markup 
                    Language. It is used to design 
                    web pages using the markup language    
                </p>
            </div>
        </div>
        <br>
        <div class="card border-warning">
            <div class="card-header">HTML</div>
            <div class="card-body">
                <h5 class="card-title">
                    Hypertext Markup Language
                </h5>
                <p class="card-text">
                    HTML stands for HyperText Markup 
                    Language. It is used to design 
                    web pages using the markup language    
                </p>
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

Bootstrap 5 Cards Border

Bootstrap 5 Cards Border

Example 2: In this example, we will use the rest of the border color of the card.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link href=
        rel="stylesheet"
        integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
</head>
  
<body>
    <div class="container">
        <h1 class="text-success text-center">
            GeeksforGeeks
        </h1>
        <h3 class="text-center">
            Bootstrap 5 Cards Border
        </h3>
  
        <div class="card border-primary">
            <div class="card-header">HTML</div>
            <div class="card-body">
                <h5 class="card-title">
                    Hypertext Markup Language
                </h5>
                  
                <p class="card-text">
                    HTML stands for HyperText Markup Language.
                    It is used to design web pages using the
                    markup language
                </p>
            </div>
        </div>
        <br>
        <div class="card border-secondary">
            <div class="card-header">HTML</div>
            <div class="card-body">
                <h5 class="card-title">
                    Hypertext Markup Language
                </h5>
                <p class="card-text">
                    HTML stands for HyperText Markup Language.
                    It is used to design web pages using the
                    markup language
                </p>
            </div>
        </div>
        <br>
        <div class="card border-light">
            <div class="card-header">HTML</div>
            <div class="card-body">
                <h5 class="card-title">
                    Hypertext Markup Language
                </h5>
                <p class="card-text">
                    HTML stands for HyperText Markup Language.
                    It is used to design web pages using the
                    markup language
                </p>
            </div>
        </div>
        <br>
        <div class="card border-dark">
            <div class="card-header">HTML</div>
            <div class="card-body">
                <h5 class="card-title">
                    Hypertext Markup Language
                </h5>
                <p class="card-text">
                    HTML stands for HyperText Markup Language.
                    It is used to design web pages using the
                    markup language
                </p>
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

Bootstrap 5 Cards Border

Bootstrap 5 Cards Border

Reference: https://getbootstrap.com/docs/5.0/components/card/#border



Last Updated : 21 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads