Responsive stacks

Open
  • Is something wrong?
#43,263 2 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
Half a day
Newbie friendliness
55/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Active
Tech stack
css, scss
Domain
frontend

Research direction

The bug is in the compiled CSS: the responsive stack selectors are written as .sm\: vstack and .sm\: hstack with a space after the escaped colon, so they match the wrong element. Find the Sass source that generates breakpoint-prefixed stack utilities, the same one that emits sm:mb-11 correctly, and compare how the two are built. Compile the stylesheet and confirm the output contains .sm\:hstack with no space, then check the responsive stacks example in the helpers/stacks docs applies the style.

Written by the indexing model from the issue text.

Description

awaiting-reply bug css docs v6
Prerequisites
Describe the issue

Is the compiled CSS for responsive stacks correct? I know the example in the docs appears to work, but if you inspect the styles in the debug tools, the sm:hstack style never seems to be applied.

Looking at the generated CSS, I see this:

  .vstack {
        --bs-stack-direction: column;
        --bs-stack-align-items: stretch
    }

    .hstack {
        --bs-stack-direction: row;
        --bs-stack-align-items: flex-start
    }

    @container (width>=576px) {
        .sm\: vstack {
            --bs-stack-direction:column;
            --bs-stack-align-items: stretch
        }

        .sm\: hstack {
            --bs-stack-direction:row;
            --bs-stack-align-items: flex-start
        }
    }

Notice the space after the :, which isn't present in other breakpoint-scoped classes (for example, sm:mb-11):

 .sm\:mb-11 {
      margin-block-end:2.5rem
}
Reduced test cases

N/A

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

Windows

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

Microsoft Edge

What version of Bootstrap are you using?

v6.0.0-alpha.1

Dominant language
MDX
Stars
175k
Forks
78.7k
Avg merge
1d 7h
Merged PRs (30d)
103

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from twbs/bootstrap

All issues in twbs/bootstrap

Similar issues

More Web Dev issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.