mahdimajidzadeh / bootstrap-v4-rtl

RTL edition of bootstrap v4 for rtl languages like Farsi and Arabic

Hi

My name is Mahdi Majidzadeh and I'm not developer

bootstrap-v4-rtl's Issues

Custom Check box RTL FIX

Current:
.rtl .custom-control-label::after, .rtl .custom-control-label::before {
right: 0;
left: inherit;
}

should be:
.rtl .custom-control-label::after, .rtl .custom-control-label::before {
right: -1.5rem;
left: inherit;
}

Non rtl original:
.custom-control-label::before {
position: absolute;
top: .25rem;
left: -1.5rem;
display: block;
width: 1rem;
height: 1rem;
pointer-events: none;
content: "";
user-select: none;
background-color: #dee2e6;
}

form-check class not RTL

The definition of form-check contains padding-left but have no RTL fix

.form-check {
    position: relative;
    display: block;
    padding-left: 1.25rem;
}

The RTL version should include padding-right instead.

now bootstrap is out of beta

I'm not sure if this effect anything but you can at least change version from 4.0.0-beta-2 to 4.0.0 in packages.json file

Question : How Add Bootstrap RTL

Hi
Thanks for great work.
How How Add Bootstrap RTL properly ?
First add original Bootstrap CSS and second RTL CSS ? Or just RTL CSS ? How about JS ?
And i have to add rtl to every tag in document for RTL ?

float-right and float-left rtl version

Hello,

What about the RTL version of float-{sm,md,lg,xl}-{left,right,none} classes I can't find any thing related to those classes since they are replacing the old widely used pull-left and pull-right classes

Thanks

Padding issue on list-unstyled calss

I found padding issue on "list-unstyled" class when I was working on my project. And here was my fixing:

.list-unstyled {
padding-right: 0;
}

Evaluate how to properly keep the codebase aligned with Bootstrap 4

It seems that currently the code is not aligned with the currnet bootstrap 4.

It would be great to identify a way of keeping the code aligned with the latest version of Bootstrap 4 (currently 4.2.1).

Border is not work

i think you use alpha , border is feature of beta version. tnx

Not working with Bootstrap v4.0.0-beta.2

Having Bootstrap v4.0.0-beta.2 and copy bootstrap-rtl.css in bootstrap.css folder. And here are the references:

<link href="~/lib/font-awesome/css/font-awesome.css" rel="stylesheet" />
<link href="~/lib/bootstrap/css/bootstrap.css" rel="stylesheet" />
<link href="~/lib/bootstrap/css/bootstrap-rtl.css" rel="stylesheet" />

But nothing happened and no changes in directions. Should I make any other changes?

breadcrumb

.breadcrumb-item+.breadcrumb-item {
padding-left: .5rem; --> padding-right: .5rem;
}

.breadcrumb-item+.breadcrumb-item::before {
display: inline-block;
padding-right: .5rem; --> padding-left: .5rem;
color: #6c757d;
content: "/";
}

I tried to use this library in angular 5 but it doesn't work

I installed the library with npm , then added "../node_modules/bootstrap-v4-rtl/dist/css/bootstrap.min.css" in the angular cli styles (as I did with the bootstrap as normal) , but bootstrap styling is applied except the rtl part , it is still exactly similar to the normal bootstrap 4 , are there any extra steps that I missed to make it work?

(the RTL is applied to the main container div , if I remove Bootstrap from the angular cli styles it will be flipped as expected for RTL , my main problem is that in RTL in Bootstrap (the grid columns order is the same and not flipped))

Thanks

modal close button margin right

modal button appear on the right side after the header text instead of left
https://codepen.io/AshrafBasry/pen/YEQYmM

Offset margin

Hi!

I have a problem with class .offset-x-x since the last version:
With the version 4.4.1-1, .offset was doing a margin-left, but since the version 4.4.1-2 the margin is applied to the right...

According to #61, I assume this change was made to improve the rtl support, but in ltr this change looks more like a BC break.

So, was it planned like that or is it a bug?

Thank you!

Failed to compile

Unrecognised input. Possibly missing opening '{'
in /Files/Projects/myproject/node_modules/bootstrap-v4-rtl/dist/css/bootstrap-rtl.min.css (line 6, column 757)
ℹ ｢wdm｣: Failed to compile.

Problem with dropdown-menu

hi, dear friend.
thanks for this helpful expansion.
i know maybe this issue has been duplicate (#26 (comment)) but i develop my project with your library (latest version on npm), i have a problem with Dropdown in RTL version. you see this problem in pictures. i don't know WHY?
can you help me?

Please Add node package

Hello,
Thanks for great job.
But I think it would be good idea that we have node package for example install with npm or bower.

Release new fixes to npm

Hey, i want to thank you for efforts in this package :D
I noticed that since the last release (9 months ago), you committed 3 fixes, but i can't get them via NPM because you haven't made a release of them...
Can you please make a new release and push it to npm ? I would be grateful :)

margin between modal buttons

In the normal version of bootstrap there is a margin between modal buttons

from _modal.sccs

// Footer (for actions)
.modal-footer {
  display: flex;
  align-items: center; // vertically center
  justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
  padding: $modal-inner-padding;
  border-top: $modal-footer-border-width solid $modal-footer-border-color;
  @include border-bottom-radius($modal-content-border-radius);

  // Easily place margin between footer elements
  > :not(:first-child) { margin-left: .25rem; }
  > :not(:last-child) { margin-right: .25rem; }
}

and there is this in _rtl.sccs from current version of bootstrap-rtl

.modal-footer > :not(:first-child) {
    margin-right: .25rem;
  }

I think it should be changed to:

  .modal-footer > :not(:first-child) {
    margin-right: .25rem;
  }

  .modal-footer > :not(:last-child) {
    margin-left: .25rem;
  }

and then somehow remove the styles from original bootstrap

Proper RTL dropdown-menu

Shouldn't dropdown-menu:

.dropdown-menu {
  right: 0;
  text-align: right;
}

Actually be:

.dropdown-menu {
  left: auto !important;
  right: 0;
  text-align: right;
}

After this change I can get bootstrap-select to properly show in RTL.

Issue with media object

Hello.
I have some issue with media object rtl.
https://getbootstrap.com/docs/4.0/layout/media-object/

fixes a lot and breaks a few

this fixes my buttons, checkboxes and tables. but also breaks card headers and list items.

v4.5

V4.5 is out, can you update the package?

Checkbox switch slides to wrong side

Autoprefixer warning

Hi, I'm getting the following warning, could you please fix them? Thank you.

./node_modules/bootstrap-v4-rtl/dist/css/bootstrap-rtl.min.css - Warning:
(6:56937) autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.

同学，您这个项目引入了832个开源组件，存在8个漏洞，辛苦升级一下

检测到 MahdiMajidzadeh/bootstrap-v4-rtl 一共引入了832个开源组件，存在8个漏洞

漏洞标题：Axios 安全漏洞
缺陷组件：[email protected]
漏洞编号：CVE-2021-3749
漏洞描述：Axios是一款基于Promise（异步编程的一种解决方案）的HTTP客户端。
Axios 存在安全漏洞，该漏洞源于在 axios 包中发现了一个 ReDoS（正则表达式拒绝服务）缺陷。攻击者可利用该漏洞为修剪功能提供精心设计的输入导致应用程序消耗过多的 CPU。
影响范围：(∞, 0.21.3)
最小修复版本：0.21.3
缺陷组件引入路径：[email protected]>[email protected]>[email protected]

另外还有8个漏洞，详细报告：https://mofeisec.com/jr?p=afcd60

Carousel doesn't cycle from right to left

Hey!
I can't figure out the RTL solution for carousel. This bootstrap 3 css fix doesn't work properly on v4 (makes white delays between a slides)

jQuery missed from peerDependencies

Original Bootstrap repo requires jQuery

  "dependencies": {},
  "peerDependencies": {
    "jquery": "1.9.1 - 3",
    "popper.js": "^1.14.3"
  },
  "devDependencies": {

while current repo does not

bootstrap-v4-rtl/package.json

Lines 81 to 85 in 5baf102

	"dependencies": {},
	"peerDependencies": {
	"popper.js": "^1.14.7"
	},
	"devDependencies": {

How is this possible? Is package.json simply outdated from original repo?

input group border radius

border radius on input group wrong
https://jsfiddle.net/xorgwvoc/3/

Margins and Paddings Not Work Correctly

When i use ml / mr or pl / pr in multi languages sites (persian/english) , elements also contains margin or padding for both directions like mx or px classes ,You must also set padding=0 or margin=0 for opposite direction. for example:

bootstrap-rtl.css:
pl {
padding-right: xxxxx !important;
padding-left: 0 !important;
}

bootstrap-original.css
pl {
padding-left: xxxxxx;
}

mx-auto in rtl

This class .mx-auto have conflicting attributes:

  .mr#{$infix}-auto,
  .mx#{$infix}-auto {
    margin-right: 0 !important;
    margin-left: auto !important;
  }
  .ml#{$infix}-auto,
  .mx#{$infix}-auto {
    margin-right: auto !important;
    margin-left: 0 !important;
  }

so it get 0 for margin-right in first case and auto in next case and the same for margin-left

Text align on Media Query like text-md-right/left

Inside file _rtl.scss add this tow lines with comment

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);


    .text#{$infix}-right   { text-align: left !important; }  //Inside file _rtl.scss add this line
    .text#{$infix}-left  { text-align: right !important; } //Inside file _rtl.scss add this line


  }
}

Please add npm version

Hello,
Please add npm version.

can't use scss

hi
i wanna use npm to use bootstrap rtl but give me this error:

/////////////////////////////////////////////////////////////////////////

`ERROR in ./resources/sass/bootstrap-rtl.scss
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):

undefined
^
Can't find stylesheet to import.
╷
2 │ @import '/node_modules/bootstrap-v4-rtl/scss/bootstrap-rtl';
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
stdin 2:9 root stylesheet
in C:\Users\reza\Desktop\laravel\resources\sass\bootstrap-rtl.scss (line 2, column 9)
at runLoaders (C:\Users\reza\Desktop\laravel\node_modules\webpack\lib\NormalModule.js:313:20)
at C:\Users\reza\Desktop\laravel\node_modules\loader-runner\lib\LoaderRunner.js:367:11
at C:\Users\reza\Desktop\laravel\node_modules\loader-runner\lib\LoaderRunner.js:233:18
at context.callback (C:\Users\reza\Desktop\laravel\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
at render (C:\Users\reza\Desktop\laravel\node_modules\sass-loader\lib\loader.js:52:13)
at Function.call$2 (C:\Users\reza\Desktop\laravel\node_modules\sass\sass.dart.js:53443:16)
at _render_closure1.call$2 (C:\Users\reza\Desktop\laravel\node_modules\sass\sass.dart.js:33267:12)
at _RootZone.runBinary$3$3 (C:\Users\reza\Desktop\laravel\node_modules\sass\sass.dart.js:19664:18)
at _RootZone.runBinary$3 (C:\Users\reza\Desktop\laravel\node_modules\sass\sass.dart.js:19668:19)
at _FutureListener.handleError$1 (C:\Users\reza\Desktop\laravel\node_modules\sass\sass.dart.js:18136:19)
at _Future__propagateToListeners_handleError.call$0 (C:\Users\reza\Desktop\laravel\node_modules\sass\sass.dart.js:18421:40)
at Object._Future__propagateToListeners (C:\Users\reza\Desktop\laravel\node_modules\sass\sass.dart.js:3470:88)
at _Future._completeError$2 (C:\Users\reza\Desktop\laravel\node_modules\sass\sass.dart.js:18257:9)
at _SyncCompleter._completeError$2 (C:\Users\reza\Desktop\laravel\node_modules\sass\sass.dart.js:18123:19)
at _SyncCompleter.completeError$2 (C:\Users\reza\Desktop\laravel\node_modules\sass\sass.dart.js:18092:12)
at _AsyncAwaitCompleter.completeError$2 (C:\Users\reza\Desktop\laravel\node_modules\sass\sass.dart.js:17629:25)
at Object._asyncRethrow (C:\Users\reza\Desktop\laravel\node_modules\sass\sass.dart.js:3226:17)
at C:\Users\reza\Desktop\laravel\node_modules\sass\sass.dart.js:10407:20
at _wrapJsFunctionForAsync_closure.$protected (C:\Users\reza\Desktop\laravel\node_modules\sass\sass.dart.js:3249:15)
at _wrapJsFunctionForAsync_closure.call$2 (C:\Users\reza\Desktop\laravel\node_modules\sass\sass.dart.js:17664:12)
at _awaitOnObject_closure0.call$2 (C:\Users\reza\Desktop\laravel\node_modules\sass\sass.dart.js:17656:25)
at _RootZone.runBinary$3$3 (C:\Users\reza\Desktop\laravel\node_modules\sass\sass.dart.js:19664:18)
at _RootZone.runBinary$3 (C:\Users\reza\Desktop\laravel\node_modules\sass\sass.dart.js:19668:19)
at _FutureListener.handleError$1 (C:\Users\reza\Desktop\laravel\node_modules\sass\sass.dart.js:18136:19)
at _Future__propagateToListeners_handleError.call$0 (C:\Users\reza\Desktop\laravel\node_modules\sass\sass.dart.js:18421:40)
at Object._Future__propagateToListeners (C:\Users\reza\Desktop\laravel\node_modules\sass\sass.dart.js:3470:88)
at _Future._completeError$2 (C:\Users\reza\Desktop\laravel\node_modules\sass\sass.dart.js:18257:9)
at _SyncCompleter._completeError$2 (C:\Users\reza\Desktop\laravel\node_modules\sass\sass.dart.js:18123:19)
at _SyncCompleter.completeError$2 (C:\Users\reza\Desktop\laravel\node_modules\sass\sass.dart.js:18092:12)
at Object.eval (eval at Closure_forwardCallTo (C:\Users\reza\Desktop\laravel\node_modules\sass\sass.dart.js:1515:14), :3:41)
at _RootZone.runBinary$3$3 (C:\Users\reza\Desktop\laravel\node_modules\sass\sass.dart.js:19664:18)
at _RootZone.runBinary$3 (C:\Users\reza\Desktop\laravel\node_modules\sass\sass.dart.js:19668:19)
at _FutureListener.handleError$1 (C:\Users\reza\Desktop\laravel\node_modules\sass\sass.dart.js:18136:19)
at _Future__propagateToListeners_handleError.call$0 (C:\Users\reza\Desktop\laravel\node_modules\sass\sass.dart.js:18421:40)
at Object._Future__propagateToListeners (C:\Users\reza\Desktop\laravel\node_modules\sass\sass.dart.js:3470:88)
at _Future._completeError$2 (C:\Users\reza\Desktop\laravel\node_modules\sass\sass.dart.js:18257:9)
@ ./resources/sass/bootstrap-rtl.scss

ERROR in ./resources/sass/bootstrap-rtl.scss (./node_modules/css-loader??ref--7-2!./node_modules/postcss-loader/src??postcss2!./node_modules/resolve-url-loader??ref--7-4!./node_modules/sass-loader/lib/loader.js??ref--7-5!./resources/sass/bootstrap-rtl.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

undefined
^
Can't find stylesheet to import.
╷
2 │ @import '/node_modules/bootstrap-v4-rtl/scss/bootstrap-rtl';
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\reza\AppData\Roaming\npm-cache_logs\2019-08-05T07_18_02_681Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ dev: npm run development
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\reza\AppData\Roaming\npm-cache_logs\2019-08-05T07_18_02_756Z-debug.log`

/////////////////////////////////////////////////////////////////

i can use bootstrap v4 with npm and it is compiled with scss but with rtl module no.

rtl not working in angular carousel

Hi,
I add this version of bootstrap rtl in angular project, it work fine in normal condition but if i want to use ng-bootstrap carousel the pictures move to the right side of page and don't show, how can i fix it?
for test i remove rtl bootsatrp from angular. json then carousel work fine

Navbar toggle function extra padding at right side of shown menu

Hi Mahdi
I am trying to start a new project using bs4 and I need rtl support for my project.
While testing what you've done there was some strange behavior.
e.g: https://codepen.io/h-o-j-a-t/pen/NwGVpb
after resizing the page menu showed at right hand has some extra padding.

Builds show 4.5.2

Hi,

The builds, especially the CSS ones, show in the header v4.5.2. I see that your comments say 4.6.0-2. Maybe just an oversight?

how can I use it for a cakephp project ?

how can I use it for a cakephp project ?
which css, js and fonts files can I use ?

thanks

grid offset sets margin for both sides

Consider this HTML:

<div class="row rtl">
   <div class="col-2 offset-md-3" id="inner-div">some sample text here</div>
</div>

Then the #inner-div would have two margins, one from right which is correct and one from left which in inherited from the ltr bootstrap. so the latter should be removed using for example:

.rtl .offset-{}-x {
   margin-left: 0
}

Now I'm using ml-0 to fix it.
Thanks for your awesome project

Please Publish Nuget

bootstrap-v4-rtl/scss/_navbar.scss:46

.navbar-brand has a margin-right (should be margin-left). Is this package, made manually or by using automated tools such as rtlcss ? why such problems exists inside the package?

Text align left/right?

https://github.com/MahdiMajidzadeh/bootstrap-v4-rtl/blob/v4.0.0-beta/dist/css/bootstrap-rtl.css#L126

body {
  ...
  text-align: left;
  ...
}

Should this be text-align: right;?

Padding issue

When i use pr-0 or pl-0 , bootstrap set both right and left padding 0
.pr-0,[dir=rtl] .pr-0{padding-right:0!important;padding-left:0!important}.rtl .pl-0,[dir=rtl] .pl-0{padding-left:0!important;padding-right:0!important}.rtl
Why when padding right is 0 , padding left 0 ? just right must be 0

this is happening for other p classes
.pl-5,[dir=rtl] .pl-5{padding-left:0!important;padding-right:3rem!important}.rtl
its pl-5 but padding left is 0 and padding right is 3rem

Padding right on invalid input

Hello,
While showing invalid message and making the input red (by .invalid class) the padding-right is not replaced with padding-left which causes content to shift.

Quick fix:

.was-validated .form-control:invalid, .form-control.is-invalid {
  padding-right: 0.75rem;
  padding-left: calc(1.5em + 0.75rem);
}

in sass not work !

in sass not work !

منبع این مخزن معرفی میکنید

سلام منبع این مخزن معرفی میکنید که در صورت به روز شدن هم ازش استفاده کنیم من خودم 2 تا راه حل دارم نمیدونم این یکی از اونهاست یا نه . چون هر دوتاشون یجایی مشکل دارن

Integration with Vue and vue-bootstrap

Hi Mahdi,
In a vue project, it doesn't seem adding 'rtl' class is making any difference, do you have any idea how to use it in a vue project?

Bootstrap 4.4.0 Released

Bootstrap 4.4.0 just got released - implementation of this is needed.

Bootstrap component not handled in RTL - input-group-prepend, input-group-append

The following properties are not convert to RTL:

`.input-group-prepend {
margin-right: -1px;
}

.input-group-append {
margin-left: -1px;
}`