html - Bootstrap - good practice for multilingual 2 directions support? -


i'm building small website both in english (ltr) , hebrew (rtl).

the website uses same code base, , changes captions according language being displayed.

when english user enters site should see content left right. lets have image text next - image on left , text on right.

when hebrew user enters should see image on right , text it's left.

is there acceptable way doing in bootstrap without having write same html twice , without overriding bootstrap css classes?

if attach js language checkbox, add/remove pull-right class elements want move:

example: http://www.bootply.com/fzmcivlvbl#

js

$('input:checkbox').change(function(){     if($(this).is(":checked")) {         $('div.ltr').addclass("pull-right");     } else {         $('div.ltr').removeclass("pull-right");     } }); 

html

<div class="col-xs-6 ltr">   <div class="thumbnail">     <img src="http://placehold.it/500x300">   </div> </div> <div class="col-xs-6">   <p>caption 1...</p> </div> 

just watch out how pull-right affects other content comes afterward - prepared add <div class="clearfix"></div> after blocks of moving content necessary.


Comments

Popular posts from this blog

commonjs - How to write a typescript definition file for a node module that exports a function? -

openid - Okta: Failed to get authorization code through API call -

ios - Change Storyboard View using Seague -