Nested columns inside tabs Bootstrap4

Question

I have this layout:

Basically, I want to add some nested columns inside those tabs.

What I have tried:

The problem is that the columns inside that specific tabs are overlapping, there is no padding between those.

What am I doing wrong?

Thank you!




 
    
        
            
                Content 1
                Content 2
            
        

        
            
                
                    
                        asdlaklsdlkasdlksadkldsakldsaklsda
                    

                    
                        asdlaklsdlkasdlksadkldsakldsaklsda
                    

                    
                        asdlaklsdlkasdlksadkldsakldsaklsda
                    

                




                ...
            
        




    

    
        Heading
        Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. 
        View details »

user_171456 · Answer

The columns are working as expected. However, the content of the columns (very long words) are not breaking, and therefore overflow the columns. Use:

p {
  overflow-wrap: break-word;
}

https://codeply.com/go/5Bi5s4n5DS

Note: The 2nd tab pane is also inside the 1st tab pane in your markup, so the 2nd tab isn't working

user_391715 · Answer

There is no margin on columns in Bootstrap, so it's best to work with the padding that they do have. You can put your border on the element that is inside of your columns and you'll see the spacing between them, and from there you can add padding to that inner element (the p tags in this case).

Then there is also adding word-wrap: break-word if you want your long lines of text to wrap.

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col-md-4 p {
  border: solid 1px #6c757d;
  padding: 10px;
  word-wrap: break-word;
}



  
    
      
        
          Content 1
          Content 2
        
      

      
        
          
            
              asdlaklsdlkasdlksadkldsakldsaklsda
            

            
              asdlaklsdlkasdlksadkldsakldsaklsda
            

            
              asdlaklsdlkasdlksadkldsakldsaklsda
            
          

          ...
        
      
    

    
      Heading
      Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. 
      View details »

user_3113251 · Answer

In bootstrap4 you dont need to set class as col-md-(number), just col-md

Just replace that:

HTML:


    
        asdlaklsdlkasdlksadkldsakldsaklsda
    

    
        asdlaklsdlkasdlksadkldsakldsaklsda
    

    
        asdlaklsdlkasdlksadkldsakldsaklsda

By

HTML:


    
        
            One of three columns
        
        
            One of three columns
        
        
            One of three columns

Jsfiddle: Here

Nested columns inside tabs Bootstrap4

3 Answers