twbs / twbs/bootstrap

Visually-hidden breakpoints

Open
#40,859 3 comments 4 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

css feature has-pr v5
Dominant language
MDX
Stars
175k
Forks
78.6k
Avg merge
7h 19m
Merged PRs (30d)
35

Description

Prerequisites
Proposal

Add breakpoints for visually-hidden class

Motivation and context

We regularly use visually-hidden to hide text in icon-only buttons. On larger devices we sometimes want to show the text since there is enough available space.

We cannot determine a clean way to achieve this effect without adding breakpoint-specific classes or duplicating elements to use display classes (which poses accessibility-UX issues).

Contributor guide

Open the contributing guide

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.

Research direction

Start by locating the visually-hidden utility and the existing breakpoint conventions in the Bootstrap source. Define the responsive behavior requested in the proposal and verify that text hidden in icon-only buttons can become visible on larger devices without duplicating elements.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, scss
Domain
accessibility, frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
63/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.