Footer

A simple responsive footer which can include anything: lists, headings, columns, icons, buttons, etc.

The Bulma footer is a simple container, with lots of bottom padding, making it great as the last element of any webpage.

Example

HTML

<footer class="footer">
  <div class="content has-text-centered">
    <p>
      <strong>Bulma</strong> by <a href="https://jgthms.com">Jeremy Thomas</a>.
      The source code is licensed
      <a href="https://opensource.org/license/mit">MIT</a>. The
      website content is licensed
      <a href="https://creativecommons.org/licenses/by-nc-sa/4.0//"
        >CC BY NC SA 4.0</a
      >.
    </p>
  </div>
</footer>

Sass and CSS variables #

Sass Variable	CSS Variable	Value
`$footer-background-color`	`var(--bulma-footer-background-color)`	`var(--bulma-scheme-main-bis)`
`$footer-color`	`var(--bulma-footer-color)`	`false`
`$footer-padding`	`var(--bulma-footer-padding)`	`3rem 1.5rem 6rem`

Sass Variable

CSS Variable

Value

$footer-background-color

var(--bulma-footer-background-color)

var(--bulma-scheme-main-bis)

$footer-color

var(--bulma-footer-color)

false

$footer-padding

var(--bulma-footer-padding)

3rem 1.5rem 6rem

Start Here

Features

Sass Tools

Customization

CSS Library

CSS Helpers

Footer

A simple responsive footer which can include anything: lists, headings, columns, icons, buttons, etc.

Sass and CSS variables #

How to support Bulma