Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying Bootstrap Site Blueprints
  • Table Of Contents Toc
Bootstrap Site Blueprints

Bootstrap Site Blueprints

By : David Cochran, Ian Whitley
4.2 (10)
Buy this Book
close
close
Bootstrap Site Blueprints

Bootstrap Site Blueprints

4.2 (10)
By: David Cochran, Ian Whitley
Buy this Book

Overview of this book

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. 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.
Table of Contents (16 chapters)
close
close
close
Bootstrap Site Blueprints
Icon
Bootstrap Site Blueprints
Credits
Icon
Credits
About the Authors
Icon
About the Authors
About the Reviewers
Icon
About the Reviewers
www.PacktPub.com
Icon
www.PacktPub.com
Preface
Icon
Preface
Lock Free Chapter
1
Getting Started with Bootstrap
Icon
Getting Started with Bootstrap
Icon
Quantity and quality
Icon
Downloading Bootstrap
Icon
Preparing a project template folder
Icon
Pulling in the Bootstrap files
Icon
Taking inventory
Icon
Setting up the HTML template file
Icon
Giving your site a title
Icon
Providing a navbar markup
Icon
Compiling and linking default Bootstrap CSS
Icon
Summary
2
Bootstrappin' Your Portfolio
Icon
Bootstrappin' Your Portfolio
Icon
What we'll build
Icon
Surveying the exercise files
Icon
Marking up the carousel
Icon
Creating responsive columns
Icon
Turning links into buttons
Icon
Understanding the power of LESS
Icon
Customizing Bootstrap's LESS according to our needs
Icon
Adding the logo image
Icon
Adjusting nav item padding
Icon
Adding icons
Icon
Adding Font Awesome icons
Icon
Adjusting the navbar icon color
Icon
Adjusting the responsive navbar breakpoint
Icon
Styling the carousel
Icon
Tweaking the columns and their content
Icon
Styling the footer
Icon
Recommended next steps
Icon
Summary
3
Bootstrappin' a WordPress Theme
Icon
Bootstrappin' a WordPress Theme
Icon
Downloading and renaming the Roots theme
Icon
Installing the theme
Icon
Configuring the navbar
Icon
Bringing in our home page content
Icon
Customizing a page template
Icon
Understanding the Roots base template
Icon
Creating a custom base template
Icon
Using custom fields for a custom structure
Icon
Creating a custom content template
Icon
Putting the footer content in place
Icon
Surveying the Roots assets folder
Icon
Swapping design assets
Icon
Connecting our stylesheet
Icon
Connecting our JavaScript files
Icon
Adding logo images to the navbar and footer
Icon
Adding icon links
Icon
Adding back WordPress-specific styles
Icon
Summary
4
Bootstrappin' Business
Icon
Bootstrappin' Business
Icon
Sizing up our beginning files
Icon
Creating a complex banner area
Icon
Adding utility navigation
Icon
Making responsive adjustments
Icon
Implementing the color scheme
Icon
Styling the collapsed navbar
Icon
Designing a complex responsive layout
Icon
Laying out a complex footer
Icon
Summary
5
Bootstrappin' E-commerce
Icon
Bootstrappin' E-commerce
Icon
Surveying the markup for our products page
Icon
Styling the breadcrumbs, page title, and pagination
Icon
Adjusting the products grid
Icon
Styling the options sidebar
Icon
Summary
6
Bootstrappin' a One-page Marketing Website
chevron up
Icon
Bootstrappin' a One-page Marketing Website
Icon
Overview
Icon
Surveying the starter files
Icon
Viewing the page content
Icon
Adjusting the navbar
Icon
Customizing the jumbotron
Icon
Beautifying the features list
Icon
Tackling customer reviews
Icon
Creating attention-grabbing pricing tables
Icon
Adding the final touches
Icon
Adding ScrollSpy to the navbar
Icon
Summary
1
Optimizing Site Assets
Icon
Optimizing Site Assets
Icon
Optimizing images
Icon
Optimizing CSS
Icon
Optimizing JavaScript
Icon
Our optimized results
2
Implementing Responsive Images
Icon
Implementing Responsive Images
Icon
Considering our portfolio carousel
Icon
Choosing a solution from the available solutions
Icon
Our end results
3
Adding Swipe to the Carousel
Icon
Adding Swipe to the Carousel
Icon
Considering our options
Icon
Getting and including the TouchSwipe plugin
Icon
Initializing TouchSwipe
4
Index
Icon
Index

Chapter 6. Bootstrappin' a One-page Marketing Website

We've developed some significant skills with Bootstrap. Now it's time to bring an extra touch of beauty and creativity to help our clients achieve their full online marketing potential. So, let's create a beautiful one-page upscale marketing site.

We'll cover the following things in this chapter:

  • A large introductory carousel with a customized responsive welcome message

  • A section for customer reviews with images and captions laid out in the masonry format

  • A features list with large Font Awesome icons

  • A signup section with custom-designed pricing tables

  • A ScrollSpy navbar with animated scrolling behavior

CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
Bootstrap Site Blueprints
End of Section 6
Next Section
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist download Download options
font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful
Order Page Read Now

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon