Overview
Bootstrap Mirror is a simple and user-friendly bootstrap plugin that adds the support of RTL (Right to Left) Page layout to Bootstrap 3. Its a perfect tool for folks or devs who want to build responsive websites for languages that starts from the right or for simply for designs that requires right to left page layout.
Compatiblity
The plugin is fully compatible with Bootstrap 3.3.7, and is fully functional on all browsers that supports Bootstrap 3.
Usage
Using this plugin is a peice of cake. You will only need to:
- Include the CSS file
bootstrap-mirror.cssin your code. - Apply the class
.bs-mirrordirectly to the<body>or basically to any component that you want to mirror. - Voilà! The page layout and all Bootstrap components are now RTL.
See, Simple as that!
Download
Download the plugin from the project's GitHub page Here.
Showcases
Here are examples to showcase the plugin's effect on some of the most common Bootstrap components. Click the floating "Mirror Page" button on the bottom of the pages to quickly toggle the effect.
Dropdowns
Button groups
Basic Example
Button toolbar
Nesting
Vertical variation
Justified button groups
Split button dropdowns
Input groups
Basic example
Input groups addons
Breadcrumbs
Pagination
Default pagination
Pager
Pager Aligned links
Badges
Jumbotron
Hello, world!
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
Alerts
Progress bars
Default Progress bars
Default Progress bars
Animated
Stacked
Media object
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
List group
Basic example
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
Badges
- 14 Cras justo odio
- 2 Dapibus ac facilisis in
- 1 Morbi leo risus
Linked items
Button items
Panels
Panel with heading and footer
Accordion
Table
| # | Firstname | Lastname | Age | City | Country |
|---|---|---|---|---|---|
| 1 | Anna | Pitt | 35 | New York | USA |
| 2 | Mark | Otto | 40 | Paris | France |
| 3 | Jacob | Thornton | 22 | London | United Kingdom |
