Bootstrap Form Formatting

Question

I have a form to that collects contact and payment information. I have the form mostly completed, but for the additional space on the right side of the form. I would like to have left and right edges of the form have the same amount of spacing.

Here is my bootstrap code

 
        
            
                
                    Contact Info

                    
                        
                            First name
                            
                            
                                Valid first name is required.
                            
                        

                        
                            Last name
                            
                            
                                Valid last name is required.
                            
                        

                        
                            Email
                            
                            
                                Please enter a valid email address for updates.
                            
                        
                        
                            Phone
                            
                            
                                Please enter a valid phone number.
                            
                        
                    

                    
                        
                    

                    Payment Info

                    
                        
                            
                            Credit card
                        
                        
                            
                            Debit card
                        
                        
                            
                            PayPal
                        
                    

                    


                    
                        
                            Full name on card
                            
                            
                                Name on card is required
                            
                        

                        
                            Credit card number
                            
                            
                                Credit card number is required
                            
                        

                        
                            Expiration
                            
                            
                                Expiration date required
                            
                        


                        
                            CCV
                            
                            
                                Security code required
                            
                        

                        
                            Zip
                            
                            
                                Zip code required.

Here is some additional info from my site.css

.form-tenant-register {
    padding: 15px;
    margin:auto;
}

    .form-tenant-register form {
        margin-bottom: 15px;
        background: #f7f7f7;
        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
        padding: 30px;
    }

Any help would be kindly appreciated.

Giuliano Ara&#250;jo · Accepted Answer

From what I understand you want to centralize the form contents inside the form container(the lightgray box).

Since bootstrap rows are flex container, you can easily do this by adding class justify-content-center to the main row div, so it becomes like this:


    
      
        
(... rest of html)

You might notice that adding the class to only this row will do for a mobile view but it won't be totally centralized in desktops - that's because you have other children rows where their contents do not occupy all the 12 bootstrap columns so their own content won't be centralized. You need to add this class to those rows as well, but that might make the title decentralized, so you'll have to adjust that as well.

Bootstrap Form Formatting

Answers (1)

Related Questions