Prerequisites
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 edge
end → 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 / end naming 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.
Prerequisites
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-endThese utilities apply logical text alignment to the
::placeholderpseudo-element:start→ aligns placeholder text to the inline start edgeend→ aligns placeholder text to the inline end edgeThe proposed behavior mirrors existing text utilities such as
text-startandtext-end, but targets placeholder text specifically.Example usage:
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:
While CSS fully supports this use case via the
::placeholderpseudo-element, Bootstrap currently provides no utility-level solution to control placeholder alignment independently.As a result, developers must fall back to custom CSS, which:
This proposal aims to fill that gap by introducing a minimal, logical, and consistent utility API that:
start/endnaming conventionsThe proposed utilities are intentionally scoped, opt-in, and follow the same design principles as existing text and spacing utilities in Bootstrap.