2014-07-11 02:54:06 +02:00
---
layout: page
title: Quick start
---
2014-07-10 11:24:13 +02:00
2015-01-20 05:03:08 +01:00
Quickly add Bootstrap to your project via the [Bootstrap CDN ](http://bootstrapcdn.com ), graciously provided by the [MaxCDN ](http://www.maxcdn.com/ ) folks.
Copy-paste the stylesheet `<link>` into your `<head>` before all other stylesheets.
2014-07-10 11:24:13 +02:00
2015-03-09 15:07:46 +01:00
< div class = "alert alert-warning" >
< strong > Heads up!< / strong > Much of this page will be inaccurate during the v4 alpha releases.
< / div >
2014-11-26 02:40:08 +01:00
2014-07-10 11:24:13 +02:00
{% highlight html %}
< link rel = "stylesheet" href = "{{ site.cdn.css }}" >
{% endhighlight %}
2014-07-10 19:23:15 +02:00
Then, add the Bootstrap JavaScript—and jQuery—near the end of your pages. It's best placed right before the closing `</body>` tag. Be sure to place jQuery first as our code depends on it.
2014-07-10 11:24:13 +02:00
{% highlight html %}
2014-07-10 19:23:15 +02:00
< script src = "{{ site.cdn.jquery }}" > < / script >
2014-07-10 11:24:13 +02:00
< script src = "{{ site.cdn.js }}" > < / script >
{% endhighlight %}
Be sure to have your pages set up with the latest design and development standards. That means:
* Using an HTML5 doctype
2014-12-30 21:45:24 +01:00
* Forcing Internet Explorer to use its latest rendering mode ([read more]())
2014-07-10 11:24:13 +02:00
* And, utilizing the viewport meta tag.
Put it all together and your pages should look like this:
{% highlight html %}
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< link rel = "stylesheet" href = "{{ site.cdn.css }}" >
< / head >
< body >
< h1 > Hello, world!< / h1 >
2014-07-10 19:23:15 +02:00
< script src = "{{ site.cdn.jquery }}" > < / script >
2014-07-10 11:24:13 +02:00
< script src = "{{ site.cdn.js }}" > < / script >
< / body >
< / html >
{% endhighlight %}
And that's it. Happy Bootstrapping!
