Bootstrap Language selector

bootstrap-language-selector.markdown

Bootstrap Language selector

A Pen by filiptronicek on CodePen.

License.

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>
  

script.js

$(function(){
    $('.selectpicker').selectpicker();
});

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>

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" />

flags not worked for me :(

@zokirhal this should work just fine, the flag-icon.min.css script should handle that.

how can i add flage image to the select option drop down?

why it does,not work for me

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