Book Image

Bootstrap Site Blueprints Volume II

By : Matt Lambert
Book Image

Bootstrap Site Blueprints Volume II

By: Matt Lambert

Overview of this book

Bootstrap is the most popular open source project on GitHub today. With a little bit of know-how, this massively popular CSS framework can leveraged for any type of complex web application or website. Bootstrap Site Blueprints Volume II will teach you to build these types of projects in an easy-to-understand fashion. The key to any complex Bootstrap project is a strong development foundation for your project. The book will first teach you how to build a Bootstrap development environment using Harp.js, Node, and Less. In the next chapters, we’ll build on this foundation by creating restaurant and mobile-first aggregator projects. Once you’re warmed up, we’ll move on to more complex projects such as a wiki, a new magazine, a dashboard, and finally a social networking website. Whether you are brand new to Bootstrap or a seasoned expert, this book will provide you with the skills you need to successfully create a number of popular web applications and websites.
Table of Contents (14 chapters)
Bootstrap Site Blueprints Volume II
Credits
About the Author
About the Reviewer
www.PacktPub.com
Preface
Index

The Profile template


The last template that we need to create for our wiki is the Profile page. This template will reuse some of the classes that we have already set up and add a bit more to create a complete user profile page. Take a look at this screenshot to understand what we'll be building:

Adding an avatar

We're going to update our page title section to include a user avatar for this page. Update the <h1> tag to include an image, as shown in this example:

<h1><img src="http://fillmurray.com/36/36" width="36" height="36" alt="Avatar"> John Smith</h1>

Also make sure you change the page title to be your user's name. In this case, I'm using John Smith. After you've finished this, add the Edit button back to the inline list so that you can allow the user to edit their profile:

<li>
  <button type="button" class="btn btn-default">Edit</button>
</li>

This concludes the page title setup. Let's move on to the body of the page. It is going to use the...