Create A File Download CTA Button With Bootstrap 4

To create a file download CTA button with bootstrap 4, we first need to go to our root directory and either upload or choose the file that we wish to have all visitors download. For the best results we are going to convert off file or files to a compressed zip file. The newly-created zip file is the one that will be downloaded to the visitor’s browser when they click on the button that we are about to create. When the zip file has been created and resides in the root directory where our index. html file is, we can move on to creating the button to download it.

As bootstrap has no CMS by default, we will need to use a text editor to write the code for a button. Any text editor will do, if you do not have one you can download the great brackets text editor from here, it’s absolutely free, it’s a great little program and it’s the editor that we will be using for this video.

Once you have your text editor downloaded and installed, let’s go ahead and create a file download CTA button. Open up your index. html file with your text editor, or whatever page you choose to have your button on. For our example we are using the homepage or index.html file.

 When we built this bootstrap site we initially built it with some fantastic wireframing software called blueprints. The blueprints software enabled us to create the outline for this one page site in about 5 minutes. If you’d like to use blueprints to build your site you can download it from here. We also have an 80% off code for blueprints software, just enter System22-BPAPP-80 at checkout. As we have already built a site with blueprints, our button is in place and just need to have the button text changed, and, of course, the link added to download the file.

First let’s change the button text to something like ‘download images’, or whatever works in your case. When this is done, we just need to add a link to the file to the button. To do this we need to add the file name to the button link text. The button itself is wrapped in an ‘a’ tag. Just after the opening a tag you will see the word ‘href’ followed by an equals sign (=), and a set of inverted commas (“”). In between the inverted commas is where we need to paste the file name, in our example the file is called images.zip – So our code will look like <a href=”images.zip”………….. Just need to now save our changes in Brackets. Then upload both the download file and our page file to the online server, to the home directory.

That is how easy it is to create a file download CTA button with bootstrap 4. Now when your visitors go to your site and click on that button, the file will be downloaded to their default download location, usually in documents and downloads folder. The downloader can then unzip the file and make use of whatever content you have put in there for them.