Open In App

How to align buttons in Card footer in Bootstrap ?

Last Updated : 30 Jul, 2019
Improve
Improve
Like Article
Like
Save
Share
Report

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= 
"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:






                                    


                                                                        

                                        

                                            

                                                

                                                    
I

        

            
        

        

                                                

                                                

                                                    IshjotSingh97                                                

                                            

                                            

            
                                        

                                        

                                            
    

        
        
    
                                            

                                                
                                                
                                            

                                            

                                            Improve
                                                
                                            

                                        

                                    



                            

                            
 
                                

                                    
                                        Next Article
                                        
                                    
                                    
                                    

                                        How to create a Button in Bootstrap 5?
                                    

                                

                                                        

                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
  
                        

                                                

                        
                                                    

                                
Similar Reads

                                

                                    
        
            

                
Bootstrap 5 Buttons Block buttons

                
Bootstrap 5 Block buttons are used to display the full-width responsive buttons. To make the block buttons, we will use .d-grid, and .d-flex classes. We can also use screen sizes classes to change the button sizes on different screen sizes. Block buttons used Classes: .d-flex: This class is used to display an element as a block-level flex container

            

            
            

                
                2 min read
            

        
    
        
            

                
How to Display a Card within a Card using Bootstrap ?

                
In Bootstrap, the Card component is used to create stylish and responsive containers for displaying various types of content. We can create a Card within a Card effect with different approaches using Bootstrap including the Nested Card Components approach and Card Group approach. Table of Content Using Nested Card ComponentsUsing Card GroupUsing Ne

            

            
            

                
                3 min read
            

        
    
        
            

                
Difference between align-content and align-items

                
Both align-content and align-items function on the cross-axis.Cross-axis in flexbox is dependent on the flex-direction and runs perpendicular to the main-axis, if flex-direction is either row or row-reverse then the cross-axis is vertical, if flex-direction is either column or column-reverse then the cross-axis is horizontal. align-content align-it

            

            
            

                
                4 min read
            

        
    
        
            

                
How to create bootstrap panel with footer ?

                
Bootstrap is a free open source tool for designing modern and responsive websites and web applications. It is the most popular tool for developing websites that are responsive and also beautiful. Bootstrap Panels are boxes with or without a border. You may want to put your contents inside some boxes for a unique design. So in this article, we will

            

            
            

                
                2 min read
            

        
    
        
            

                
How to create a Simple Footer using Bootstrap 5 ?

                
Bootstrap 5 Footers can be used for displaying Contact links, Social media links, Service links, Company Logos, and other sections. The &lt;footer&gt; tag can be used with built-in classes for making the responsive footer layout. For accomplishing this task, there are 2 approaches, i.e., by using Bootstrap Grid System with CSS, and by using Bootstr

            

            
            

                
                4 min read
            

        
    
        
            

                
How to Create a Multi-Column Footer in Bootstrap ?

                
Bootstrap offers a range of classes that can be employed to design web pages and apply diverse styles. Footers are a crucial element of web design, as they provide users with valuable information and navigation options. With Bootstrap, creating a multi-column footer that is visually appealing and responsive across various devices is easy. Approach:

            

            
            

                
                3 min read
            

        
    
        
            

                
How to Create a Sticky Footer in Bootstrap ?

                
In any webpage footer is the section that occurs at the end of the page. In many web pages, we can see that footers are sticky which means that whether we scroll up or down the page the footer will stay in its place which is at the bottom of the page. How to implement a sticky footer using BootstrapIn Bootstrap, there are predefined classes given a

            

            
            

                
                5 min read
            

        
    
        
            

                
How to Create a Sticky and Split Footer in Bootstrap ?

                
A sticky footer is a layout element used in web design that maintains a web page's footer fixed at the bottom of the viewport, no matter the content's height. This design feature improves the user experience and gives the website an attractive look by ensuring the footer is visible as users scroll through the page. ApproachCreate the layout of the

            

            
            

                
                3 min read
            

        
    
        
            

                
How to align images in card with dynamic title?

                
Several times it is needed to display information on a website in the form of cards. Cards are basically a component containing a heading, an image, and an optional description. The way in which we align the images, headings, and text in our cards defines the aesthetics, that is, the look and feel of the card. However, there might be problems in de

            

            
            

                
                3 min read
            

        
    
        
            

                
Semantic-UI Card Buttons Content

                
Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. Semantic UI card has a feature to display the web content in the form of a card just like how the content is displayed in the playing c

            

            
            

                
                2 min read
            

        
                                    

                                                                    
                                                            

                        

                        

                                                            

                                    
Article Tags : 

                                    
                                                                    

                                                                                

                                                

                                

                                    
                                                                    

                            


                        

                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                




	
	
	

	
	

	
	    

	
	

	
	



                
        

    

    

        

            

            

        

    















	

    
  

  
  






    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox