Feature: direction RTL support

mdo commented 6 years ago

We definitely want to do this soon. The approach should be to generate a separate CSS file, built from bootstrap-rtl.scss with an ability to generate our other builds using the same approach if folks want it (no need to provide RTL builds for each one).

We'll need to hear from @Johann-S and @bardiharborow though to see if we need to adjust our JS plugins to account for the direction change. I dunno if Popper supports it off the top of my head.

@twbs/team I'd like this for v4.1 or v4.1—thoughts?

XhmikosR commented 6 years ago

Sounds good to me. Feel free to ping me if there are new tools we need to add.

PascalPixel commented 6 years ago

~Popper does not support it currently cc @FezVrasta~ Popper works in rtl, bootstrap's css just needs some tweaks so it anchors correctly (translate-3d messes up atm)

FezVrasta commented 6 years ago

@Superpencil what do you mean? What should Popper.js to to support RTL?

kishorsathe commented 6 years ago

Any tentative date , when it will be release ?

PerseusTheGreat commented 6 years ago

Hi, @mdo, please consider these:

prateem commented 6 years ago

Hi, @mdo Given that v4.1 is coming out soon and the ship list for it (#25375) doesn't include this issue, is there any update that can be provided about rtl support from the bootstrap team? I'd ideally like to not have to rely on third-party implementations. Thanks!

mdo commented 6 years ago

No update to give other than this won't be in v4.1 :).

DJafari commented 6 years ago

@mdo rtl support is coming for v4.2 ? :-(

alalm3i commented 6 years ago

@mdo we need rtl support, is it coming in 4.2?

mohamedragaey commented 6 years ago

Hello @mdo I have an approach for rtl-ltr support that i used on Bootstrap3 and now on bootstrap4 here in this repo you will find that i took only the scss core files for bootstrap 4 and updated for direction and added my direction.scss file and in the build you will find 2 files bootstrap.css & bootstrap-rtl.css https://mohamedragaey.github.io/bootstrap-scss-multi-dir/ and here is my build tool included in bootstrap-rtl as npm package https://mohamedragaey.github.io/bootstrap4-playground/ if you find it interesting please let me know then i will make a pull request and then go for it .

MERamadan commented 6 years ago

4.1.2 is out and RTL is not included too. Can you please give this a priority in the next release, either 4.1.3 or 4.2? This is important for all RTL languages to get in bootstrap 4.

SHxKM commented 6 years ago

cast my vote, too.

mkamensky commented 6 years ago

Can someone summarise the RTL issues? I use bootstrap on a bidi site without any problems (flex utils solved most of the problems for me)

PerseusTheGreat commented 6 years ago

@mkamensky In forked version that I am working on it, there are some issues on SCSS modules & mixins, I tagged those by //rtl inside *-rtl.scss files.

Changed SCSS module: alert, button group, card, carousel, close, custom form, dropdown, input group, list group, modal, nav, navbar, pagination, popover, reboot, type, variables

Changed SCSS mixins: caret, forms, grid, list, pagination, reset text

mkamensky commented 6 years ago

Thanks, I'll have a look

mollaeian commented 6 years ago

Sounds good to me

saeed-m commented 6 years ago

looking forward for rtl version

parhamDA commented 6 years ago

I am waiting for RTL version 👍 Thanks ...

Kamalifar commented 6 years ago

That's great. Thanks in advanced.

IdanCo commented 6 years ago

Just a small tip for those RTL pioneers out there -

when printing a page, the $print-body-min-width variable causes weird print issues unless you set direction: rtl for your html element (or dir="rtl" attribute in your tag). Sounds elementary, but until I started printing content, i was fine with setting just the body tag.

olegsv commented 5 years ago

It would be great to have official RTL for Boostrap 4.

tornadofay commented 5 years ago

waiting for rtl version. thanks

MuhAssar commented 5 years ago

I hope RTL-support will make it for 4.3.0

thanks for your hard work, much appreciated!

mkamensky commented 5 years ago

As I mentioned somewhere before, the following changes resolve almost all problems I had:

Use flexbox wherever possible (already supported by bootstrap)
Replace all physical direction specs by logical ones, e.g., padding-inline-start in place of padding-left, etc. For instance, I have the following for forms (bs 4.2.1):

.custom-control {
  padding-inline-end: inherit;
  padding-inline-start: $custom-control-gutter + $custom-control-indicator-size;
}

.custom-control-inline {
  margin-inline-start: inherit;
  margin-inline-end: $custom-control-spacer-x;
}

.custom-control-label {
  &::before {
    inset-inline-start: -($custom-control-gutter + $custom-control-indicator-size);
    inset-inline-end: inherit;
  }

  &::after {
    inset-inline-start: -($custom-control-gutter + $custom-control-indicator-size);
    inset-inline-end: inherit;
  }
}
.custom-switch {
  padding-inline-end: inherit;
  padding-inline-start: $custom-switch-width + $custom-control-gutter;

  .custom-control-label {
    &::before {
      inset-inline-start: -($custom-switch-width + $custom-control-gutter);
      inset-inline-end: inherit;
    }

    &::after {
      inset-inline-start: calc(#{-($custom-switch-width + $custom-control-gutter)} + #{$custom-control-indicator-border-width * 2});
      inset-inline-end: inherit;
    }
  }
}

.custom-select {
  padding-inline-start: $custom-select-padding-x + $custom-select-indicator-padding;
  padding-inline-end: $custom-select-padding-x;

  &[multiple],
  &[size]:not([size="1"]) {
    padding-inline-start: inherit;
    padding-inline-end: $custom-select-padding-x;
  }
}

.custom-select-sm {
  padding-inline-start: $custom-select-padding-x-sm;
  padding-inline-end: inherit;
}

.custom-select-lg {
  padding-inline-start: $custom-select-padding-x-lg;
  padding-inline-end: inherit;
}

.breadcrumb-item {
  + .breadcrumb-item {
    padding-left: inherit;
    padding-inline-start: $breadcrumb-item-padding;

    &::before {
      padding-right: inherit;
      padding-inline-end: $breadcrumb-item-padding;
    }
  }
}

This solves almost all my issues, and it should be very easy to implement, basically search and replace.

MERamadan commented 5 years ago

It is 4.3 now and we still don't see RTL support. We are understanding that the team is busy now to release version 5. Can you please include RTL support in version 5?

shahabbbbb commented 5 years ago

hi , please add support rtl . thanks

mRizvandi commented 5 years ago

We Announce the AryaBootstrap:

AryaBootstrap is a bootstrap with dual layout align support and, used for LTR and RTL web design.

We always publish lastest version at: https://github.com/mRizvandi/AryaBootstrap and other older version also is exist for old projects checkout the reference website at: http://abs.aryavandidad.com

pourmand1376 commented 5 years ago

Waiting eagerly to see bootstrap-rtl support.

ahmdqader commented 5 years ago

Guys we waiting the rtl version

PerseusTheGreat commented 5 years ago

@kishisland , @saeed-m , @parhamDA , @olegsv , @tornadofay , @abuassar , @MERamadan , @shahabbbbb , @pourmand1376 , @ahmdqader

Use >>>this<<< for now...

tmorehouse commented 5 years ago

Another option that might work is to run Bootstrap's CSS through postcss-rtl. I haven't tried it myself, but it might be an option. Note that it will generate a much larger final CSS file size.