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

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

Prerequisites

I have searched for duplicate or closed issues
I have validated any HTML to avoid common problems
I have read the contributing guidelines

Describe the issue

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/bootstrap@5.3.3/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

twbs locked and limited conversation to collaborators Jul 9, 2024

julien-deramond converted this issue into discussion #40614 Jul 9, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

This issue was moved to a discussion.

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

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

VMLuca commented Jul 9, 2024

This issue was moved to a discussion.

This issue was moved to a discussion.

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

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

Comments

VMLuca commented Jul 9, 2024

Prerequisites

Describe the issue

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?

This issue was moved to a discussion.