Bulma Footers Components (69)

Framework

UI Library

7-Day Pass

Full Shuffle Editor access for just $10

Great for quick projects and for testing everything Shuffle can do. One-time payment, not a subscription.

New to Shuffle? Try our tools:

Multi-AI Designer Kick off several design directions at once, then build on your favorite. Visual Editor Build from UI components and templates, then customize every detail.

Components

Footers from Flaro

Bulma

Flaro

<section class="has-background-white pt-24 is-clipped">
    <div class="container px-8">
        <div class="pb-20" style="border-bottom: 1px solid #bab5b6; width: 100%;">
            <div class="columns is-justify-content-center">
                <div class="column is-2">
                    <h3 class="mb-6 has-text-weight-semibold has-text-dark">Company</h3>
                    <ul>
                        <li class="mb-3"><a class="has-text-grey has-text-weight-medium" href="#">About Us</a></li>
                        <li class="mb-3"><a class="has-text-grey has-text-weight-medium" href="#">Careers</a></li>
                        <li class="mb-3"><a class="has-text-grey has-text-weight-medium" href="#">Press</a></li>
                        <li><a class="has-text-grey has-text-weight-medium" href="#">Blog</a></li>
                    </ul>
                </div>
                <div class="column is-2">
                    <h3 class="mb-6 has-text-weight-semibold has-text-dark">Pages</h3>
                    <ul>
                        <li class="mb-3"><a class="has-text-grey has-text-weight-medium" href="#">Login</a></li>
                        <li class="mb-3"><a class="has-text-grey has-text-weight-medium" href="#">Register</a></li>
                        <li class="mb-3"><a class="has-text-grey has-text-weight-medium" href="#">Add list</a></li>
                        <li><a class="has-text-grey has-text-weight-medium" href="#">Contact</a></li>
                    </ul>
                </div>
                <div class="column is-2">
                    <h3 class="mb-6 has-text-weight-semibold has-text-dark">Legal</h3>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Footers from Zeus

Bulma

Zeus

<section class="section py-12 py-20-desktop">
  <div class="container">
    <div class="columns mb-8 pb-20" style="border-bottom: 1px solid #DADFE9;">
      <div class="column is-4 mb-12 mb-0-desktop">
        <a class="is-inline-block mb-3 title is-5 has-text-dark" href="#">
          <img src="zeus-assets/logo/logo-zeus-red.svg" alt="" style="height: 28px" width="auto">
        </a>
        <p class="mb-6 has-mw-xs has-text-grey-dark">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div>
          <a class="is-inline-block mr-4" href="#" style="width: 40px;">
            <svg width="10" height="18" viewbox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M6.63469 17.7274V9.76612H9.35806L9.76664 6.66255H6.63469V4.68138C6.63469 3.78311 6.88796 3.17095 8.20273 3.17095L9.87687 3.17027V0.394337C9.58735 0.357434 8.59354 0.272827 7.43684 0.272827C5.02146 0.272827 3.36785 1.71891 3.36785 4.37401V6.66255H0.63623V9.76612H3.36785V17.7274H6.63469Z" fill="#838EA4"></path>
            </svg>
          </a>
          <a class="is-inline-block mr-4" href="#" style="width: 40px;">
            <svg width="19" height="16" viewbox="0 0 19 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M18.8181 2.14598C18.1356 2.44844 17.4032 2.65356 16.6336 2.74513C17.4194 2.27462 18.0208 1.52831 18.3059 0.641769C17.5689 1.0775 16.7553 1.39389 15.8885 1.56541C15.1943 0.82489 14.2069 0.363647 13.1118 0.363647C11.0108 0.363647 9.30722 2.06719 9.30722 4.16707C9.30722 4.46489 9.34083 4.75577 9.40573 5.03392C6.24434 4.87513 3.44104 3.3605 1.56483 1.05895C1.23686 1.61986 1.05028 2.27344 1.05028 2.9711C1.05028 4.29107 1.72243 5.45574 2.74225 6.13713C2.11877 6.11629 1.53237 5.94477 1.01901 5.65968V5.70719C1.01901 7.5498 2.33086 9.08762 4.07031 9.43762C3.75161 9.52338 3.41555 9.57089 3.06789 9.57089C2.82222 9.57089 2.58464 9.54656 2.3517 9.5002C2.8361 11.0125 4.24067 12.1123 5.90483 12.1424C4.6034 13.1623 2.96243 13.7683 1.1801 13.7683C0.873008 13.7683 0.570523 13.7498 0.272705 13.7162C1.95655 14.7974 3.95561 15.4279 6.10416 15.4279C13.1026 15.4279 16.928 9.63117 16.928 4.60398L16.9153 4.11147C17.6627 3.57835 18.3094 2.90853 18.8181 2.14598Z" fill="#838EA4"></path>
            </svg>
          </a>
          <a class="is-inline-block" href="#" style="width: 40px;">
            <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M5.4 15.8H5.9V15.3V7.2V6.7H5.4H2.7H2.2V7.2V15.3V15.8H2.7H5.4ZM15.3 15.8H15.8V15.3V10.17C15.8 8.18386 14.1361 6.52 12.15 6.52C11.6417 6.52 11.1085 6.68661 10.6472 6.94292C10.5635 6.98941 10.4809 7.03957 10.4 7.09321V6.7H9.9H7.2H6.7V7.2V15.3V15.8H7.2H9.9H10.4V15.3V10.53C10.4 10.0862 10.8062 9.68 11.25 9.68C11.6938 9.68 12.1 10.0862 12.1 10.53V15.3V15.8H12.6H15.3ZM1.8 0.5H16.2C16.9139 0.5 17.5 1.08614 17.5 1.8V16.2C17.5 16.9139 16.9139 17.5 16.2 17.5H1.8C1.08614 17.5 0.5 16.9139 0.5 16.2V1.8C0.5 1.08614 1.08614 0.5 1.8 0.5ZM1.93 4.05C1.93 5.22614 2.87386 6.17 4.05 6.17C5.22614 6.17 6.17 5.22614 6.17 4.05C6.17 2.87386 5.22614 1.93 4.05 1.93C2.87386 1.93 1.93 2.87386 1.93 4.05Z" fill="#838EA4" stroke="#838EA4"></path>
            </svg>
          </a>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Footers from Yofte

Bulma

Yofte

<section class="section pt-0-tablet pb-0-tablet pl-0-tablet has-background-light is-clipped">
  <div class="columns is-multiline">
    <div class="column is-3-desktop is-5-tablet px-6 py-20 has-background-white">
      <div class="has-mw-xs mx-auto">
        <a class="mb-12 is-inline-block" href="#">
          <img class="image" src="yofte-assets/logos/yofte-logo.svg" alt="">
        </a>
        <div class="mb-12 has-text-weight-semibold">
          <p>Our Store</p>
          <p>N&oslash;rremark 51, 8700 Horsens</p>
          <p>Denmark</p>
        </div>
        <div class="mb-16 mb-40-tablet is-flex">
          <a class="mr-2 is-inline-block" href="#">
            <img class="image" src="yofte-assets/buttons/facebook-circle.svg" alt="">
          </a>
          <a class="mr-2 is-inline-block" href="#">
            <img class="image" src="yofte-assets/buttons/instagram-circle.svg" alt="">
          </a>
          <a class="is-inline-block" href="#">
            <img class="image" src="yofte-assets/buttons/twitter-circle.svg" alt="">
          </a>
        </div>
        <div class="columns is-mobile is-multiline">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Footers from Pstls.

Bulma

Pstls.

<section class="section py-20 py-24-tablet has-background-white">
  <div class="container">
    <div class="mb-12 columns is-multiline is-vcentered">
      <div class="column is-narrow">
        <a href="#">
          <img class="image" src="pstls-assets/logos/pstls-logo.svg" alt="" width="87">
        </a>
      </div>
      <div class="column">
        <ul class="is-flex-tablet -mb-4 is-justify-content-center">
          <li class="mb-4 mr-12-tablet"><a class="has-text-weight-bold has-text-dark" href="#">Hello</a></li>
          <li class="mb-4 mr-12-tablet"><a class="has-text-weight-bold has-text-dark" href="#">Story</a></li>
          <li class="mb-4 mr-12-tablet"><a class="has-text-weight-bold has-text-dark" href="#">About us</a></li>
          <li class="mb-4"><a class="has-text-weight-bold has-text-dark" href="#">Services</a></li>
        </ul>
      </div>
      <div class="column is-narrow">
        <div class="is-flex is-flex-direction-row">
          <a href="#">
            <img class="image" src="pstls-assets/logos/twitter.svg" alt="">
          </a>
          <a class="mx-7" href="#">
            <img class="image" src="pstls-assets/logos/google.svg" alt="">
          </a>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Footers from Acros

Bulma

Acros

<section class="section pt-20 pb-0 has-background-grey-darker">
  <div class="container">
    <div class="columns mb-0" style="border-bottom: 1px solid rgba(255,255,255,0.15)">
      <div class="column is-4 mb-12 mb-0-tablet mb-20-tablet">
        <a class="is-block mb-4 title is-size-4 has-text-white" href="#">
          <img src="acros-assets/logo/logo-acros-white.svg" alt="" width="auto">
        </a>
        <ul class="mb-8">
          <li class="mb-2">
            <a class="title is-size-6 is-flex is-align-items-center has-text-white" href="#">
              <img class="mr-3" src="acros-assets/icons/footers/contact.svg" alt="">
              <span>+44 20 6024 2068</span>
            </a>
          </li>
          <li>
            <a class="title is-size-6 is-flex is-align-items-center has-text-white" href="#">
              <img class="mr-3" src="acros-assets/icons/footers/email.svg" alt="">
              <span>office@neonic.co</span>
            </a>
          </li>
        </ul>
        <ul class="is-flex">
          <li>
            <a href="#">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Footers from Bendis

Bulma

Bendis

<section class="section py-24 has-background-primary">
  <div class="container">
    <div class="columns mb-10 pb-10 border-b-primary-light">
      <div class="column is-4 mb-12 mb-0-desktop">
        <a class="is-inline-block mb-3 title is-5 has-text-dark mb-6" href="#">
          <img src="bendis-assets/logos/bendis-light.svg" alt="" width="auto">
        </a>
        <p class="has-mw-xs has-text-primary-light mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="buttons">
          <a class="button p-0 is-light has-text-warning has-background-primary-dark w-12 h-12" href="#">
            <svg width="10" height="18" viewbox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M6.63469 17.7274V9.76612H9.35806L9.76664 6.66255H6.63469V4.68138C6.63469 3.78311 6.88796 3.17095 8.20273 3.17095L9.87687 3.17027V0.394337C9.58735 0.357434 8.59354 0.272827 7.43684 0.272827C5.02146 0.272827 3.36785 1.71891 3.36785 4.37401V6.66255H0.63623V9.76612H3.36785V17.7274H6.63469Z" fill="currentColor"></path>
            </svg>
          </a>
          <a class="button p-0 is-light has-text-warning has-background-primary-dark w-12 h-12" href="#">
            <svg width="19" height="16" viewbox="0 0 19 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M18.8181 2.14598C18.1356 2.44844 17.4032 2.65356 16.6336 2.74513C17.4194 2.27462 18.0208 1.52831 18.3059 0.641769C17.5689 1.0775 16.7553 1.39389 15.8885 1.56541C15.1943 0.82489 14.2069 0.363647 13.1118 0.363647C11.0108 0.363647 9.30722 2.06719 9.30722 4.16707C9.30722 4.46489 9.34083 4.75577 9.40573 5.03392C6.24434 4.87513 3.44104 3.3605 1.56483 1.05895C1.23686 1.61986 1.05028 2.27344 1.05028 2.9711C1.05028 4.29107 1.72243 5.45574 2.74225 6.13713C2.11877 6.11629 1.53237 5.94477 1.01901 5.65968V5.70719C1.01901 7.5498 2.33086 9.08762 4.07031 9.43762C3.75161 9.52338 3.41555 9.57089 3.06789 9.57089C2.82222 9.57089 2.58464 9.54656 2.3517 9.5002C2.8361 11.0125 4.24067 12.1123 5.90483 12.1424C4.6034 13.1623 2.96243 13.7683 1.1801 13.7683C0.873008 13.7683 0.570523 13.7498 0.272705 13.7162C1.95655 14.7974 3.95561 15.4279 6.10416 15.4279C13.1026 15.4279 16.928 9.63117 16.928 4.60398L16.9153 4.11147C17.6627 3.57835 18.3094 2.90853 18.8181 2.14598Z" fill="currentColor"></path>
            </svg>
          </a>
          <a class="button p-0 is-light has-text-warning has-background-primary-dark w-12 h-12" href="#">
            <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M5.4 15.8H5.9V15.3V7.2V6.7H5.4H2.7H2.2V7.2V15.3V15.8H2.7H5.4ZM15.3 15.8H15.8V15.3V10.17C15.8 8.18386 14.1361 6.52 12.15 6.52C11.6417 6.52 11.1085 6.68661 10.6472 6.94292C10.5635 6.98941 10.4809 7.03957 10.4 7.09321V6.7H9.9H7.2H6.7V7.2V15.3V15.8H7.2H9.9H10.4V15.3V10.53C10.4 10.0862 10.8062 9.68 11.25 9.68C11.6938 9.68 12.1 10.0862 12.1 10.53V15.3V15.8H12.6H15.3ZM1.8 0.5H16.2C16.9139 0.5 17.5 1.08614 17.5 1.8V16.2C17.5 16.9139 16.9139 17.5 16.2 17.5H1.8C1.08614 17.5 0.5 16.9139 0.5 16.2V1.8C0.5 1.08614 1.08614 0.5 1.8 0.5ZM1.93 4.05C1.93 5.22614 2.87386 6.17 4.05 6.17C5.22614 6.17 6.17 5.22614 6.17 4.05C6.17 2.87386 5.22614 1.93 4.05 1.93C2.87386 1.93 1.93 2.87386 1.93 4.05Z" fill="currentColor" stroke="currentColor"></path>
            </svg>
          </a>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Footers from Metis

Bulma

Metis

<section class="section">
  <div class="container">
    <div class="columns is-multiline is-justify-content-space-between">
      <div class="column is-2">
        <a href="#">
          <img src="metis-assets/logos/metis/metis.svg" alt="" width="106">
        </a>
      </div>
      <div class="column is-3">
        <p class="subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo.</p>
      </div>
      <div class="column is-2 is-offset-1">
        <h3 class="title is-size-5 is-spaced mb-3">Office</h3>
        <p class="subtitle">359 Hidden Valley Road, NY</p>
      </div>
      <div class="column is-2">
        <h3 class="title is-size-5 is-spaced mb-3">Contacts</h3>
        <p class="subtitle">hello@gmail.com</p>
      </div>
    </div>
    <div class="mt-5 is-flex is-justify-content-space-between">
      <p class="subtitle is-size-7">&copy; 2020. All rights reserved.</p>
      <div>
        <a href="#">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Footers from Cronos

Bulma

Cronos

<section class="section has-background-dark">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-12 is-3-desktop mb-10 mb-0-desktop">
        <a class="navbar-item pl-0 has-text-white title is-size-4" href="#">
          <img src="cronos-assets/logos/cronos-logo-white.svg" alt="" width="132">
        </a>
      </div>
      <div class="column is-12 is-9-desktop mb-12">
        <div class="columns is-multiline is-justify-content-between">
          <div class="column is-6-tablet is-3-desktop mb-8 mb-0-desktop">
            <p class="has-text-white mb-6 has-text-weight-bold">Product</p>
            <ul>
              <li class="mb-3"><a class="has-text-grey-light is-size-7" href="#">Careers</a></li>
              <li class="mb-3"><a class="has-text-grey-light is-size-7" href="#">About Us</a></li>
              <li class="mb-3"><a class="has-text-grey-light is-size-7" href="#">Insights</a></li>
              <li class="mb-3"><a class="has-text-grey-light is-size-7" href="#">PCI Compliance</a></li>
              <li class="mb-3"><a class="has-text-grey-light is-size-7" href="#">Interfratlons</a></li>
              <li><a class="has-text-grey-light is-size-7" href="#">Pricing</a></li>
            </ul>
          </div>
          <div class="column is-6-tablet is-3-desktop mb-8 mb-0-desktop">
            <p class="has-text-white mb-6 has-text-weight-bold">For Developers</p>
            <ul>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Footers from Plain

Bulma

Plain

<footer class="section">
  <div class="container">
    <div class="columns is-multiline" style="border-bottom: 1px solid #dee2e6;">
      <div class="column is-3 mb-5">
        <a class="mb-4 is-inline-block" href="#">
          <img class="image" src="bulma-plain-assets/logos/plainb-logo.svg" alt="" width="96px">
        </a>
        <p class="has-text-grey-dark mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div>
          <a class="mr-3 is-inline-block" href="#">
            <img class="mx-auto image is-fullwidth" src="bulma-plain-assets/socials/facebook.svg">
          </a>
          <a class="mr-3 is-inline-block" href="#">
            <img class="mx-auto image is-fullwidth" src="bulma-plain-assets/socials/github.svg">
          </a>
          <a class="mr-3 is-inline-block" href="#">
            <img class="mx-auto image is-fullwidth" src="bulma-plain-assets/socials/instagram.svg">
          </a>
          <a class="mr-3 is-inline-block" href="#">
            <img class="mx-auto image is-fullwidth" src="bulma-plain-assets/socials/linkedin.svg">
          </a>
          <a class="is-inline-block" href="#">
            <img class="mx-auto image is-fullwidth" src="bulma-plain-assets/socials/twitter.svg">
          </a>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Footers from asitrastudio

Bulma

asitrastudio

<section class="section py-12 py-20-tablet has-background-dark">
  <div class="container">
    <div class="has-mw-xl has-mw-none-widescreen mx-auto">
      <div class="mb-20 columns is-multiline">
        <div class="column is-12 is-3-widescreen mb-12 mb-0-widescreen">
          <a class="is-inline-block has-text-grey" href="#">
            <img class="image is-fullwidth" style="height: 21px;" src="asitrastudio-assets/logos/logo-asitra-white.svg" alt="">
          </a>
        </div>
        <div class="column is-2-widescreen is-6-mobile mb-10 mb-0-widescreen">
          <h5 class="has-text-white mb-4 is-size-6">About</h5>
          <ul>
            <li class="mb-2"><a class="is-inline-block has-text-grey-light" href="#">Contact</a></li>
            <li class="mb-2"><a class="is-inline-block has-text-grey-light" href="#">Blog</a></li>
            <li class="mb-2"><a class="is-inline-block has-text-grey-light" href="#">Our Storry</a></li>
            <li>
              <a class="is-inline-block has-text-grey-light" href="#">
                <span class="mr-2">Careers</span>
                <span class="tag is-primary has-text-white px-2 py-1 is-uppercase" style="font-size: 12px;">Hiring</span>
              </a>
            </li>
          </ul>
        </div>
        <div class="column is-3-widescreen is-6-mobile mb-10 mb-0-widescreen">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Footers from Vendia

Bulma

Vendia

<section class="section has-background-dark">
  <div class="container">
    <div class="pb-20 columns is-multiline">
      <div class="column is-12-tablet is-6-widescreen mb-8 mb-0-widescreen">
        <div class="has-mw-md">
          <a class="mb-20 is-inline-block" href="#">
            <img class="image is-fullwidth" src="vendia-assets/logos/vendia.svg" alt="" style="height: 30px;">
          </a>
          <p class="has-text-grey-lighter is-size-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum aliquet accumsan porta lectus ridiculus in mattis.</p>
        </div>
      </div>
      <div class="column is-4-tablet is-2-widescreen">
        <div>
          <h6 class="has-text-grey-lighter mb-6 has-text-weight-medium">Company</h6>
          <ul class="mb-0">
            <li class="mb-4"><a class="has-text-white is-inline-block has-text-weight-medium" href="#">About</a></li>
            <li class="mb-4"><a class="has-text-white is-inline-block has-text-weight-medium" href="#">Support</a></li>
            <li class="mb-4"><a class="has-text-white is-inline-block has-text-weight-medium" href="#">Products</a></li>
            <li><a class="has-text-white is-inline-block has-text-weight-medium" href="#">Career</a></li>
          </ul>
        </div>
      </div>
      <div class="column is-4-tablet is-2-widescreen">
        <div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Footer is the place where you will put the site navigation and all the relevant information. That is why it is worth putting some effort into its design, prioritizing vital information and links over the less important ones.

Choose from many variants of Bulma components footers. The variants shown here are available in various UI libraries in the Shuffle Editor. You will also find many other types of components that will be in the same style. This will allow you to build a comprehensive Bulma website template. Each library is designed by a professional designer and coded by our team of developers.

Get access to all Bulma components footers section, code and our editor. Try the demo for free.

Try for Free →

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Bulma Footers Components

Framework

UI Library

Components

Footers from Flaro

Get the code for 13,400+ components

Footers from Zeus

Get the code for 13,400+ components

Footers from Yofte

Get the code for 13,400+ components

Footers from Pstls.

Get the code for 13,400+ components

Footers from Acros

Get the code for 13,400+ components

Footers from Bendis

Get the code for 13,400+ components

Footers from Metis

Get the code for 13,400+ components

Footers from Cronos

Get the code for 13,400+ components

Footers from Plain

Get the code for 13,400+ components

Footers from asitrastudio

Get the code for 13,400+ components

Footers from Vendia

Get the code for 13,400+ components

The easiest way to create beautiful websites

monthly

annual

lifetime

monthly

annual

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support