'Bootstrap auto column width but all columns still use 100% of parent width

I have a <div> with two columns. (I use two columns so I can left-align the left column and right-align the right column.)

<div class="section-header">
    <div class="row">
        <div class="col-md-6">
            <img src="~/images/ttexpand.png" class="expand-handle" />
            Dates and ETAs
        </div>
        <div class="col-md-6 text-right">
            <img id="edit-etas" src="/images/ttedit.png" title="Edit ETA Dates">
        </div>
    </div>
</div>

But one column can hold a lot more content than the other, and I'm not sure how much more. So I'd like the columns to resize if needed, giving more width to the column with more content.

To that end, I found the col-md-auto class.

<div class="section-header">
    <div class="row">
        <div class="col-md-auto">
            <img src="~/images/ttexpand.png" class="expand-handle" />
            Dates and ETAs
        </div>
        <div class="col-md-auto text-right">
            <img id="edit-etas" src="/images/ttedit.png" title="Edit ETA Dates">
        </div>
    </div>
</div>

This correctly gives more width the the column with more content. However, the two columns together no longer use up 100% of the width of the parent.

Is there any way to have the two columns together use up all available width but still give more width to columns with more content? Maybe similar to the way I can set the width of a table, but then the column widths are automatic?

htmlcsstwitter-bootstrapbootstrap-4


Solution 1:[1]

Use this instead.

<div class="section-header">
    <div class="d-flex justify-content-between">
        <div>
            <img src="~/images/ttexpand.png" class="expand-handle" />
            Dates and ETAs
        </div>
        <div>
            <img id="edit-etas" src="/images/ttedit.png" title="Edit ETA Dates">
        </div>
    </div>
</div>

It will work for you.

Solution 2:[2]

Or, can use a combo between:
col-auto - who takes just the needed width
col - who takes the rest

Like this:

<div class="container-fluid">
  <div class="row">
    <div class="col border">
      Takes all available width
    </div>
    <div class="col-auto border">
      Takes just the needed width
    </div>
  </div>
</div>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

Hope this helps :D

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Ghencean Dalian

Related Questions