Footer

Summary

How to edit the site-wide footer, with an example that groups links into categories and columns.

Details

To edit the footer on all the pages, search for <footer class="app-footer"> in the src/App/templates/layout/default.html.twig template. The content is usually basic HTML and CSS with twig.

Below is an example of a footer that groups urls under two categories and columns. It also contains the copyright row.

<footer class="app-footer">
    <div class="container container-border">
        <div class="row">
            <div class="col-md-9">
                <div class="footer_head">
                    <h2>Category 1</h2>
                </div>
                <div class="row">
                    <div class="col-md-6 dk_widget">
                        <p class="footer-item-title">
                            Column 1
                        </p>
                        <p class="footer-item-link margin-small">
                            <a href="https://first.example.com/" target="_blank">
                                <img src="{{ asset('images/app/icon/hand.svg') }}">
                                First Link
                            </a>
                        </p>
                        <p class="footer-item-link margin-small">
                            <a href="https://second.example.com/" target="_blank">
                                <img src="{{ asset('images/app/icon/hand.svg') }}">
                                Second Link
                            </a>
                        </p>
                    </div>
                    <div class="col-md-6 dk_widget">
                        <p class="footer-item-title">
                            Column 2
                        </p>
                        <p class="footer-item-link margin-large">
                            <a href="https://third.example.com/" target="_blank">
                                <img src="{{ asset('images/app/icon/hand.svg') }}">
                                Third Link
                            </a>
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="footer_head">
                    <h2>Category 2</h2>
                </div>
                <p class="footer-item-support margin-small">
                    <a href="https://fourth.example.com/" target="_blank">
                        <img src="{{ asset('images/app/icon/hand.svg') }}">
                        Fourth Link
                    </a>
                </p>
                <p class="footer-item-support margin-small">
                    <a href="https://fifth.example.com/" target="_blank">
                        <img src="{{ asset('images/app/icon/hand.svg') }}">
                        Fifth Link
                    </a>
                </p>
            </div>
        </div>

        <div class="row">
            <p class="footer-headline">
                © {{ 'now' | date('Y') }} by <a href="{{ url('app::index') }}">My Project</a>
            </p>
        </div>
    </div>
</footer>

FAQ

Q: Which element in default.html.twig renders the footer? A: The <footer class="app-footer"> element.

Q: Can the footer contain more than one column of links? A: Yes — the example groups links under two categories, each split into columns with Bootstrap's col-md-* classes.

Q: How do I show the current year in the copyright line? A: With the Twig filter {{ 'now' | date('Y') }}.