This is the first in a series of posts that will serve as a mini-course in using the Bootstrap web framework to eventually build a custom WordPress theme.
What is Bootstrap?
This is what the exact same code snippet looks like in a browser with and without the inclusion of Bootstrap’s styles.
Here’s the HTML for this example:
<div class="container"> <div class="row"> <div class="col-md-6"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title"> <span class="glyphicon glyphicon-bookmark"></span> Quick Shortcuts </h3> </div> <div class="panel-body"> <div class="row"> <div class="col-xs-6 col-md-6"> <a href="#" class="btn btn-danger btn-lg" role="button"><span class="glyphicon glyphicon-list-alt"></span> <br />Apps</a> <a href="#" class="btn btn-warning btn-lg" role="button"><span class="glyphicon glyphicon-bookmark"></span> <br />Bookmarks</a> <a href="#" class="btn btn-primary btn-lg" role="button"><span class="glyphicon glyphicon-signal"></span> <br />Reports</a> <a href="#" class="btn btn-primary btn-lg" role="button"><span class="glyphicon glyphicon-comment"></span> <br />Comments</a> </div> <div class="col-xs-6 col-md-6"> <a href="#" class="btn btn-success btn-lg" role="button"><span class="glyphicon glyphicon-user"></span> <br />Users</a> <a href="#" class="btn btn-info btn-lg" role="button"><span class="glyphicon glyphicon-file"></span> <br />Notes</a> <a href="#" class="btn btn-primary btn-lg" role="button"><span class="glyphicon glyphicon-picture"></span> <br />Photos</a> <a href="#" class="btn btn-primary btn-lg" role="button"><span class="glyphicon glyphicon-tag"></span> <br />Tags</a> </div> </div> <a href="http://www.jquery2dotnet.com/" class="btn btn-success btn-lg btn-block" role="button"><span class="glyphicon glyphicon-globe"></span> Website</a> </div> </div> </div> </div> </div>
As you can see, there is a pretty dramatic difference between the list of links without styling and the Bootstrap themed links. The magic of Bootstrap rests in its use of CSS styling to modify the placement and appearance of web elements with minimal additional HTML coding.
This first lesson will introduce some of the basics of Bootstrap. It starts with browsing through some websites that use Bootstrap to give a sense of what Bootstrap components look like. Then it moves on to cut-and-paste coding to begin laying out a static page using Bootstrap components, with the goal of getting something that vaguely resembles someone else’s Bootstrap page layout.
Step 1: Check out Bootstrap in Action
A good way to learn how to use a new tool like Bootstrap is by seeing it in action and then trying to imitate what you see.
Since this course is designed to not do anything for you, but rather to guide you through the learning process, I’m only providing a few links to pages containing galleries of sites that employ Bootstrap. Check out the galleries and find a few examples that you find most attractive.
Try to focus on layout, colors, typography, and to a lesser degree, site structure. Don’t worry about things like graphics or content since those are things you will plug in once you are finished. You probably won’t find a site that contains all of the design elements in a single place, so pick a few sites, each with aspects that you find appealing.
Step 2: Find Some Bootstrap Templates
Once you have some sense of the design elements you want to include in your end product, the next step is to look for a base template that might serve as a good starting point.
Step 3: Play with Bootstrap!
Now that you have a base template, it’s time to get our feet wet with some HTML coding. Don’t worry too much if you don’t really understand HTML, we’re not going to be doing any major editing yet. For now we’re just going to use copy-paste-coding, meaning that all you need to do is to copy-paste code snippets from one place to another. But a getting a basic understanding of the structure of an HTML document might be useful if everything just looks Greek to you.
The goal of this step is to start putting together Bootstrap components to make your template look more like the demo pages you found in the first step. This means taking the different templates you found, cutting-and-pasting chunks of code, and modifying your base template until it is a fairly decent representation of the demo site you found.*
Note: the demo site you found might have used a bunch of trickery to do cool things like making tumblr-esque blocks fit together like a mosaic, or to animate things, or make wallpapers do funky scrolling things. Don’t worry about those things for now. Just try to get the components to look roughly similar. The trickery will have to wait until later…
You have three options here, and I suggest trying all three to see which works best for you, but eventually you’ll end up using the first option so might as well get comfortable with it sooner than later. The first option is to use a text or HTML editor and edit the raw HTML from your template files and preview your changes in a browser. The second is to use a web-based tool to “playground” your code snippets and view them in almost real-time. The third is to use a web-based graphical interface for laying out Bootstrap components.
For the first option, I recommend using a text editor such as TextMate (OS X), Sublime Text (OS X and Windows), Notepad++ (Windows), or whatever happens to be your personal preference if you’re on Linux (since if you’re using it I assume you already have an allegiance to either vim or emacs…esc:q!). When you make changes, save the file and reload your browser. Simple as that. When things don’t look quite right or as you had hoped, right click on in your browser on the thing that doesn’t look quite right, and clink on “inspect element” or whatever is your browser’s equivalent (try Google if you’re not sure). Check out the code snippet for that component and make sure that it’s in the right place relative to other the other components on the page (the components should be highlighted on the page as you scroll over the code chunks). This debugging tool is going to be your friend over the next several lessons, so get comfortable using it.
The third option is to use a visual layout editor. I recommend checking out Divshot. They have a free plan (still requires registering) that should be plenty for this mini-course. Try it out and definitely check out their very thorough tutorial. Easel.io is also very slick and works well, and like divshot, they have a free plan, but theirs only lets you save up to 3 pages.
You might also check out Pingendo, which is a free visual editor that runs on Windows or OS X, but is still very rough around the edges and isn’t very drag-and-drop friendly. There is also LayoutIt which seems like it works decently, but I haven’t spent enough time playing with it to know how well it works compared to divshot or easel.io.
For now, save your work and take a well deserved break.
If you got stuck along the way, remember, Google is your friend when you’re learning something new. See if you can google your way to the next step, or post a comment here and hopefully I (or some other kind soul) will be able to help you.