Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Merge requests
  • !23703

RTL Support Idea

  • Review changes

  • Download
  • Email patches
  • Plain diff
Closed Administrator requested to merge github/fork/PascalPixel/rtl into v4-dev Aug 27, 2017
  • Overview 0
  • Commits 24
  • Pipelines 0
  • Changes 36

Created by: PascalPixel

Lets help out the 500 million poor souls whose languages flow from right to left?

This doesn't change any of the classnames (left/right), but does flip around the attributes for them. So you write .float-left, and it floats to the right. Madness.

Would supplant our dependency on bootstrap-rtl versions and manual solutions.

Edit

  • Need to rewrite any shorthand css notation with differing sizes for left and right (margin: 0rem 2rem 0rem 5rem;)
  • Need to add support into the js, I haven't used any of these except modals, dropdowns, tooltips and popovers.

Edit2 There are multiple approaches for this:

  1. Eliminate all left/right logic in Bootstrap with Flexbox (would be best)
  2. Write and maintain overrides in a separate optional file (every other RTL solution out there, unmaintainable, file bloat)
  3. Add a variable to export an RTL-only version (the solution in this PR)

Since 1. would require a bunch more internal tooling on BS it isn't really viable right now (I think?). 2 is too much work to maintain and has never found its way back into vanilla BS out of all the solutions online. Thus I am advocating solution 3 (this PR) for the time being.

At only 200 line changes, this solution solves the problem for a setup that can take care of compilation for you on the fly (sprockets, webpack) but won't serve basic users who use raw files or CDN.

Assignee
Assign to
Reviewers
Request review from
Time tracking
Source branch: github/fork/PascalPixel/rtl