Skip to content

Instantly share code, notes, and snippets.

@filiptronicek

filiptronicek/bootstrap-language-selector.markdown

Created November 21, 2018 18:46
Show Gist options
  • Save filiptronicek/6f8e0935ec3c4480c8eb2fcff530f3d3 to your computer and use it in GitHub Desktop.
Save filiptronicek/6f8e0935ec3c4480c8eb2fcff530f3d3 to your computer and use it in GitHub Desktop.
Download ZIP
Bootstrap Language selector
Raw
index.html
<select class="selectpicker" data-width="fit">
<a href="#cz">
<option data-content='<span class="flag-icon flag-icon-cz"></span> English'>Čeština</option>
</a>
<a href="#de">
<option data-content='<span class="flag-icon flag-icon-de"></span> Español'>Deutsch</option>
</a>
<a href="#en">
<option data-content='<span class="flag-icon flag-icon-gb"></span> Español'>English</option>
</a>
</select>
Raw
script.js
$(function(){
$('.selectpicker').selectpicker();
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/js/bootstrap-select.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/css/bootstrap-select.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/0.8.2/css/flag-icon.min.css" rel="stylesheet" />
@srivastavaanurag79
Copy link

For using the flags inline with text add the classes .fi and .fi-xx (where xx is the ISO 3166-1-alpha-2 code of a country) to an empty <span>.
If you want to have a squared version flag then add the class fis as well. Example:

for normal flag: <span class="fi fi-gr"></span>
for square flag: <span class="fi fi-gr fis"></span>

reference: https://github.com/lipis/flag-icons

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment