Using Bootstrap to Build Awesome Landing Pages

This article is OLD

This article was published 5 years, 3 months ago. Please keep in mind that the information may be outdated. Post a comment below if you have any questions.

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!

Post a comment

16 thoughts on Using Bootstrap to Build Awesome Landing Pages

  1. I use Bootstrap for all of my new projects. It’s extremely versatile, easy to use and learn and has a full set of documentation that is so simple. I have 2 projects ongoing right now that use it and it looks great!

  2. Thanks for the lovely post,My mental block is creation of landing pages like lot of affiliate’s,Looks like have to go through bit of learning curve.

  3. Hi Luke,

    thanks again for a great insights shared with us. This looks extremely helpful and I will try to utilize it when creating my next landing page.

    Robert

  4. I “discovered” Twitter Bootstrap a few months ago and have used it for a few work-projects to build more business-oriented web-apps (it’s awesome for admin-related backends). Never really thought about doing regular websites but you’re right, they’re perfect for landing pages! (I have a thing about the oh-too common IM landing pages that all seem to be based on the same lousy template)

  5. HI:

    Was just going to try AffPortal, and use their landing page maker. What wrong with that if what my main problem is getting landing pages up fast with even dynamic KW insertion?

    Yes, I think it would be good to learn my css and html better, but this AffPortal has tools I think I should be using to get into PPV, which sounds like a more responsive traffic source by the sounds of it.

    Luke also likes Search7, and I guess I wouldn’t need the AffPortal if I was going to just do 7Search and use this “Bootstrap” to build my landing pages.

    Then again, If I need the landers up fast, this Affportal has this new landing page maker that looks like it really rocks!

    If you haven’t heard Luke talking about AffPortal, see what I’m talking about. Click below.
    http://freetrialit.com/AffPortal

    1. Fair enough, but with building your own and not using a generator, you have full control. Sure, it might take a little longer, but with a little programming skill you can do everything and more that you mentioned. Since you put up such a good argument, I’ll allow the affiliate link in your comment 😉 🙂

  6. Hi Luke, one question, It is necessary to know HTML in order to use Bootstrap?
    Do you know any free tool which I can use to create landing pages fast without knoledge of HTML?

    Thanks.

    1. I’ve checked it out. It seems to be pretty dynamic. I prefer to create from scratch, but if you want to use WordPress that seems pretty good.

  7. Im a Newbie and i Just got accepted into a CPA network and i have been reading some stuff on Luke’s blog and i have the following questions.
    1. Do i need to buy a domain name and hosting for the Landing page
    2. Whats the idea of VPS? And what is it used for?

    Thanks

    1. Yes, you would need a domain and hosting for landing pages. I recommend HostGator (use coupon lukepeerfly for 25% off). A VPS is a “virtual private server”, which is just a more powerful hosting solution. HostGator offers both VPS and shared hosting.

  8. Bootstrap is pretty amazing! I just heard about this library a week ago and started using it already and it has saved me a ton of time and looks great! Good thing you’ve shared this with your readers of your blog as well because it would definitely be a great resource for landing page creation.

Leave a Reply

Your email address will not be published. Required fields are marked *

Let's Make Some Money!

Want to learn how to make more money online? Join my mailing list today!

I hate spam as much as you. I will only send you awesome emails.

Click here to close this pop up if you already are subscribed.

I only send out a few emails a month, but they'll be packed with:

  • Traffic source reviews
  • Landing page templates
  • Tools you NEED in your arsenal
  • Hot affiliate offers