2.5.0
- wrapped footer columns in a
div.row
2.1.0
- placed links in a
ul.list-unstyledlist - changed
.col-sm-3in.col-sm-4.col-md-3for more readability on small size and removed useless.rowwrapper
Links are placed in the footer to make them equally accessible on all pages. These can take the form of a site map linking to pages within the website currently being used, or they can refer to external contents, such as partner websites. If required, the footer can be divided into various sections.
Implementation for Smartphones:
On smartphones, some of the functions from the header, e.g. service navigation or the full form of the Confederation logo, are moved to the footer.
<footer>
<nav class="footer-service">
<ul>
<li><a href="#">Emergencies</a></li>
<li><a href="#">Jobs</a></li>
<li><a href="#">Media</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div class="site-map">
<h2 class="sr-only">Footer</h2>
<a role="button" tabindex="0" data-target="#site-map" data-toggle="collapse" class="site-map-toggle collapsed" aria-label="Toggle sitemap">Sitemap</a>
<div class="container-fluid" id="site-map">
<div class="row">
<div class="col-sm-6 col-md-3">
<h3>Einreise & Aufenthalt in der Schweiz</h3>
<ul class="list-unstyled">
<li><a href="#">Einreise in die Schweiz</a></li>
<li><a href="#">Visabestimmungen</a></li>
<li><a href="#">Aufenthalt in der Schweiz</a></li>
<li><a href="#">Geschäftstätigkeit in der Schweiz</a></li>
<li><a href="#">Ausländische Vertretungen in der Schweiz</a></li>
<li><a href="#">Informationen zur Schweiz</a></li>
</ul>
</div>
<div class="col-sm-6 col-md-3">
<h3>Einreise & Aufenthalt in der Schweiz</h3>
<ul class="list-unstyled">
<li><a href="#">Einreise in die Schweiz</a></li>
<li><a href="#">Visabestimmungen</a></li>
<li><a href="#">Aufenthalt in der Schweiz</a></li>
<li><a href="#">Geschäftstätigkeit in der Schweiz</a></li>
<li><a href="#">Ausländische Vertretungen in der Schweiz</a></li>
<li><a href="#">Informationen zur Schweiz</a></li>
</ul>
</div>
<div class="col-sm-6 col-md-3">
<h3>Einreise & Aufenthalt in der Schweiz</h3>
<ul class="list-unstyled">
<li><a href="#">Einreise in die Schweiz</a></li>
<li><a href="#">Visabestimmungen</a></li>
<li><a href="#">Aufenthalt in der Schweiz</a></li>
<li><a href="#">Geschäftstätigkeit in der Schweiz</a></li>
<li><a href="#">Ausländische Vertretungen in der Schweiz</a></li>
<li><a href="#">Informationen zur Schweiz</a></li>
</ul>
</div>
<div class="col-sm-6 col-md-3">
<h3>Einreise & Aufenthalt in der Schweiz</h3>
<ul class="list-unstyled">
<li><a href="#">Einreise in die Schweiz</a></li>
<li><a href="#">Visabestimmungen</a></li>
<li><a href="#">Aufenthalt in der Schweiz</a></li>
<li><a href="#">Geschäftstätigkeit in der Schweiz</a></li>
<li><a href="#">Ausländische Vertretungen in der Schweiz</a></li>
<li><a href="#">Informationen zur Schweiz</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-3">
<h3>Einreise & Aufenthalt in der Schweiz</h3>
<ul class="list-unstyled">
<li><a href="#">Einreise in die Schweiz</a></li>
<li><a href="#">Visabestimmungen</a></li>
<li><a href="#">Aufenthalt in der Schweiz</a></li>
<li><a href="#">Geschäftstätigkeit in der Schweiz</a></li>
<li><a href="#">Ausländische Vertretungen in der Schweiz</a></li>
<li><a href="#">Informationen zur Schweiz</a></li>
</ul>
</div>
<div class="col-sm-6 col-md-3">
<h3>Einreise & Aufenthalt in der Schweiz</h3>
<ul class="list-unstyled">
<li><a href="#">Einreise in die Schweiz</a></li>
<li><a href="#">Visabestimmungen</a></li>
<li><a href="#">Aufenthalt in der Schweiz</a></li>
<li><a href="#">Geschäftstätigkeit in der Schweiz</a></li>
<li><a href="#">Ausländische Vertretungen in der Schweiz</a></li>
<li><a href="#">Informationen zur Schweiz</a></li>
</ul>
</div>
<div class="col-sm-6 col-md-3">
<h3>Einreise & Aufenthalt in der Schweiz</h3>
<ul class="list-unstyled">
<li><a href="#">Einreise in die Schweiz</a></li>
<li><a href="#">Visabestimmungen</a></li>
<li><a href="#">Aufenthalt in der Schweiz</a></li>
<li><a href="#">Geschäftstätigkeit in der Schweiz</a></li>
<li><a href="#">Ausländische Vertretungen in der Schweiz</a></li>
<li><a href="#">Informationen zur Schweiz</a></li>
</ul>
</div>
<div class="col-sm-6 col-md-3">
<h3>Einreise & Aufenthalt in der Schweiz</h3>
<ul class="list-unstyled">
<li><a href="#">Einreise in die Schweiz</a></li>
<li><a href="#">Visabestimmungen</a></li>
<li><a href="#">Aufenthalt in der Schweiz</a></li>
<li><a href="#">Geschäftstätigkeit in der Schweiz</a></li>
<li><a href="#">Ausländische Vertretungen in der Schweiz</a></li>
<li><a href="#">Informationen zur Schweiz</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- End of Site-map -->
<!-- Use normal `container` instead of `container-fluid` -->
<div class="container-fluid">
<h3>Informiert bleiben</h3>
<nav>
<ul>
<li><a class="icon icon--before icon--twitter" href="#">Twitter</a></li>
<li><a class="icon icon--before icon--facebook" href="#">Facebook</a></li>
<li><a class="icon icon--before icon--rss" href="#">RSS Feed</a></li>
<li><a class="icon icon--before icon--message" href="#">Newsletter</a></li>
</ul>
</nav>
<h3>DEZA – Weltweit vor Ort</h3>
<p>
Besuchen Sie die Websites der Schweizer Kooperationsbüros.
</p>
<p>
<select name="country">
<option value="Switzerland">Switzerland</option>
<option value="France">France</option>
<option value="Germany">Germany</option>
<option value="...">...</option>
</select>
</p>
</div>
<div class="footer-address">
<span class="hidden-xs">Bundesamt für Statistik</span>
<nav class="pull-right">
<ul>
<li><a href="#">Rechtliches</a></li>
<li><a href="#">Impressum</a></li>
</ul>
</nav>
</div>
</footer>