Bootstrap RTL Example

A CSS extension to the latest Bootstrap 4 framework to create RTL-aware websites & web applications where the languages are written from right to left (Farsi, Arabic, Hebrew, etc).

Quick start

پروژه Bootstrap RTL نمونه ساده‌ای برای RTL کردن فریمورک Bootstrap CSS هست.

برای استفاده از Bootstrap RTL نیاز است فایلهای CSS و JS فریمورک Bootstrap را در صفحه وب فراخوانی کنید. نمونه:

<!doctype html>
<html dir="rtl" lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Bootstrap RTL</title>
    <!-- CSS only -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    <!-- JS, Popper.js, and jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="css/bootstrap-rtl.min.css">
</head>
<body>
Your Content.
</body>
</html>
                

Alerts

Button Group

Cards

Placeholder تصویر نمونه
عنوان کارت

برخی از متن های نمونه سریع برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.

ادامه
ویژگی‌ها
  • راست‌چین
  • با حجم کم
  • ساده
ویژگی‌ها
عنوان کارت

توضیحات اضافه کارت

بیا اینجا
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Collapse

توضیحات آیتم اول

توضیحات آیتم اول

توضیحات آیتم اول

Forms

@
خیلی خوبه
خیلی خوبه
@
نام شهر معتبر نیست
لطفا استانی معتبر انتخاب کنید
کد پستی معتبری وارد کنید
قبل از ثبت فرم نیاز هست با پذیرش قوانین موافقت کنید
Please enter a message in the textarea.
Example invalid feedback text
More example invalid feedback text
Example invalid custom select feedback
Example invalid custom file feedback

Input Group

@
@example.com
https://example.com/users/
$
.00
With textarea
آپلود
آپلود

Jumbotron

سلام، جهان!

این یک واحد قهرمان ساده است ، یک جزء ساده به سبک jumbotron برای جلب توجه بیشتر به مطالب یا اطلاعات برجسته.


از کلاسهای ابزار برای تایپوگرافی و فاصله برای محتوای فضا در داخل ظرف بزرگتر استفاده می کند.

بیشتر بیاموزید

List Group

  • یک
  • دو
  • سه
  • Cras justo odio 14
  • Dapibus ac facilisis in 2
  • Morbi leo risus 1

Media Object

  • Placeholder 64x64
    List-based media object
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  • Placeholder 64x64
    List-based media object
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  • Placeholder 64x64
    List-based media object
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Popovers

Progress

25%

Toast

Tooltip