CODEWITHSUNDEEP
asp.net-mvcbootstrap-4localizationright-to-leftblazor
mz1378
mz1378

Reputation: 2582

How do I make website labels Right to left, It is not working

I built a website using MVC Core and Bootstrap 4, It is right to left and for example its form labels begin from right. I created a Blazor Website and copied bootstrap.min.js and a form from MVC core site, and applied direction="rtl" and dir="rtl" to Blazor Body and other elements, but the Labels texts still begin from left. I also tried flex-direction: column-reverse; and flex-direction: row-reverse; that did not made site right to left. What is the problem here?

<div class="card" style="margin: 0 auto; width: 70%;background-color: lightgray; ">
<div class="card-header">@login</div>
<div class="card-block m-1 p-2">
    <EditForm Model="@Model" OnValidSubmit="@HandleValidSubmit">
        <input type="hidden" name="returnUrl" value="returnUrl" />
        <DataAnnotationsValidator />
        <ValidationSummary />
        <div class="form-group">
            <label for="user">@user</label>
            <InputText class="form-control" id="user" bind-Value="@Model.User" />
        </div>
        <div class="form-group">
            <label for="password">@password</label>
            <InputText Id="password" class="form-control" bind-Value="@Model.Password" />
        </div>
        <div class="form-group">
            <InputCheckbox Id="rememberMe" bind-value="@Model.RememberMe" />&nbsp;@rememberMe
        </div>
        <button class="btn btn-primary" type="submit">@login</button>
        <br /><br />
        <NavLink class="nav-link" style="display:inline;" href="/account/register">
            @register
        </NavLink>
        &nbsp;|&nbsp;
        <NavLink class="nav-link" style="display:inline;" href="/account/requestpasswordreset">
            @forgotPassword
        </NavLink>
    </EditForm>
    <label style="color: @(Model.Success ? "green" : "red")">@Model.Message</label>
    @if (!AsyncSuccess)
    {
        <label style="color: red;">@*Async method or Network Error.*@  @asyncError</label>
    }
    @if (AjaxLoading)
    {
        <img width="80" src="images/ajax-loader.gif" />
    }
</div>
@*<label>@Model.Token</label>*@

With this form and applying rtl to any level above it, The labels texts begin from left.

Upvotes: 0

Views: 742

Answers (1)

Atzmon
Atzmon

Reputation: 1308

Applying RTL directionality at the document or wrapper level won't change the way Bootstrap positions its elements.

Try using Bootstrap-RTL instead of the standard Bootstrap.

Upvotes: 0

Related Questions