Bulma Footer
The Footer component in Bulma provides a responsive container for your page's footer content. It can include anything from simple copyright notices to complex multi-column layouts with links, social media icons, and contact information[citation:5].
Basic Footer Structure
The simplest footer uses just the .footer class:
<footer class="footer">
<div class="content has-text-centered">
<p>© 2025 My Website. All rights reserved.</p>
</div>
</footer>Footer with Columns
For more complex footers, you can use Bulma's column system inside the footer:
<footer class="footer">
<div class="columns">
<!-- Column 1: Company Info -->
<div class="column">
<h4 class="has-text-weight-bold">Company Name</h4>
<p>Brief description about your company.</p>
</div>
<!-- Column 2: Quick Links -->
<div class="column">
<h4 class="has-text-weight-bold">Quick Links</h4>
<p><a href="#">Home</a></p>
<p><a href="#">About</a></p>
<p><a href="#">Services</a></p>
</div>
<!-- Column 3: Contact -->
<div class="column">
<h4 class="has-text-weight-bold">Contact Us</h4>
<p>Email: info@example.com</p>
<p>Phone: (123) 456-7890</p>
</div>
</div>
<!-- Copyright Section -->
<div class="content has-text-centered">
<p>© 2025 Company Name. All rights reserved.</p>
</div>
</footer>Responsive Footer Examples
Modern Website Footer
<footer class="footer">
<div class="container">
<div class="columns is-multiline">
<!-- Logo and Description -->
<div class="column is-4">
<div class="footer-logo">
<h2 class="title is-4">YourBrand</h2>
<p class="mb-3">Building amazing web experiences with Bulma.</p>
<div class="social-icons">
<a class="icon" href="#"><i class="fab fa-twitter"></i></a>
<a class="icon" href="#"><i class="fab fa-facebook"></i></a>
<a class="icon" href="#"><i class="fab fa-linkedin"></i></a>
<a class="icon" href="#"><i class="fab fa-github"></i></a>
</div>
</div>
</div>
<!-- Product Links -->
<div class="column is-2">
<h5 class="has-text-weight-bold mb-3">Product</h5>
<ul class="footer-links">
<li><a href="#">Features</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Documentation</a></li>
<li><a href="#">API</a></li>
</ul>
</div>
<!-- Company Links -->
<div class="column is-2">
<h5 class="has-text-weight-bold mb-3">Company</h5>
<ul class="footer-links">
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!-- Legal Links -->
<div class="column is-2">
<h5 class="has-text-weight-bold mb-3">Legal</h5>
<ul class="footer-links">
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms of Service</a></li>
<li><a href="#">Cookie Policy</a></li>
<li><a href="#">GDPR</a></li>
</ul>
</div>
<!-- Newsletter -->
<div class="column is-2">
<h5 class="has-text-weight-bold mb-3">Newsletter</h5>
<div class="field">
<div class="control">
<input class="input" type="email" placeholder="Your email" />
</div>
<button class="button is-primary mt-2">Subscribe</button>
</div>
</div>
</div>
<hr />
<!-- Bottom Bar -->
<div class="columns is-vcentered">
<div class="column">
<p>© 2025 YourBrand. All rights reserved.</p>
</div>
<div class="column has-text-right">
<a href="#" class="mr-3">Terms</a>
<a href="#" class="mr-3">Privacy</a>
<a href="#">Sitemap</a>
</div>
</div>
</div>
</footer>E-commerce Footer
<footer class="footer has-background-dark has-text-white">
<div class="container">
<div class="columns">
<!-- Customer Service -->
<div class="column">
<h5 class="has-text-white has-text-weight-bold">Customer Service</h5>
<ul>
<li><a class="has-text-white" href="#">Contact Us</a></li>
<li><a class="has-text-white" href="#">Shipping Info</a></li>
<li><a class="has-text-white" href="#">Returns & Exchanges</a></li>
<li><a class="has-text-white" href="#">FAQ</a></li>
</ul>
</div>
<!-- My Account -->
<div class="column">
<h5 class="has-text-white has-text-weight-bold">My Account</h5>
<ul>
<li><a class="has-text-white" href="#">Order History</a></li>
<li><a class="has-text-white" href="#">Wish List</a></li>
<li><a class="has-text-white" href="#">Newsletter</a></li>
</ul>
</div>
<!-- Store Info -->
<div class="column">
<h5 class="has-text-white has-text-weight-bold">Our Store</h5>
<p>123 Main Street<br />City, State 12345</p>
<p>Open: Mon-Fri 9am-6pm</p>
</div>
<!-- Payment Methods -->
<div class="column">
<h5 class="has-text-white has-text-weight-bold">We Accept</h5>
<div class="payment-icons">
<span class="icon is-large"><i class="fab fa-cc-visa"></i></span>
<span class="icon is-large"><i class="fab fa-cc-mastercard"></i></span>
<span class="icon is-large"><i class="fab fa-cc-paypal"></i></span>
</div>
</div>
</div>
<!-- Trust Badges -->
<div class="has-text-centered mb-4">
<span class="tag is-success mr-2">✓ Secure Checkout</span>
<span class="tag is-info mr-2">🔒 SSL Encrypted</span>
<span class="tag is-warning">⭐ 4.8/5 Rating</span>
</div>
<!-- Copyright -->
<div class="has-text-centered">
<p class="has-text-grey-light">
© 2025 StoreName. All prices in USD.
</p>
</div>
</div>
</footer>Footer Best Practices
- Use semantic
<footer>tag for better accessibility - Include important links (About, Contact, Privacy Policy)
- Add social media icons with proper aria-labels
- Keep copyright information up to date
- Make sure footer is responsive and works on mobile devices
- Consider using different background colors for visual separation
Tip: The Bulma footer is responsive by default. Use columns with responsive modifiers like
is-mobile or is-multiline to ensure your footer looks good on all devices[citation:5].Up next: Bulma Hero Component
