Currently, I am developing web pages with "rtl" directionality. Within my shop.html template, I am utilizing a bootstrap component known as "breadcrumbs". As a result, I need the breadcrumbs to display from right to left.
<div class="breadcrumb">
<div class="container" align="right">
<a class="breadcrumb-item" href="{% url 'bookrepo:home' %}">صفحہ اول</a>
<span class="breadcrumb-item active"> خریداری </span>
</div>
</div>
To apply custom styling, I have created my own shop.css file. However, despite setting align:"right" in the template, the parent bootstrap file is overriding this and placing the breadcrumbs on the left side:
.breadcrumb-item {
float: left;
}
This results in the breadcrumbs appearing like this: https://i.sstatic.net/KmoDL.png
I attempted to counteract this by adding the following to my shop.css file:
.breadcrumb-item {
float: right;
}
Unfortunately, this did not yield the desired outcome and disrupted the breadcrumb alignment. Here is how it currently looks: https://i.sstatic.net/oDiNB.png
Instead of having the breadcrumbs float in either direction, I would prefer they remain centered. When both adjustments are removed, the display appears as intended:
https://i.sstatic.net/7ub67.png
Naturally, I can remove float:right from my shop.css file. Can you suggest a method to cancel out the bootstrap css rule of float:left?