Skip to content

Add utility classes for placeholder text alignment (logical start/end) #41926

@RezaAmd

Description

@RezaAmd

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions