Bootstrap Site Blueprints

Bootstrap Site Blueprints
eBook: $26.99
Formats: PDF, PacktLib, ePub and Mobi formats
save 15%!
Print + free eBook + free PacktLib access to the book: $71.98    Print cover: $44.99
save 6%!
Free Shipping!
UK, US, Europe and selected countries in Asia.
Also available on:
Table of Contents
Sample Chapters
  • Learn the inner workings of Bootstrap 3 and create web applications with ease
  • Quickly customize your designs working directly with Bootstrap’s LESS files
  • Leverage Bootstrap’s excellent JavaScript plugins

Book Details

Language : English
Paperback : 304 pages [ 235mm x 191mm ]
Release Date : February 2014
ISBN : 1782164529
ISBN 13 : 9781782164524
Author(s) : David Cochran, Ian Whitley
Topics and Technologies : All Books, Web Development, Open Source

Table of Contents

Chapter 1: Getting Started with Bootstrap
Chapter 2: Bootstrappin' Your Portfolio
Chapter 3: Bootstrappin' a WordPress Theme
Chapter 4: Bootstrappin' Business
Chapter 5: Bootstrappin' E-commerce
Chapter 6: Bootstrappin' a One-page Marketing Website
Appendix A: Optimizing Site Assets
Appendix B: Implementing Responsive Images
Appendix C: Adding Swipe to the Carousel
  • Chapter 1: Getting Started with Bootstrap
    • Quantity and quality
      • Improving with age
      • The power of leaner CSS
    • Downloading Bootstrap
      • The files you'll have
    • Preparing a project template folder
      • Getting H5BP
      • Deleting unnecessary Boilerplate files
      • Evaluating the Boilerplate .htaccess file
      • Updating required Boilerplate files
      • Updating the favicon and touch icons
    • Pulling in the Bootstrap files
      • Fonts
      • JavaScript
      • Holding off on the CSS
      • Bringing the LESS files over
    • Taking inventory
    • Setting up the HTML template file
    • Giving your site a title
      • Adjusting the outdated browser message
      • Setting up major structural elements
    • Providing a navbar markup
    • Compiling and linking default Bootstrap CSS
      • Compiling Bootstrap CSS
      • Completing the responsive navbar
      • Troubleshooting
      • Adding support for Internet Explorer 8
    • Summary
  • Chapter 2: Bootstrappin' Your Portfolio
    • What we'll build
    • Surveying the exercise files
    • Marking up the carousel
    • Creating responsive columns
    • Turning links into buttons
    • Understanding the power of LESS
      • Nested rules
      • Variables
      • Mixins
      • Operations
      • Importing files
      • The modular file organization
    • Customizing Bootstrap's LESS according to our needs
      • Customizing variables
        • Importing our new variables
        • Editing navbar variables
    • Adding the logo image
    • Adjusting nav item padding
    • Adding icons
    • Adding Font Awesome icons
    • Adjusting the navbar icon color
    • Adjusting the responsive navbar breakpoint
    • Styling the carousel
      • Setting Font Awesome icons for the controls
      • Adding top and bottom padding
      • Forcing images to their full width
      • Constraining the carousel height
      • Repositioning the carousel indicators
      • Styling the indicators
    • Tweaking the columns and their content
    • Styling the footer
    • Recommended next steps
    • Summary
  • Chapter 3: Bootstrappin' a WordPress Theme
    • Downloading and renaming the Roots theme
    • Installing the theme
    • Configuring the navbar
    • Bringing in our home page content
      • Adding images
    • Customizing a page template
    • Understanding the Roots base template
    • Creating a custom base template
    • Using custom fields for a custom structure
    • Creating a custom content template
      • Building our carousel from custom fields
      • Adding our content columns from custom fields
    • Putting the footer content in place
    • Surveying the Roots assets folder
    • Swapping design assets
    • Connecting our stylesheet
    • Connecting our JavaScript files
    • Adding logo images to the navbar and footer
    • Adding icon links
    • Adding back WordPress-specific styles
    • Summary
  • Chapter 4: Bootstrappin' Business
    • Sizing up our beginning files
    • Creating a complex banner area
      • Placing a logo above the navbar
      • Reviewing and checking navbar dropdown items
    • Adding utility navigation
    • Making responsive adjustments
    • Implementing the color scheme
    • Styling the collapsed navbar
    • Designing a complex responsive layout
      • Adjusting the medium and wide layout
      • Adjusting headings, font sizes, and buttons
      • Enhancing the primary column
      • Adjusting the tertiary column
      • Fine touches for multiple viewports
    • Laying out a complex footer
      • Adjusting for tablet-width viewports
      • Adding a targeted responsive clearfix
      • Refining the details
    • Summary
  • Chapter 5: Bootstrappin' E-commerce
    • Surveying the markup for our products page
    • Styling the breadcrumbs, page title, and pagination
    • Adjusting the products grid
    • Styling the options sidebar
      • Setting up basic styles
      • Styling the Clearance Sale link
      • Styling the options list
      • Adding Font Awesome checkboxes to our option links
      • Using LESS mixins to arrange option links in columns
      • Adjusting the options list layout for tablets and phones
      • Collapsing the options panel for phone users
    • Summary
  • Chapter 6: Bootstrappin' a One-page Marketing Website
    • Overview
    • Surveying the starter files
    • Viewing the page content
    • Adjusting the navbar
    • Customizing the jumbotron
      • Refining the jumbotron message design
    • Beautifying the features list
    • Tackling customer reviews
      • Positioning and styling the captions
      • Refining the caption position
      • Adding Bootstrap grid classes
      • Downloading and linking up the Masonry JavaScript plugin
      • Initializing Masonry JavaScript on our reviews layout
      • Cutting and trimming our bricks
        • Adjusting for tiny screens
    • Creating attention-grabbing pricing tables
      • Setting up the variables, files, and markup
      • Beautifying the table head
      • Styling the table body and foot
      • Differentiating the packages
      • Adjusting for small viewports
      • Providing visual hierarchy to our tables
    • Adding the final touches
    • Adding ScrollSpy to the navbar
      • Animating the scroll
    • Summary
  • Appendix B: Implementing Responsive Images
    • Considering our portfolio carousel
    • Choosing a solution from the available solutions
      • Preparing our responsive images
      • Plugging in the JavaScript
      • Implementing the markup structure
      • Testing and adjusting
    • Our end results

David Cochran

David Cochran serves as an Associate Professor of Communication at Oklahoma Wesleyan University. He has been teaching Interactive Design since 2005. A passion for best practices induced him to avoid shortcuts and hew towards web standards. When Twitter Bootstrap was first released in August 2011, he recognized it as a tool that would speed up development while supporting best practices. Thus, he began folding Bootstrap into his university courses, much to the benefit of his students.

In 2012, David produced a Bootstrap 2.0 tutorial series for He also published a first short book about Bootstrap, Twitter Bootstrap Web Development How-To , Packt Publishing.

In his spare time, David blogs about web design at He also leads a media, design, and strategy company named BitBrilliant.

Ian Whitley

Ian Whitley developed a passion for writing and literature at a young age. In 2010, he developed a deep interest in web development and decided to get involved in it. When the opportunity to help write a book on web development came up, it seemed like too good of an offer to pass up. He was one of the early adopters of Twitter Bootstrap when it was first released in 2011. With the help of David Cochran, he quickly conquered the system and has used it for many different web projects. Currently, he uses Bootstrap in relation to WordPress, using both in conjunction to create custom and creative solutions for his client. Living in the Bartlesville, OK, Ian is the lead developer for BitBrilliant, the company that David Cochran founded. He is always looking to further his skills—both for the web and in the many hobbies he pursues, which include leather working and writing.

Code Downloads

Download the code and support files for this book.

Submit Errata

Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.


- 2 submitted: last submission 22 Jul 2014

Page 145 | Errata type: Technical

While still in  _navbar.less, search for // Navbar, which will take  you to the  
navbar variables.

should be

While still in  _variables.less, search for // Navbar, which will take  you to the  
navbar variables.


Page 51  | Errata type: Code


@@navbar-default-border: should be @navbar-default-border:

navbar-default-color: @gray should be : @navbar-default-color: @gray;

Page 24 | Errata type: Technical

Point 1 under the MAC users section is:

The LESS app (free), which can be found at


It should be:

The Crunch app, which can be found at


Sample chapters

You can view our sample chapters and prefaces of this title on PacktLib or download sample chapters in PDF format.

Frequently bought together

Bootstrap Site Blueprints +    Haskell Data Analysis Cookbook =
50% Off
the second eBook
Price for both: $41.55

Buy both these recommended eBooks together and get 50% off the cheapest eBook.

What you will learn from this book

  • Set up a custom Bootstrap project
  • Customize and recompile Bootstrap’s LESS files
  • Incorporate custom icon fonts
  • Write your own LESS variables and mixins
  • Translate a Bootstrap design into a WordPress theme
  • Leverage Bootstrap’s powerful JavaScript plugins
  • Incorporate non-Bootstrap JavaScript plugins into your design
  • Optimize Bootstrap CSS and JavaScript for performance
  • Implement the PictureFill responsive images method
  • Add touch swipe functionality to the Bootstrap carousel

In Detail

Since its debut in August 2011, Twitter Bootstrap, now simply Bootstrap, has become by far the most popular framework for empowering and enhancing frontend web design. With Version 3, Bootstrap reaches an exciting new milestone, introducing a mobile-first responsive grid, new and powerful LESS mixins, and a lean code base optimized for modern browsers.

"Bootstrap Site Blueprints" is a hands-on guide to the inner workings of Bootstrap’s latest and greatest development milestone. In an easy-to-follow, step-by-step format, you’ll quickly get to know the ins and outs of Bootstrap while building a portfolio site, a WordPress theme, a business site, an e-commerce interface, and administration interface, and an upscale marketing site.

"Bootstrap Site Blueprints" guides you through the process of building different types of web applications, by leveraging the power of Bootstrap 3. In the process, you’ll experience the power of customizing and recompiling Bootstrap’s LESS files and adapting Bootstrap’s JavaScript plugins, to the design of an excellent user interface. While creating these layouts, you will quickly become comfortable with customizing Bootstrap to meet the needs of your specific projects. You will add custom icon fonts, customize and recompile Bootstrap’s powerful LESS files, and leverage Bootstrap’s excellent JavaScript plugins to create dynamic user interfaces.

By the end of this book you will be a more adept and efficient designer.


A hands-on guide with projects based on fictitious, but common, application development briefs, which will illustrate practical ways of applying responsive web design with Bootstrap.

Who this book is for

Whether you are a beginner or intermediate web developer, if you wish to make the most of Bootstrap, then this book is for you. You should be familiar with the fundamentals of HTML and CSS, and have some experience incorporating JavaScript plugins. Prior Bootstrap experience is optional.

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software