How to create a Bootstrap grid inside a element that sizes based on content?

Question

I have a requiremnt to put a grid inside a modal and modal need to sizes based on the content.

Following jsfiddle shows the basic requirement




  
    
      1 of 2
    
    
      2 of 2
    
  
  
    
      short
    
    
      
        extra extra long content
      
    
    
      long content

https://jsfiddle.net/Nash171/5c1t7dkv/17/

As you see here, some contents of a column overflow to next column.

Columns width need to be size based on it's content and container width need to adjust according to it.

In real case, content will be dynamic. Any column can contain different size child elements as content

All columns need to get equal width as well

Is there any possible solution for this?

user_12991398 · Answer

For "extra extra long content" use class="col-sm-6" and for long content use class="col-sm-4" and for short use class="col-sm-2" so that the columns width size adjust accordingly. If you using custom classes try to give width in "%" instead of px.

user_11451368 · Answer

Adjust the width by giving values in % instead of px and try it...

user_11976769 · Answer

remove this content from your css code.

.field {
    width: 100px;
}
.field.long {
    width: 250px;
}

your code works fine as you want.

the following snippet shows the result what you want.

.pro-modal-outer {
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pro-modal {
  background-color: #68acff;
  padding: 20px;
  max-width: 100%;
  min-width: 660px;
}
.row {
  background: #f8f9fa;
  margin-top: 20px;
}
.col-4, .col-6 {
  border: solid 1px #6c757d;
}




  Bootstrap Example
  
  
  
  
  
  


  
    
      
        
          1 of 2
          2 of 2
        
        
          
            short
          
          
            extra extra long content
          
          
            long content

I hope this will works fine for you.

Thank You...

How to create a Bootstrap grid inside a element that sizes based on content?

3 Answers