/*! * Bootstrap v3.3.5 RTL override * Apply after the original bootstrap.css. Works when is set. */ html[dir="rtl"] body { direction: rtl; } /* Grid: flip float direction */ html[dir="rtl"] .col-xs-1, html[dir="rtl"] .col-xs-2, html[dir="rtl"] .col-xs-3, html[dir="rtl"] .col-xs-4, html[dir="rtl"] .col-xs-5, html[dir="rtl"] .col-xs-6, html[dir="rtl"] .col-xs-7, html[dir="rtl"] .col-xs-8, html[dir="rtl"] .col-xs-9, html[dir="rtl"] .col-xs-10, html[dir="rtl"] .col-xs-11, html[dir="rtl"] .col-xs-12, html[dir="rtl"] .col-sm-1, html[dir="rtl"] .col-sm-2, html[dir="rtl"] .col-sm-3, html[dir="rtl"] .col-sm-4, html[dir="rtl"] .col-sm-5, html[dir="rtl"] .col-sm-6, html[dir="rtl"] .col-sm-7, html[dir="rtl"] .col-sm-8, html[dir="rtl"] .col-sm-9, html[dir="rtl"] .col-sm-10, html[dir="rtl"] .col-sm-11, html[dir="rtl"] .col-sm-12, html[dir="rtl"] .col-md-1, html[dir="rtl"] .col-md-2, html[dir="rtl"] .col-md-3, html[dir="rtl"] .col-md-4, html[dir="rtl"] .col-md-5, html[dir="rtl"] .col-md-6, html[dir="rtl"] .col-md-7, html[dir="rtl"] .col-md-8, html[dir="rtl"] .col-md-9, html[dir="rtl"] .col-md-10, html[dir="rtl"] .col-md-11, html[dir="rtl"] .col-md-12, html[dir="rtl"] .col-lg-1, html[dir="rtl"] .col-lg-2, html[dir="rtl"] .col-lg-3, html[dir="rtl"] .col-lg-4, html[dir="rtl"] .col-lg-5, html[dir="rtl"] .col-lg-6, html[dir="rtl"] .col-lg-7, html[dir="rtl"] .col-lg-8, html[dir="rtl"] .col-lg-9, html[dir="rtl"] .col-lg-10, html[dir="rtl"] .col-lg-11, html[dir="rtl"] .col-lg-12 { float: right; } /* Pull helpers swap */ html[dir="rtl"] .pull-right { float: left !important; } html[dir="rtl"] .pull-left { float: right !important; } /* Navbar alignment */ html[dir="rtl"] .navbar-right { float: left !important; } html[dir="rtl"] .navbar-left { float: right !important; } html[dir="rtl"] .navbar .navbar-nav > li > a { text-align: right; } html[dir="rtl"] .navbar-collapse, html[dir="rtl"] .navbar-form { float: none; } /* Breadcrumb */ html[dir="rtl"] .breadcrumb { padding: 8px 0; } html[dir="rtl"] .breadcrumb > li + li:before { /* keep the slash but move spacing */ padding: 0 5px; } /* Pagination & Pager */ html[dir="rtl"] .pagination { padding-right: 0; } html[dir="rtl"] .pagination > li > a, html[dir="rtl"] .pagination > li > span { float: right; } html[dir="rtl"] .pagination > li:first-child > a, html[dir="rtl"] .pagination > li:first-child > span { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 4px; border-bottom-right-radius: 4px; } html[dir="rtl"] .pagination > li:last-child > a, html[dir="rtl"] .pagination > li:last-child > span { border-top-right-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px; } html[dir="rtl"] .pager .previous > a, html[dir="rtl"] .pager .previous > span { float: right; } html[dir="rtl"] .pager .next > a, html[dir="rtl"] .pager .next > span { float: left; } /* Dropdown menu side */ html[dir="rtl"] .dropdown-menu { right: 0; left: auto; text-align: right; } /* Caret direction in dropdown toggles (mirror) */ html[dir="rtl"] .dropdown-toggle .caret { margin-right: .3em; margin-left: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; } /* List helpers */ html[dir="rtl"] .list-unstyled { padding-right: 0; } html[dir="rtl"] .list-inline { padding-right: 0; } html[dir="rtl"] .list-inline > li { padding-right: 5px; padding-left: 0; } /* Form controls and input groups */ html[dir="rtl"] .form-horizontal .control-label { text-align: left; } /* labels on the left edge */ html[dir="rtl"] .radio, html[dir="rtl"] .checkbox { padding-right: 20px; padding-left: 0; } html[dir="rtl"] .radio label, html[dir="rtl"] .checkbox label { padding-right: 20px; padding-left: 0; } html[dir="rtl"] .radio input[type="radio"], html[dir="rtl"] .checkbox input[type="checkbox"] { margin-right: -20px; margin-left: 0; } /* Input group: flip addons */ html[dir="rtl"] .input-group .form-control:first-child, html[dir="rtl"] .input-group-addon:first-child, html[dir="rtl"] .input-group-btn:first-child > .btn, html[dir="rtl"] .input-group-btn:first-child > .btn-group > .btn, html[dir="rtl"] .input-group-btn:first-child > .dropdown-toggle, html[dir="rtl"] .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle), html[dir="rtl"] .input-group-btn:last-child > .btn-group:not(:last-child) > .btn { border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 0; border-bottom-left-radius: 0; } html[dir="rtl"] .input-group .form-control:last-child, html[dir="rtl"] .input-group-addon:last-child, html[dir="rtl"] .input-group-btn:last-child > .btn, html[dir="rtl"] .input-group-btn:last-child > .btn-group > .btn, html[dir="rtl"] .input-group-btn:last-child > .dropdown-toggle, html[dir="rtl"] .input-group-btn:first-child > .btn:not(:first-child), html[dir="rtl"] .input-group-btn:first-child > .btn-group:not(:first-child) > .btn { border-top-left-radius: 4px; border-bottom-left-radius: 4px; border-top-right-radius: 0; border-bottom-right-radius: 0; } /* Close button on alerts & modals */ html[dir="rtl"] .close { float: left; } /* Media object */ html[dir="rtl"] .media, html[dir="rtl"] .media-body { overflow: hidden; } html[dir="rtl"] .media-left { padding-right: 0; padding-left: 10px; float: right; } html[dir="rtl"] .media-right { float: left; padding-left: 0; padding-right: 10px; } html[dir="rtl"] .media-list { padding-right: 0; } /* Tabs / Pills */ html[dir="rtl"] .nav-tabs > li, html[dir="rtl"] .nav-pills > li { float: right; } html[dir="rtl"] .nav-tabs > li > a { margin-right: 0; margin-left: 2px; } html[dir="rtl"] .nav-tabs > li.active > a, html[dir="rtl"] .nav-tabs > li.active > a:focus, html[dir="rtl"] .nav-tabs > li.active > a:hover { border-right-color: #ddd; border-left-color: transparent; } /* Tooltips & Popovers */ html[dir="rtl"] .tooltip { text-align: right; direction: rtl; } html[dir="rtl"] .popover { text-align: right; direction: rtl; } /* Panels */ html[dir="rtl"] .panel-title > a { display: block; } /* Carousel controls */ html[dir="rtl"] .carousel-control { text-shadow: none; } html[dir="rtl"] .carousel-control.left { right: auto; left: 0; } html[dir="rtl"] .carousel-control.right { left: auto; right: 0; } /* Glyphicons positioning helpers */ html[dir="rtl"] .glyphicon-chevron-right:before { content: "\e079"; } /* swap icons */ html[dir="rtl"] .glyphicon-chevron-left:before { content: "\e080"; } /* Modal */ html[dir="rtl"] .modal .modal-footer .btn + .btn { margin-left: 0; margin-right: 5px; } /* Labels, badges spacing in RTL */ html[dir="rtl"] .label { display: inline-block; } html[dir="rtl"] .badge { display: inline-block; } /* Th/Caption default align to right in tables */ html[dir="rtl"] table th, html[dir="rtl"] caption { text-align: right; } /* Utility alignment swap (optional) If you want .text-left/.text-right to remain literal, comment these two lines. */ html[dir="rtl"] .text-left { text-align: right !important; } html[dir="rtl"] .text-right { text-align: right !important; }