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 use links on card-img-overlay class in Bootstrap 4 ?
- How to display multiple horizontal images in Bootstrap card ?
- How to align button to right side of text box in Bootstrap?
- How to use Bootstrap to align labels with content into 4 columns ?
- HTML5 | <footer> Tag
- HTML | DOM Footer Object
- HTML Course | Building Footer
- How to append Angular styles in footer ?
- How to create footer to stay at the bottom of a Web page?
- CSS | Buttons
- Include Bootstrap in AngularJS using ng-bootstrap
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.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.