Skip to content
Related Articles

Related Articles

How to align buttons in Card footer in Bootstrap ?
  • Last Updated : 30 Jul, 2019

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.




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

Output:

Example 2:




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

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :