-
-
Notifications
You must be signed in to change notification settings - Fork 79.2k
Description
Prerequisites
- I have searched for duplicate or closed feature requests
- I have read the contributing guidelines
Proposal
Add utility classes for aligning placeholder text independently from input text alignment, following Bootstrap’s logical property conventions.
This proposal introduces two new utility classes:
.placeholder-start.placeholder-end
These utilities apply logical text alignment to the ::placeholder pseudo-element:
start→ aligns placeholder text to the inline start edgeend→ aligns placeholder text to the inline end edge
The proposed behavior mirrors existing text utilities such as text-start and text-end, but targets placeholder text specifically.
Example usage:
<input
type="text"
class="form-control text-start placeholder-end"
placeholder="شماره تلفن"
/>Motivation and context
In real-world form designs—especially in RTL interfaces—it is common to require different alignment rules for placeholder text and user-entered content.
A typical example is numeric or code-based inputs:
- The input value must be left-aligned (for readability and consistency)
- The placeholder text may need to be visually aligned to the opposite edge to match surrounding UI expectations
While CSS fully supports this use case via the ::placeholder pseudo-element, Bootstrap currently provides no utility-level solution to control placeholder alignment independently.
As a result, developers must fall back to custom CSS, which:
- Breaks consistency with Bootstrap’s utility-first approach
- Reduces reusability across projects
- Adds friction when working with mixed LTR/RTL layouts
This proposal aims to fill that gap by introducing a minimal, logical, and consistent utility API that:
- Aligns with Bootstrap’s existing
start/endnaming conventions - Works seamlessly in both LTR and RTL contexts
- Improves real-world form UX without introducing physical (left/right) abstractions
- Avoids custom CSS for a common, valid use case
The proposed utilities are intentionally scoped, opt-in, and follow the same design principles as existing text and spacing utilities in Bootstrap.