Static Html Website - Bootstrap - Multi language Support

javascript html css twitter-bootstrap-3 multilingual
sestus picture sestus · Jun 4, 2014 · Viewed 56.8k times · Source

To begin with I want to state that I am newbie in Web Development.

I was asked to build a static website (for a small - size hotel), and I bought this responsive html5 - CSS3 template. It consists of pure html5 - css3 , and some JavaScript for slideshows etc and uses the bootstrap framework.

I have already build the website, and now I was asked to add multilanguage support to it. Can I accomplish this via bootstrap? Can it even be done with CSS?

If not, should I have a copy of all my .html files in a subfolder (e.g "website"/en/"content" ) and redirect the user via a link at the top of the page, or should I use JavaScript to decide the language?

Briefly, I would like a user that visits my website from another country to get the English version of the site, while all others get the default language. I want as fast development as possible (that's why I bought a template) to get up and running asap (summer season has already started). I have a reasonable background in programming, but I am totally new in Web Development.

Answer

kekub picture kekub · Jun 4, 2014

You can do this within a single file without using any server-side programming languages. You should check out i18next for a proper javascript solution.

You can also use pure CSS to translate a homepage. Try something like 

.en, .de, .it { display:none; } /* hide all elements with a language class */
.en:lang(en), .de:lang(de), .it:lang(it) { display:block; } /* show those elements that match their language class */

When you set a proper lang attribute on your html tag (e.g. by javascript) you can translate your page very easy:

<div class="en">Good morning</div>
<div class="de">Guten Morgen</div>
<div class="it">Ciao</div>

Related questions

Bootstrap 3 Navbar Collapse menu at Left for left and right navbar items

I have a Bootstrap 3 navbar with left nav items and right nav items (as shown below). When collapsed, I want both the navbar-toggle (AKA the 'hamburger menu') and its items to be left aligned. My code so far: <nav …

Read More
Retrieve the position (X,Y) of an HTML element relative to the browser window

I want to know how to get the X and Y position of HTML elements such as img and div in JavaScript relative to the browser window.

Read More
Set cookie and get cookie with JavaScript

I'm trying to set a cookie depending on which CSS file I choose in my HTML. I have a form with a list of options, and different CSS files as values. When I choose a file, it should be saved …

Read More