Flags

The flag element shows a country's flag from a class named after its two letter code in lower case, such as flag-au. Each flag is an SVG image that loads only when a page shows it, so the full set costs nothing until it is used. The phone field uses these flags in its country picker.

Country flags

Put the class on an empty span. There is a flag for every country.

<ul class="list-unstyled d-flex flex-column gap-2 mb-0">
    <li>
        <span class="flag-au"></span>
        Australia
    </li>
    <li>
        <span class="flag-br"></span>
        Brazil
    </li>
    <li>
        <span class="flag-jp"></span>
        Japan
    </li>
    <li>
        <span class="flag-ke"></span>
        Kenya
    </li>
    <li>
        <span class="flag-ca"></span>
        Canada
    </li>
</ul>

Sized by the text

A flag is 4 by 3 and as tall as the text around it, so it grows and shrinks with the font size of its parent, with no size of its own to set.

<p class="small mb-2">
    <span class="flag-nz"></span>
    Small text
</p>
<p class="mb-2">
    <span class="flag-nz"></span>
    Body text
</p>
<h3 class="mb-0">
    <span class="flag-nz"></span>
    A heading
</h3>

More flags

Besides the countries, there are flags for the European Union (flag-eu) and the United Nations (flag-un), and for the four nations of the United Kingdom: flag-gb-eng, flag-gb-sct, flag-gb-wls and flag-gb-nir.

<ul class="list-unstyled d-flex flex-column gap-2 mb-0">
    <li>
        <span class="flag-eu"></span>
        European Union
    </li>
    <li>
        <span class="flag-un"></span>
        United Nations
    </li>
    <li>
        <span class="flag-gb-eng"></span>
        England
    </li>
    <li>
        <span class="flag-gb-sct"></span>
        Scotland
    </li>
    <li>
        <span class="flag-gb-wls"></span>
        Wales
    </li>
    <li>
        <span class="flag-gb-nir"></span>
        Northern Ireland
    </li>
</ul>