Space between elements using bootstrap

Question

EDIT:

I have updated my demo on JsFiddle please have a look at it.

I'm not sure what is it that causing the space between inputs and you can see its very inconsistency and give space, what is it that is missing?

~~CodePen Demo~~

    
    
        
            Go Back to Previous Page 
            * Indicates required field
            
                
                    
                        
                            
                                
                                        Bootstrap Template
                                    
                            
                            
                                
                                    
                                        
                                            
                                                Category
                                            
                                                
                                            
                                        
                                        
                                            
                                                Tier
                                            
                                                
                                            
                                        
                                    
                                    
                                        
                                            
                                                Name
                                            
                                                
                                            
                                        
                                        
                                            
                                                Code
                                            
                                                
                                            
                                        
                                    
                                    
                                        
                                            
                                                Model
                                            
                                                
                                            
                                        
                                        
                                            
                                                Center
                                            
                                                
                                            
                                        
                                    
                                    
                                        
                                            
                                                Center
                                            
                                                
                                            
                                        
                                        
                                            
                                                Name
                                            
                                                
                                            
                                        
                                    
                                    
                                        
                                            
                                                CI 
                                            
                                                
                                            
                                        
                                        
                                            
                                                Production 
                                            
                                                
                                            
                                        
                                    
                                    
                                        
                                            
                                                Action
                                            
                                                
                                            
                                        
                                        
                                            
                                                Description
                                            
                                                
                                            
                                        
                                    
                                    
                                    
                                    
                                    
                                    
                                        
                                            
                                                Physical 
                                            
                                                
                                            
                                        
                                        
                                            
                                                Read
                                            
                                                
                                            
                                        
                                    
                                    
                                        
                                            
                                                Write
                                            
                                                
                                            
                                        
                                        
                                            
                                                Test

tao · Accepted Answer

You have two .col-md-6 elements of unequal height. The next (third) .col-md-6 will always go on the next row, starting from under the tallest of the previous siblings. If you want to remove that space, you need to make the first .col-md-6 equal in height with the second one, by adding more padding around its inner elements (the .select2s).

UPDATE. One more thing I am noticing: in order to benefit the most from bootstrap's CSS you should stick to its' markup. You are supposed to place .col-XX-Y as direct children of .row or .row-fluid elements. Otherwise you will ask yourself why certain elements seem miss-aligned and it they will be a pain to fix at different responsive levels.

As per comments, I updated your fiddle.

In order to make the two columns equal I made the select2s equal in height as the bootstrap inputs:

.select2-container .select2-selection--single { 
    height: 34px; 
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 34px;
}

.select2-container {
    width: 100% !important;
}

Please take note I also removed some inline styling from your html, it's not only the CSS.

Space between elements using bootstrap

Answers (1)

Related Questions