How to Create a Multi-Column CTA Footer Using Bootstrap


Highlight multiple social media channels or links in your website's call-to-action footer using Bootstrap columns.

How to Create a Multi-Column CTA Footer Using Bootstrap

Footnotes were cleverly named because of their location at the bottom of a printed page. The same is true of website footers – which, also aptly named, appear at the foot of a web page. 

Short of sticking one's foot in one's mouth, it's fair to say that footers are the foundation for a webpage, anchoring the final roll of a scroll and punctuating the last bit of content. That's why they often include a strong call-to-action (CTA for short).  

Less is almost always more, and that's apropos for the full-width CTA banners you've probably seen in website footer templates. These wrappers are often very simple, containing a brief message like "Join our team" or "Sign up today" with a fat button. They're like billboards on the highway, hitting you with one big, sticky message. 

Sometimes, you might want to feature multiple channels in your footer or CTA wrapper. Maybe you have a few ways of engaging or transacting with your customers, or different social platforms you want to highlight. In this tutorial, we'll show you how to build a footer banner with three "compartments" to feature logos and text using Bootstrap columns – which work beautifully from desktop to mobile. We've also added different colors to the columns to help distinguish each section without overpowering the content. 

These columns are great for promoting your social media channels in a big way. While most websites simply sprinkle a set of icons for the usual suspects, these footer columns can highlight your most important platforms with some targeted text and imagery. While we're at it, here are a few other tips to keep in mind when adding social media icons to your website:

  • Be strategic about where you put your social icons. If you include them in your header, there's a better chance that visitors might bounce to those other platforms before they scan your site. If that's your strategy, great – but in most cases, you want traffic to stay ON your website.
  • Less is (still) more! Consider social platforms that offer different experiences for your audience based on the channel – and double down on the platforms that you're most active with or where your customers and prospects are. Too many channels and it gets confusing. Fast. 
  • Add some CTA text. Sure, a Facebook icon is fairly intuitive on its own. But if you have a chain of stores with their own Facebook pages that feature exclusive offers, you might want to offer some content to ride along with your social icon. 

Whatever your call to action is, don't let it be a footnote. Give it the space it needs to attract eyeballs and drive conversions – even if you have more than one. 

Now, strap on those boots, and let's make some columns...

Getting Started

We're using Bootstrap to build our section, go ahead and copy and paste the links below in the head section of your project's HTML file:

HTML

The HTML code below utilizes the Bootstrap grid and has three columns for three different social platforms and websites. Each column utilizes Bootstrap classes such as .d-flex, .align-items-center to handle the layout, alignment, and sizing of grid columns. Inside each column, there's a div element containing the logo of the website, a call to action text, and a link to the website. In this example, we used Facebook, e-mail, and E-Bay links but feel free to swap the icons and the links with your preferred social networks. Finally, we used three different classnames in each column to apply three different background colors for each link: .bg-blue, .bg-medium-blue, and .bg-dark-blue. We'll show you how to select and style each background color in the next section. 

CSS

The CSS code below is short and pretty straightforward. In the colors section, we chose the .bg-blue, .bg-medium-blue, and .bg-dark-blue classes we specified in the HTML code and assigned a hexadecimal color value for each of them so .bg-blue has a blue background .bg-medium-blue has a medium-dark blue background and .bg-dark-blue has a dark blue background. Feel free to change the classnames of colors in the HTML file. For example, for a red background color, you can use the classname .bg-red and assign a red hexadecimal color to it in the stylesheet.

And there it is. If you'd like to see how it looks before you invest the time in coding, check out the JSFiddle below:

Author

Get started today

Join people and businesses across the globe that trust Solodev.

We never share your information with anyone. Learn more

We use cookies to provide and improve our services. By using our site, you consent to cookies.