Using Bootstrap to Build Awesome Landing Pages

Learning HTML and CSS so you can build your own landing pages is pretty important if you want to make serious money with affiliate marketing. I know a lot of affiliates that simply direct link everything and although they may be successful at it now, the industry is constantly changing and traffic sources are getting more and more strict on what they’ll approve and what is not allowed. Direct linking is one of the things that is getting more and more difficult to get approved. For example, Facebook has stopped approving PeerFly direct links, unless you know a way around it. Once you have a pretty good grasp of HTML and CSS, there are a lot of different tutorials and scripts online that can help you improve your landing pages, but something I found about a year ago that I’ve been using on all of my projects that has helped me immensely is a framework called Bootstrap.

What is Bootstrap?

Bootstrap is a framework built using HTML, CSS, and Javascript that makes it easier for you to structure and design web pages. Basically, it’s a stylesheet that has most of the work already done for you. All you have to do is link to the stylesheet and you can take advantage of it’s awesome grid system, responsive design, HTML components, and cross browser capabilities. Not only that, but it’s built by Twitter and has a large community of developers behind it so it will only continue to get better!

Basic Bootstrap Theme

If you’ve taken a look through all the components Bootstrap has to offer you are probably ready to give it a test run. You can download the latest version of Bootstrap from GitHub or use the new BootstrapCDN. I’m now using the CDN primarily, but you are welcome to download the Bootstrap files from GitHub so you can take a look through them. In my example I am going to be linking to the CDN.

[code]




[/code]

This is your basic html page, but it links to the BootstrapCDN and has a div class of container. All of our code will be wrapped within this container and Bootstrap will use that to make the theme responsive, so it will work in all browser sizes (shown below).

Bootstrap Grid and Buttons

The Bootstrap grid is one of the main reasons I use it. The grid allows you to structure elements within your container by simple creating rows and then spanning elements within those rows. In my example code below, I’ve created one row (under the hero unit) that has 3 divs within that row. Bootstrap uses a 12 column grid system so as long as your row spans 12 columns everything will come out just the way you want it. I have created 3 columns that are evenly spaced so each spans 4 grid columns (which is shown in the code below).
Bootstrap buttons
The other big selling point for Bootstrap is it’s awesome buttons. There are 7 different buttons classes available and each can be created in 3 different sizes. These buttons make it really easy to setup an awesome call to action button and you can test the different classes to see which one gets the best click through rate for your campaign. I’ve found that the orange button (btn-warning) has worked best for me so far.

Pro Tip: If you’re looking to test a bunch of great looking call to action buttons check out the CSS3 button generator at css3button.net.

The Hero Unit

Bootstrap was built with marketers in mind. Nothing proves that more than one of the awesome components they included, the hero unit.

The hero unit is a large attention grabbing component you can easily add to your Bootstrap page by including a div with the class hero-unit. I’ve included one in my example below with a big headline, some text, and a big call to action button. This is also a great place to include an image (or you could change the hero-unit background image) and some bullet points.

Responsive Design

Responsive design is something that a lot of affiliate marketers miss when creating their landing pages. It’s important your landing page looks good on any screen resolution or you will miss out on conversions. If your call to action button is not visible it is unlikely that person will convert for you. Here are two screenshots of my Bootstrap demo at two different screen resolutions:

1280×800

Bootstrap demo 1280x800

800×600

Bootstrap demo 800x600

As you can see, the design is setup to respond to the resolution size and in both cases everything looks good and my call to action is visible.

Demo Code

Here is the HTML code for the example from above:

[code]


Landing Page Demo

Big Headline!

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Get Exclusive Access!
Learn More

Selling Point 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Learn More

Selling Point 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Learn More

Selling Point 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Learn More


[/code]

Feel free to use and modify this code as you please. As you start working with Bootstrap you will find more and more components that you can use within your landing pages. Recently, I added the progress bar to one of my campaigns and it started performing much better. There is also a nice set of Javascript components you can add to increase the functionality of your landing page. Again, test these things to see what helps improve your click through rate and overall conversion rate.

Being able to pre-sell an affiliate offer can really help improve the performance of your campaign and if you have the right tools, creating a good looking landing page to pre-sell can easily be done. Bootstrap is a great resource for any affiliate marketer looking to take their campaigns to the next level. Please let me know if you have any questions. I have created hundreds of pages using Bootstrap and I’ve spent many late nights trying to figure it all out, so I can definitely help. Let’s get some campaigns up and make some money!

Discussion

  1. Brad Madiuk
  2. Robert Ryslavy
  3. Daniel
  4. Lloyd Adams
    • Luke
  5. Rauff
  6. Ilya
  7. Axel
    • Luke
  8. Nathan
    • Luke
  9. James

Leave a Reply

Did you know I launched an affiliate marketing forum?Check out affLIFT!
+