Basic Bootstrap Template with CDN for Landing Pages

Basic Bootstrap Template with CDN

This article is OLD

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

I started using Bootstrap for my landing pages and websites shortly after it was first released years ago. Bootstrap is an amazing framework for developing mobile first responsive websites.

Mobile first means that the framework is setup to work with mobile devices and then expand for desktop browsers and tablets. Up until fairly recently, this was the exact opposite of how web developers created websites. Websites were developed to look great on a desktop browser, but as mobile traffic started to grow many developers would build their website so it would look good on mobile too. Now, we build for mobile knowing the desktop experience will look fine as well.

Bootstrap makes it extremely easy to build for both mobile and desktop. When you use Bootstrap, your website is almost sure to look good on both.

This blog design uses the Bootstrap framework. I used it (v2.3.2) with FPTraffic and Skrayp (v3.2.0).

Needless to say, I really like Bootstrap and I recommend it to everyone. Aside from being responsive and making your website or landing page look good with any browser, the framework also comes with all the key components you are going to need with web development. Great looking buttons, hero units, forms, tables, progress bars, and navigation menus can be coded up with very little work.

But wait, there’s more!

CDN

Because Bootstrap is so popular, there are some great CDN sources you can use when including it on your website or landing page.

CDN, short for content delivery network, is an awesome tool you can use to speed up the page load of your pages and decrease your overall bandwidth use. Essentially, it’s a version of the file you want to use that is hosted by a CDN. CloudFlare is the major CDN network that I use in the example below.

Bootstrap CDN Template

One trick you can use to speed up the development of your landing pages (aside from using Bootstrap) is to setup a template that you can easily copy and paste into a new file when you start development. My IDE (integrated development environment) of choice, Coda, has a cool feature that lets you create “Clips” of code that you can then easily access. My most used Clip is definitely my Bootstrap CDN template, shown below.

This template has everything you need for the basic Bootstrap template. The HTML, CSS, and JavaScript for Bootstrap is all included and hosted via the CloudFlare CDN so you don’t even have to worry about uploading any files to your server.

Once you have that basic template setup, all you need to do is add your container, rows, and the content of your page.

Here is an example I made in about 15 minutes.

Bootstrap Responsive Template Demo

Easy! Now, how well will it convert? We’ll see 🙂

If you are not using Bootstrap or CDNs on your landing pages then I highly recommend you give it a try. If you are not building landing pages, then that is the first step! Learn how to build landing pages to help take your campaigns to the next level.

I will be doing another article soon showing how to setup a survey landing page and promote it on Plenty of Fish.

Let me know if you have any questions. Let’s make some money!

Post a comment

24 thoughts on Basic Bootstrap Template with CDN for Landing Pages

  1. Great article as usual Luke. I really would like to know how to use this template.
    Would put the coding on a site that I already have up?

    Thanks again for the knowledge!

  2. I always use Bootstrap in my landing page, It’s fit automatically on any device, yes all most all the devices.

    Most of time, I spy on other marketers ads, and found they are also using same framework 😀

    Don’t think, you need to know more about html or CSS, the guidelines by Bootstrap is solid, you can learn in few minutes. 🙂

  3. I copied the code. It would not open in Sublime Text. It took me to a Google search page in IE. Thanks –

    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24

    Title


  4. Bootstrap is great, but I wonder if it isn’t overkill for a simple lander, particularly on mobile. I worry about page load time from all the css and js.

  5. Hey Luke

    Great article about Bootstrap, liked this one! I’ve been also recommending this lately and I am even considering writing an article about it.

    By the way, I really like the new design of the blog. Highly improved the overall look and feel, and I also hope I will be seeing more posts from you in the future.

  6. Hi Luke

    I’m a newbie in CPA and I don’t know how to build a landing page with source code, I just can build landing page with themes (drag and drop).
    Is there any recomendation themes in Bootstrap that works well with PeerFly offers?

    Thanks

  7. Great information.
    I’m new aff and can do a little coding, but I get confusing here.
    As I know CDN can support only image or simple html, but not javascript.
    I think this code call a js file from cloudflare.
    So Cloudflare CDN does support javascript landing page?

    There is another question.
    This code is put in your landing page index.html file, right?
    Then this index file will be put on your VPS or CDN?

    Thanks.

  8. Nice post luke. I working online since last 2 years and I am using WordPress to design my website/landing pages. I saw this post and I researched about Bootstrap and it is awesome to design website, but I am very weak in coding work. Is there any course to learn online Bootstrap?

  9. Hi luke, thank you for the post , I have only one question, if we use the landing page for a peerfly offer, the click action button in the landing page should redirect you to the peerflyoffer link is correct?

    But i’m thinking if this is to much sites redirection until the user arrived to the sign up page is’nt it?
    To make my poit more clear I take an example:
    I create a landing page which button sent me to the peerfly url (http://trkur3.com/xxx/xxx) and this link redirect the user to the cbs peerfly offer : cbs.com/all-access so if the user have interest in the offer he will got to cbs.com/all-access/signup, So i’m thinking if there is a way I can sent the user from my landing page to the cbs.com/all-access/signup through the peerfly offer link to avoid many url redirections

    Thanks a lot and sorry for my english, newbie affiliate user

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