Is there any way to resize columns width based on the element text length inside the columns or resize Column to fit it's contents?

[ThirupathiGovind]

Briefly ( tweet size ) describe your issue and how you discovered it.

...

Expected behavior

...

Actual behavior

...

Steps to reproduce behavior

• OS:
• Browser:
• code/fiddle/pen url:

[effone]

Auto column width is what you are looking for if I am getting your problem right ...

<div class="row">
    <div class="col-xs">
        Content ...
    </div>
</div>

[ThirupathiGovind]

@effone yes, it works. But it makes all columns equal size. I want to auto resize column width based on the text length.

In my case, I have 7 columns. Each column has text with different size. I want that bigger text column should take larger size than the small text.

[effone]

Well you can define a column to fixed width or max width and the other's width as flexible (thats how sidebars work). Here is a pen for example.

If all the column width are auto and non-fixed generally it will be distributed equally unless content on any one forces to maintain minimum size (you can check this reducing the size of viewport). It sounds weird but it happens. Look at the following image; the menu items are actually auto width columns and if you notice they are not equal in reduced size viewport because of their content (unless any word break or wrap is applied).