How to align buttons in Card footer in Bootstrap ? - GeeksforGeeks

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 BodyCard TitleCard Text
Card Title
Card Text
Card FooterLeft ButtonCenter ButtonRight Button
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= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">             <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">     </script>             <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">     </script>             <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">     </script> </head>  <body>      <!-- Create a card -->    <div class="card" style="width: 22rem; margin:0 auto;">        <img class="card-img-top"            src="https://media.geeksforgeeks.org/wp-content/uploads/20190506125816/avt.png"                    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"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </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:
Picked
Bootstrap
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to set Bootstrap Timepicker using datetimepicker library ?
How to Show Images on Click using HTML ?
How to pass data into a bootstrap modal?
How to change the background color of the active nav-item?
Difference between Bootstrap 4 and Bootstrap 5
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
Express.js express.Router() Function