Basic Bootstrap Template with CDN for Landing Pages

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.

<!DOCTYPE html>
<html>
<head>
	<title>Title</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	<!-- Bootstrap core CSS -->
	<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" media="screen">
	
	<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js"></script>
	<![endif]-->
</head>
<body>
	
	
	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
	<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<!-- Include all compiled plugins (below), or include individual files as needed -->
	<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>

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!

Discussion

  1. Sorena
    • Luke
  2. kj
  3. Robert
    • Luke
  4. lwpack
  5. Vukasin
    • Luke
  6. Indrawan
  7. Robin
    • Luke
  8. Adetona Adewale
    • Luke
  9. manohara
    • Luke
    • Luke
  10. Brenda
  11. tmstmx
    • Luke
  12. tmstmx

Leave a Reply

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