How to align buttons in Card footer in Bootstrap ?

Alignment of buttons in the Card footer is so much easy when you are familiar with the float element. There is another way to align the left or right wherever you want to place the button in the footer of the card. In this article, you will learn how to align buttons in the footer section of a Bootstrap Card. Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.
Structure of Bootstrap card:

  • Card Image
  • Card Body
    • Card Title
    • Card Text
  • Card Footer
    • Left Button
    • Center Button
    • Right Button

Example: Use float-left, float-right and float-right to align the buttons on the card.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>
  
    <!-- Create a card -->
    <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>

chevron_right


Output:



Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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"
  
    <script src=
    </script>
  
    <script src=
    </script>
  
    <script src=
    </script>
</head>
  
<body>
    <div class="card" style="width: 22rem; margin:0 auto;">
          
        <div class="card-header text-success text-center">
            <h3>GeekforGeeks</h3>
        </div>
        <div class="card-body text-center">
            <h4 class="card-title ">Practice</h4>
              
            <p class="card-text">
                Practice for Computer Science coding interview
            </p>
            <a href="#" class="btn btn-primary">Login/Sign UP</a>
        </div>
        <div class="card-footer text-center">
            <button class="btn btn-theme float-left"
                    type="button"><
            </button>
            <button class="btn btn-theme"
                    type="button">+
            </button>
            <button class="btn btn-theme float-right"
                    type="button">>
            </button>
        </div>
    </div>
</body>
  
</html>

chevron_right


Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.