Footer
Footer

Footer

Site Customization

Customizing Footer

The footer section of a website is an important element that helps to create a good user experience. It is often overlooked, but it can play a significant role in how visitors perceive the website. A well-designed footer can make the website look more professional and attractive. In this document, we will discuss how to customize the footer of a website using CSS classes and variables.

How to

Add Content-Fitted Footer

Craft a footer that automatically adjusts its width to precisely match the width of the content it contains.
.bullet-footer {
	padding-left: calc((100vw - 1225px)/2 + var(--navbar-padding));
	padding-right: calc((100vw - 1225px)/2 + var(--navbar-padding));
}

Customize Social Media Icon

Modify the color and size of social media icons to match your branding and design preferences.
.footer-social-icon {
	color: #e4e4e4;
}
.footer-social-icon svg {
	width: 1.6rem;
	height: 1.6rem;
}

Add hover effects for Footer Icons and Links

Add unique hover effects to the footer icons and links, enhancing the user experience and providing visual feedback when interacting with them.
/* Icon Hover */
.footer-social-icon:hover {
	color: #615353;
}

/* Links Hover */
.footer-item-link a:hover {
	color: #949494;
}

Customize copyright

Customize the color and position of the copyright text in the footer.
/* Below code will change the color and right align the copyright */
.footer-copyright {
	color: #a2a1a1;
	justify-content: right;
}

Style Copyright and “Made with Bullet”

Enhance the visual presentation of your footer by placing copyright and "Made with Bullet" text on both ends of your site, creating a stylish and professional look for your website.
.footer-copyright {
	justify-content: space-between;
}

Adjust the Number of Columns in the Multicolumn Footer

Customize the layout of your multicolumn footer by easily changing the number of columns displayed, allowing you to create a well-organized footer section that suits your design preferences and content needs.
/* Below code will accommodate 3 columns */
.footer-links-container {
	grid-template-columns: 1fr 1fr 1fr;
}

Reverse Logo and Columns in Multicolumn Footer

Reorder the placement of the logo and columns in your multicolumn footer, providing flexibility to showcase your brand logo on either the left or right side, while adjusting the arrangement of the content columns accordingly for a more visually balanced design.
.bullet-column-container {
	flex-direction: row-reverse;
}
 

References

Variables

Personalize your website's footer by leveraging customizable variables to control the foreground color, background color, and dimensions of the footer brand logo. With these variables, you can achieve a visually cohesive and tailored footer design that aligns with your brand identity and enhances the overall aesthetics of your website.
Variable
Description
Supported values
--footer-fg-color
The foreground color of the footer text and elements.
Any valid CSS color value
--footer-bg-color
Sets the background color
Any valid CSS color value
--footer-brand-logo-width
Sets the width of the footer brand logo
Any valid CSS width value
--footer-brand-logo-height
Sets the height of the footer brand logo
Any valid CSS height value
-footer-brand-font-size
Sets the font size of the footer brand/logo.
Any valid CSS font-size value
The "Supported Values" column provides an overview of the types of values that can be used for each CSS variable. Feel free to modify these variables using the supported values to achieve your desired customization.
How to use
/* Example: How to use CSS variable */
/* Below code will change the background and foreground color of the footer  */

:root {
	--footer-bg-color: #e4e45e;
	--footer-fg-color: #270e0e;
}
  1. Copy the provided CSS code snippet containing the footer theme variables into your CSS file or code > CSS(in bullet site dashboard) section.
  1. Add or Modify the values of the footer theme variables according to your desired customization.
  1. Save the code and publish the site.

Classes

You can unlock even more possibilities beyond the capabilities of variables by leveraging the power of classes, enabling you to achieve customization and fine-tuning that goes beyond what variables alone can offer.
 
Class
Description
.bullet-footer
Represents the main container for the footer.
.footer-links-container
Container class which contains all footer links.
.footer-item-link
Class for styling individual footer links within the links container.
.footer-social-container
Container class for the footer social media icons section.
.footer-social-icon
Class for styling individual social media icons within the social media container.
.footer-copyright
Class for styling the copyright text in the footer.
.bullet-simple-container
Class to identify single-row footer.
.bullet-column-container
Class to identify multi-column footer.
.footer-brand-container
Container class for the multi-column footer brand element.
.footer-brand
Class for styling the multi-column footer brand element.
.footer-brand-logo
Class for styling the logo within the multi-column footer brand container.
.footer-column
Class for styling individual columns within the multi-column footer.
.footer-title
Class for styling the title within the multi-column footer.
How to use
/* Example: How to use CSS class */
/* Below code will add a shadow and background for the footer. */
.bullet-footer {
	background: #e4e45e;
	box-shadow: rgb(0 0 0 / 16%) 0px 8px 36px 0px, rgb(0 0 0 / 6%) 0px 0px 0px 1px;
  margin-top: 30px;
}
  1. Copy the provided CSS code snippet containing the footer class into your CSS file or code > CSS(in bullet site dashboard) section.
  1. Add or Modify the footer classes according to your desired customization.
  1. Save the code and publish the site.