Bootstrap
Replies: 6 comments 16 replies
-
|
Hi, Did you read this part of the docs: https://getbootstrap.com/docs/5.1/getting-started/rtl/ ? |
Beta Was this translation helpful? Give feedback.
-
|
yes, but there is something i am not understand to find answer to my question |
Beta Was this translation helpful? Give feedback.
-
|
Hi @islamx your html tag must have dir attr with rtl value like this: or you can use RTLcss. |
Beta Was this translation helpful? Give feedback.
-
|
i did this and the whole layout render well but still i have a problem with the alignment like margins and padding and borders in my current project that i have So from where should i set the start & end for each direction? |
Beta Was this translation helpful? Give feedback.
-
|
Hi |
Beta Was this translation helpful? Give feedback.
-
|
other thing that i got I've add custom-variables to override the primary, secondary colors to adjust it based on the brand that i code it and here is what i did in index.html add in head and in html tag i've added and in app.scss i've added custom.scss then in this file my custom variables like
then i called and the file doesn't respect my new variable |
Beta Was this translation helpful? Give feedback.
-
|
In the docs, they said that I must import functions and variables first then modify colors then import the rest of bootstrap or what you need from it. and I have a similar issue, I wanna to complie my custimized sass file to get both ltr and rtl versions. |
Beta Was this translation helpful? Give feedback.
-
|
What I think is missing from the documents is the fact that if you are importing the scss version, then you need to have postcss installed and configured. AND you also need an rtl plugin. I had success with postcss-rtlcss. So just install postcss & postcss-rtlcss:
Then in your project root (or in the app dir if you are using nx) add this config file named And now you just run your project and should have rtl working perfectly! |
Beta Was this translation helpful? Give feedback.
-
|
I am not sure what could be wrong. But check these 2 links. Postcss docs check the webpack section maybe there is something missing - I think you are using webpack. Also there this next + postcss-rtlcss example project which gonna be different from your setup but it might help. I am very curious what is causing this so please update me of your findings. |
Beta Was this translation helpful? Give feedback.
-
|
ok i will and thanks. |
Beta Was this translation helpful? Give feedback.
-
|
do you have any working example for an angular project with bootstrap v5 implemented properly? |
Beta Was this translation helpful? Give feedback.
-
|
@omaraalia93 I have one in nextjs. All my angular projects are still in bootstrap v4 unfortunately. If you wanna email me we can get on a call and maybe I can help you figure it out. here is my email [email protected] |
Beta Was this translation helpful? Give feedback.
-
|
This is how I did it in Angular@16, with SASS and RTLCSS in package.json, before building the application:
So, my build script in package.json looks something like: If you need to switch between LTR and RTL without reloading the page, you can update the DOM to change the link SRC and the dir/lang attributes |
Beta Was this translation helpful? Give feedback.
-
|
As per the Bootstrap docs, you need a tool (
|
Beta Was this translation helpful? Give feedback.
-
|
@islamx, Do you get any updates?. I also facing same issue |
Beta Was this translation helpful? Give feedback.
-
Hello, i am asking about RTL scss in bootstrap 5, seems the documentation misleading and i am feeling lost a bit
i am trying to modify the utitlits to be for ex
LTR .ms-1 >> margin-lefti need to be in RTL
ms-1 >> margin-rightas the start for RTL is right not left, and this for the rest of alignment
text-direction, float, borders
any help?
Beta Was this translation helpful? Give feedback.
All reactions