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

Question

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?

Ghencean Dalian · Accepted Answer · 2022-04-26 14:23:58Z

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

answered Apr 26, 2022 at 14:23

Ghencean Dalian

212 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

elite0107 · Accepted Answer · 2021-12-13 21:55:40Z

0

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.

edited Dec 13, 2021 at 21:55

answered Dec 13, 2021 at 21:07

elite0107

1041 silver badge8 bronze badges

3 Comments

Jonathan Wood Over a year ago

Yes, this works nicely. Would you mind adding a paragraph about how and why it works?

Jonathan Wood Over a year ago

Anyone reading this, note that the text-right class in the second <div> is no longer needed here. The second <div> will be right-aligned automatically.

elite0107 Over a year ago

thank you for your comment

Francis Moura · Accepted Answer · 2025-05-08 14:51:56Z

0

@ghencean-dalian solution worked well for me.

The input with the 'form-control-plaintext' class took up 100% of the width.

The "col" was enough without any other arguments (e.g. col-12 or col-sm-12).

E.g.

        <div class="row">
        <div class="col-auto col-md-2">
          <label class="col-form-label">
            <span>Label</span>
          </label>
        </div>
        <div class="col col-md-10">
          <input type="text"
                 class="form-control-plaintext"
                 id="id"
                 [value]="Value input" />
        </div>
      </div>

answered May 8 at 14:51

Francis Moura

1

1 Comment

Quentin May 8 at 15:34

Please don't add "thank you" as an answer. Once you have sufficient reputation, you will be able to vote up questions and answers that you found helpful. - From Review

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related