Using Bootstrap

bootstrap
css

#1

The Bootstrap framework is one of the most popular CSS frameworks out there. It provides pleasant styling, formatting, and layout to a page without the time it takes to build a brand new style set. Getting started with it on Cloud9 is just as easy as it is in any other environment.

Including Bootstrap

The very easiest and quickest way to use Bootstrap is by way of CDN. CDN stands for content delivery network and is an effective way of incorporating Bootstrap (and other frameworks) into your app without needing to download it yourself.

To start, open up a Cloud9 workspace (any kind of workspace) and create an index.html file, adding the following markup in it:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Hello world from Cloud9!</title>
    </head>
    
    <body>
        <h1>Hello world!</h1>

    </body>
</html>

Using the CDN, you can very quickly include Bootstrap by copying and pasting the following lines of code into your <head> section just below the line that says <title>Hello world from Cloud9!</title>.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

Now click Preview > Live Preview File (index.html) to see what we’ve got.

Note: By not including http or https before the CDN link (//maxcdn…), the link will use whichever protocol is being used by the rest of your page.

Your First Bootstrap Page

Now that we have Bootstrap included and at our disposal, let’s start to use some of its components. Bootstrap buttons are styled nicely so let’s take a look at those. There are several different kinds of buttons so paste the following lines into your HTML file below the Hello World heading.

<button>Regular Button</button>
<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-info">Info Button</button>
<button class="btn btn-success">Success Button</button>
<button class="btn btn-warning">Warning Button</button>
<button class="btn btn-danger">Danger Button</button>

Your preview should automatically refresh so you can see some snazzy buttons on your page now. Let’s see one more thing we can do with Bootstrap before letting you loose.

Using Bootstrap’s predefined classes, we can structure our page in a grid layout. Add the following markup below all your buttons:

<div class="row">
  <div class="col-xs-4">Left section</div>
  <div class="col-xs-4">Middle section</div>
  <div class="col-xs-4">Right section</div>
</div>

Your preview will now show three different sections on your page. Bootstrap separates your page into 12 different columns. You can break up your page however you choose, whether it’s with 3 even sections of 4 columns each as we’ve done, or if you want to make a large section that has 8 columns and a small sidebar that has 4 columns; the layout is up to you.

We’ve just barely scratched the surface of what you can do with Bootstrap but now that you have included Bootstrap (whether by CDN or local hosting) you can go ahead and build an app with it and toy with all its other features.

Getbootstrap.com has some great examples of standard sites laid out with Bootstrap here. Those are good starting points to base your layout and experiment with what gives you the look and feel you’re going for. See here for more info about Bootstrap’s features.


Why won't Bootstrap work?
What workspace type to use with Bootstrap?
Tutorials - Table of Contents