🧱 Bootstrap 5 Checkout RTL – Create Arabic-Friendly Responsive Checkout Pages
🧲 Introduction – What Is a Bootstrap RTL Checkout Page?
The Bootstrap 5 Checkout RTL layout is a fully right-to-left (RTL) checkout form designed for Arabic, Hebrew, Persian, or Urdu users. It combines form controls, billing sections, and cart summaries with proper RTL alignment and spacing using Bootstrap’s RTL support.
🎯 In this guide, you’ll learn:
- How to create an RTL checkout layout using Bootstrap 5
- Use
dir="rtl"andbootstrap.rtl.min.cssto flip layout direction - Align form labels, inputs, and buttons for RTL display
- Add responsive column behavior for mobile and desktop screens
✅ Example – RTL Bootstrap Checkout Page
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<title>الدفع</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.rtl.min.css" rel="stylesheet">
</head>
<body class="bg-light">
<div class="container py-5">
<div class="row g-5">
<!-- Form Section -->
<div class="col-md-7 col-lg-8">
<h4 class="mb-3 text-end">معلومات الفواتير</h4>
<form>
<div class="row g-3">
<div class="col-sm-6">
<label for="firstName" class="form-label">الاسم الأول</label>
<input type="text" class="form-control" id="firstName" placeholder="أدخل الاسم" required>
</div>
<div class="col-sm-6">
<label for="lastName" class="form-label">الاسم الأخير</label>
<input type="text" class="form-control" id="lastName" placeholder="أدخل الكنية" required>
</div>
<div class="col-12">
<label for="email" class="form-label">البريد الإلكتروني</label>
<input type="email" class="form-control" id="email" placeholder="you@example.com">
</div>
<div class="col-12">
<label for="address" class="form-label">العنوان</label>
<input type="text" class="form-control" id="address" placeholder="1234 الشارع الرئيسي" required>
</div>
<div class="col-md-5">
<label for="country" class="form-label">الدولة</label>
<select class="form-select" id="country" required>
<option value="">اختر...</option>
<option>المملكة العربية السعودية</option>
</select>
</div>
<div class="col-md-4">
<label for="city" class="form-label">المدينة</label>
<input type="text" class="form-control" id="city" placeholder="" required>
</div>
</div>
<hr class="my-4">
<button class="w-100 btn btn-primary btn-lg" type="submit">إتمام الدفع</button>
</form>
</div>
<!-- Cart Summary -->
<div class="col-md-5 col-lg-4 order-md-first">
<h4 class="d-flex justify-content-between align-items-center mb-3 text-end">
<span class="text-primary">سلة المشتريات</span>
<span class="badge bg-primary rounded-pill">3</span>
</h4>
<ul class="list-group mb-3 text-end">
<li class="list-group-item d-flex justify-content-between lh-sm">
<div>
<h6 class="my-0">منتج 1</h6>
<small class="text-muted">وصف قصير</small>
</div>
<span class="text-muted">150 ر.س</span>
</li>
<li class="list-group-item d-flex justify-content-between">
<span>الإجمالي (ر.س)</span>
<strong>450</strong>
</li>
</ul>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
| Feature/Class | Purpose |
|---|---|
dir="rtl" | Sets page to right-to-left layout |
text-end | Aligns all text and labels to the right |
.form-label, .form-control | Bootstrap form styling |
.order-md-first | Moves cart summary above form on mobile |
bootstrap.rtl.min.css | Enables RTL utility support |
📌 Responsive and fully functional for Arabic checkout workflows.
📘 RTL Checkout Utility Reference
| Feature | Class/Usage | Description |
|---|---|---|
| RTL Setup | dir="rtl", RTL CSS | Sets RTL context and spacing |
| Text Alignment | .text-end, .form-label | Aligns input labels and headings |
| Grid Layout | .row, .col-*, .order-* | Responsive and reorderable layout structure |
| Buttons | .btn, .btn-primary, .w-100 | Full-width RTL action buttons |
| Lists & Totals | .list-group, .justify-content-between | Cart item and total price layout |
🛠️ Best Practices for RTL Checkout Layouts
| Tip | Why It Helps |
|---|---|
Use .order-md-* for mobile-first | Controls section stacking for small screens |
| Match all labels and inputs visually | Improves clarity for RTL readers |
| Validate all form inputs | Enhances UX and avoids failed submissions |
| Test spacing and alignment | RTL paddings and margins can shift visually |
📌 Summary – Recap & Next Steps
The Bootstrap 5 RTL Checkout layout gives you a clean, responsive, and well-aligned form for Arabic-language users. It combines cart display, billing details, and form elements—all optimized for RTL browsing.
🔍 Key Takeaways:
- Use
bootstrap.rtl.min.cssanddir="rtl" - Align all text with
.text-end - Make forms responsive with
.col-*,.row, and.order-md-* - Include a clear cart summary and call-to-action button
⚙️ Great for Arabic eCommerce sites, online service payments, or donation forms.
❓ FAQs – Bootstrap 5 Checkout RTL Layout
❓ Can I use RTL layout with LTR payment gateways?
✅ Yes. Use dir="ltr" only on the embedded iframe/payment form section.
❓ Does RTL work with all Bootstrap form controls?
✅ Yes. All form controls adapt using bootstrap.rtl.min.css.
❓ How do I reverse the layout on smaller screens?
✅ Use order-md-* classes to change the column order responsively.
❓ Can I make the checkout multi-step with RTL?
✅ Yes. Use tab components or collapsible accordions—all work in RTL mode.
Share Now :
