Col-auto doesn't have width equal to its content when content is a nested BS grid #40614

VMLuca · 2024-07-09T08:19:17Z

VMLuca
Jul 9, 2024

I'm trying to make col-auto to have width equal to its content as described in Auto-sizing

In my code snippet you can see I have a col-auto which has a nested grid for its children. The problem is that col-auto container's width is larger then the content of it's children. I expect it to have width equal to text in Latin.

I am looking forward to any advice or hint!

Reduced test cases

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-auto">
          <div class="row">
            <div class="col-12 border">
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
            </div>
            <div class="col-12 border">
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
            </div>
          </div>
        </div>
        <div class="col border" style="aspect-ratio: 1/1">2 of 2</div>
      </div>
    </div>
  </body>
</html>

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

5.3.3

VMLuca · 2024-07-09T08:56:16Z

VMLuca
Jul 9, 2024
Author

@julien-deramond are you sure this is not a bug?

1 reply

julien-deramond Jul 9, 2024
Maintainer

No, I'm not. The description seemed more like a Q&A discussion (e.g., 'I am looking forward to any advice or hint!'). However, once someone from the community reviews it, we can still create or recreate an issue if it turns out to be a bug :)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bootstrap

Col-auto doesn't have width equal to its content when content is a nested BS grid #40614

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 1 reply

{{title}}

{{title}}

Select a reply

Bootstrap

Col-auto doesn't have width equal to its content when content is a nested BS grid #40614

VMLuca Jul 9, 2024

Reduced test cases

What operating system(s) are you seeing the problem on?

What browser(s) are you seeing the problem on?

What version of Bootstrap are you using?

Replies: 1 comment · 1 reply

VMLuca Jul 9, 2024 Author

julien-deramond Jul 9, 2024 Maintainer

VMLuca
Jul 9, 2024

Replies: 1 comment 1 reply

VMLuca
Jul 9, 2024
Author

julien-deramond Jul 9, 2024
Maintainer