Bootstrap Auto Column Width But All Columns Still Use 100% Of Parent ...

1. 1. Home
   2. Questions
   3. Tags
   4. Users
   5. Companies
   6. Labs
   7. Jobs
   8. Discussions
   9. Collectives

   10. Communities for your favorite technologies. Explore all Collectives

2. Teams

   Ask questions, find answers and collaborate at work with Stack Overflow for Teams.

   Try Teams for free Explore Teams
3. Teams

4. Ask questions, find answers and collaborate at work with Stack Overflow for Teams. Explore Teams

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

Get early access and see previews of new features.

Learn more about Labs Bootstrap auto column width but all columns still use 100% of parent width Ask Question Asked 3 years ago Modified 2 years, 8 months ago Viewed 1k times 0

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?

• html
• css
• twitter-bootstrap
• bootstrap-4

Share Improve this question Follow asked Dec 13, 2021 at 20:52 Jonathan WoodJonathan Wood 67.1k8181 gold badges299299 silver badges523523 bronze badges 0 Add a comment |

2 Answers 2

Sorted by: Reset to default Highest score (default) Trending (recent votes count more) Date modified (newest first) Date created (oldest first) 1

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

Share Improve this answer Follow answered Apr 26, 2022 at 14:23 Ghencean DalianGhencean Dalian 1111 bronze badge Add a comment | 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.

Share Improve this answer Follow edited Dec 13, 2021 at 21:55 answered Dec 13, 2021 at 21:07 elite0107elite0107 10411 silver badge88 bronze badges 3

• 1 Yes, this works nicely. Would you mind adding a paragraph about how and why it works? – Jonathan Wood Commented Dec 13, 2021 at 21:12
• 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. – Jonathan Wood Commented Dec 13, 2021 at 21:55
• thank you for your comment – elite0107 Commented Dec 13, 2021 at 21:56

Add a comment |

Your Answer

Reminder: Answers generated by artificial intelligence tools are not allowed on Stack Overflow. Learn more

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.
• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Draft saved Draft discarded

Sign up or log in

Sign up using Google Sign up using Email and Password Submit

Post as a guest

Name Email

Required, but never shown

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged

• html
• css
• twitter-bootstrap
• bootstrap-4

or ask your own question.

• The Overflow Blog
• How AI apps are like Google Search
• Featured on Meta
• The December 2024 Community Asks Sprint has been moved to March 2025 (and...
• Stack Overflow Jobs is expanding to more countries

Related

1 columns inside columns don´t fill the width 0 Bootstrap columns not the same width 2 Bootstrap columns taking up more width than they should 3 Columns in row in bootstrap are not filling page width 18 How can I get auto-width columns in Bootstrap? 1 Bootstrap columns throws off html width 1 Make Bootstrap columns to take 100% of the row width 2 How to create Bootstrap columns all with same width? 1 Make Bootstrap Column take full page width (or at least 90%) 0 Bootstrap 5 autofit column width

Hot Network Questions

• Would the disappearance of domestic animals in 15th century Europe cause a famine?
• Advanced TAPL Linear Lambda Calculus
• What does the é in Sméagol do to the pronounciation?
• Hardy's ratings of mathematicians
• Bringing in a peanut butter sandwich to discourage lunch thief who has peanut allergy
• Are informal nominee arrangements legal?
• A world with limited collective ability
• Trying to find a middle grade book about a boy finding his way back to his reality/universe after he's taken away from it
• What builds a nest or storage structure in the shoe?
• What does "the ridge was offset at right angles to its length" mean in "several places where the ridge was offset at right angles to its length"?
• tabularray error
• Movie about dirty federal agents
• Cannot solve this naive exponential equation with base coefficient > 1
• Why do we define the standard error to ignore bias (unlike MSE which includes bias)?
• meaning of "last time out"
• How to swim while carrying fins (i.e., when the fins aren't positioned on my feet)?
• Preventing icing in below zero Celcius conditions during taxiing
• MAX3485 TTL to RS-485 Fake Chinese Modules. No output, wrong chip (Counterfeit?)
• How many hours of daylight can a planet in an elliptical orbit receive?
• What to do about potential employers requesting academic documents that would reveal my age?
• Is this 240V compressor plug wired correctly?
• Publication in a journal that has now disappeared entirely. Can I publish the paper elsewhere?
• How to do the opposite of shift in zsh?
• Why are nested reference arrays being used for the signer seeds , what exactly is the logic behind it?

more hot questions Question feed Subscribe to RSS Question feed

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

lang-html