Bootstrap 4 flex-row Sizing

Question

Problem:

I'm building a complex (if you can call it that) ListGroup in bootstrap v4.

The .flex-row div has some unexplained space at the bottom, and I need to get rid of it.

What I've Tried:

Setting widths explicitly with (w-XX) and setting align-items style seems to work, but I feel like I'm missing something and I want it done right.

PS: Even if the above is the right way to fix it, I still want to understand that pesky whitespace and why it is there.

PSS: I'm new at the flexbox styling so don't leave out "obvious" things.

Screenshots:

alt text

Snippet:







  
    
      Title Of Person
      
        
          
            
              
                Job Title:
              
              
                Job Title
              
            
            
          
          
            
              
                Company Name:
              
              
                Comp Name
              
            
            
          
          
            
              
                Language Preference:
              
              
                ENG
              
            
            
          
          
            
              
                Birthday:
              
              
                11/11/1990
              
            
            
          
        
        
          
            
              
                Mobile:
              
              
                0123456789
              
            
            
          
          
            
              
                E-Mail:
              
              
                email@email.com
              
            
            
          
          
            
              
                Telephone:
              
              
                0123456789
              
            
            
          
          
            
              
                Fax:
              
              
                0123456789
              
            
            
          
        
      
      
        
        
      
    

    }

Vadim Ovchinnikov · Accepted Answer

This unwanted space comes from hr's margin-top. Set hr's margin-top to 0 and this space will be removed.

hr {
  margin-top: 0 !important;
}







  
    
      Title Of Person
      
        
          
            
              
                Job Title:
              
              
                Job Title
              
            
            
          
          
            
              
                Company Name:
              
              
                Comp Name
              
            
            
          
          
            
              
                Language Preference:
              
              
                ENG
              
            
            
          
          
            
              
                Birthday:
              
              
                11/11/1990
              
            
            
          
        
        
          
            
              
                Mobile:
              
              
                0123456789
              
            
            
          
          
            
              
                E-Mail:
              
              
                email@email.com
              
            
            
          
          
            
              
                Telephone:
              
              
                0123456789
              
            
            
          
          
            
              
                Fax:
              
              
                0123456789
              
            
            
          
        
      
      
        
        
      
    

    }

Bootstrap 4 flex-row Sizing

Problem:

What I've Tried:

Screenshots:

Snippet:

Answers (2)

Related Questions