Chris
Chris

Reputation: 515

Make column only as wide as it's content

Is there a way to tell a column in bootstrap to only be as wide as it's content?

I have a list of items. The html looks like this:

<div class="row">
            <div class="col-lg-1 " style="background-color: rebeccapurple">
                <input type="checkbox">
            </div>
            <div class="col-lg-10" style="background-color: #007fff">
                Title
            </div>
            <div class="col-lg-1" style="background-color: #777620">
                "Button Group
            </div>
</div>

I'd like the first and last column to only be as wide as it's content. Result on the website

Upvotes: 3

Views: 2486

Answers (1)

jonju
jonju

Reputation: 2736

set width:auto; in style attribute of each div that you want to autosize

<div class="row">
    <div class="col-lg-1 " style="background-color: rebeccapurple;width:auto;">
        <input type="checkbox">
    </div>
    <div class="col-lg-10" style="background-color: #007fff;">
        Title
    </div>
    <div class="col-lg-1" style="background-color: #777620;  width:auto;">
        "Button Group
    </div>
</div>

Upvotes: 4

Related Questions