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.
- Bootstrap 4 | Buttons
- How to get circular buttons in bootstrap 4 ?
- Bootstrap Buttons with Examples
- Bootstrap (Part-3) | Buttons, Glyphicons, Tables
- How to display multiple horizontal images in Bootstrap card ?
- How to use Bootstrap to align labels with content into 4 columns ?
- How to align button to right side of text box in Bootstrap?
- HTML5 | <footer> Tag
- HTML Course | Building Footer
- HTML | DOM Footer Object
- How to create footer to stay at the bottom of a Web page?
- Include Bootstrap in AngularJS using ng-bootstrap
- CSS | Buttons
- HTML | DOM MouseEvent buttons Property
- How to remove focus around buttons on click?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. 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.