Bootstrap 4 Site Blueprints

Explore the robust features of Bootstrap 4 to create exciting websites through this collection of excellent hands-on projects

Bootstrap 4 Site Blueprints

This ebook is included in a Mapt subscription
Bass Jobsen, David Cochran, Ian Whitley

4 customer reviews
Explore the robust features of Bootstrap 4 to create exciting websites through this collection of excellent hands-on projects
$0.00
$39.99
$49.99
$29.99p/m after trial
RRP $39.99
RRP $49.99
Subscription
eBook
Print + eBook
Start 30 Day Trial
Subscribe and access every Packt eBook & Video.
 
  • 4,000+ eBooks & Videos
  • 40+ New titles a month
  • 1 Free eBook/Video to keep every month
Start Free Trial
 
Preview in Mapt

Book Details

ISBN 139781785889653
Paperback404 pages

Book Description

Packed with trade secrets, this second edition is your one-stop solution to creating websites that will provide the best experience for your users. We cover six popular, real-world examples, where each project teaches you about the various functionalities of Bootstrap 4 and their implementation.

The book starts off by getting you up and running with the new features of Bootstrap 4 before gradually moving on to customizing your blog with Bootstrap and SASS, building a portfolio site, and turning it into a WordPress theme. In the process, you will learn to recompile Bootstrap files using SASS, design a user interface, and integrate JavaScript plugins. Towards the end of the book, you will also be introduced to integrating Bootstrap 4 with popular application frameworks such as Angular 2, Ruby on Rails, and React.

Table of Contents

Chapter 1: Getting Started with Bootstrap
Quantity and quality
Downloading Bootstrap's source files
Tooling setup
Using Bootstrap CLI
Preparing a new Bootstrap project
Setting up major structural elements
Browser support
The Yeoman workflow
Troubleshooting
Summary
Chapter 2: Creating Your Own Build Process with Gulp
What are we going to build?
Bootstrap's build process
Installing Gulp in your project
Setting up environments for development and production
Installing Bootstrap via Bower
Creating a local Sass structure 
Preparing the JavaScript plugins
Modularization of your HTML
Creating a static web server
Putting it all together and creating the default task
Using the build process to finish your project
Styling the features
Styling the footer of your page
Running your template with Bootstrap CLI
JavaScript task runners are not required
Publishing your work on GitHub
Summary
Chapter 3: Customizing Your Blog with Bootstrap and Sass
Expected results and the process
Setting up your project and requirements
The power of Sass in your project
Importing files
Using the SCSS-linter for cleaner and more readable code
Strategies for customization with Sass
Writing your own custom SCSS code
The main part of your blog page
Styling the blog posts
Styling the side bar
The page footer
Reusing the SCSS code of the social buttons
Source code of this chapter
Summary
Chapter 4: Bootstrappin' a WordPress Theme
Installing WordPress and other requirements
Installing the JBST 4 theme
Installing the theme
Reusing the Sass code
Conflicts between WordPress and Bootstrap – predefined classes
Configuring the navbar
Giving your blog a page header
Don't forget the page footer
Styling your blog posts
The side bar of your blog
The off-canvas side bar
Applying style to the buttons
Styling the user comments on your pages
Adding a carousel to your page
Using Font Awesome in your theme
Using the masonry template
Child theming
Download at GitHub
Summary
Chapter 5: 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 Sass
Customizing Bootstrap's Sass according to our needs
Adding the logo image
Adding icons
Styling the carousel
Tweaking the columns and their content
Styling the footer
Recommended next steps
Summary
Chapter 6: Bootstrappin' Business
Sizing up our beginning files
Setting up the basics of your design
Creating a complex banner area
Adding utility navigation
Making responsive adjustments
Implementing the color scheme
Styling the collapsed navbar
Styling the horizontal navbar
Enabling Flexbox support
Designing a complex responsive layout
Laying out a complex footer
Setting up the markup
Summary
Chapter 7: 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
Adding a search form to your designing
Summary
Chapter 8: Bootstrappin' a One-Page Marketing Website
Overview
Surveying the starter files
Viewing the page content
Adding Font Awesome to our project
Adjusting the navbar
Customizing the jumbotron
Beautifying the features list
Tackling customer reviews
Creating attention-grabbing pricing tables
Adding the final touches
Adding ScrollSpy to the navbar
Summary
Chapter 9: Building an Angular 2 App with Bootstrap
Overview
Setting up your first Angular app
Adding routing to our app
Setting up navigation
Adding Bootstrap's HTML markup code to your app
Integrating Bootstrap's CSS code into the application
Downloading the complete code
What about Angular CLI?
Using React.js with Bootstrap
Other tools for deploying Bootstrap 4
Summary

What You Will Learn

  • Understand how Bootstrap compiles SASS code to static CSS and ES6 code into JavaScript code
  • Integrate Bootstrap into application frameworks such as Angular 2 (AngularJS), Ember, and React
  • Reuse Bootstrap’s SASS mixins and set responsive breakpoints in your designs
  • Customize Bootstrap’s SASS files and add your own in the process
  • Manage multiple rows of products in a complex responsive grid
  • Create a complete one-page scrolling website using Bootstrap’s components and plugins

Authors

Table of Contents

Chapter 1: Getting Started with Bootstrap
Quantity and quality
Downloading Bootstrap's source files
Tooling setup
Using Bootstrap CLI
Preparing a new Bootstrap project
Setting up major structural elements
Browser support
The Yeoman workflow
Troubleshooting
Summary
Chapter 2: Creating Your Own Build Process with Gulp
What are we going to build?
Bootstrap's build process
Installing Gulp in your project
Setting up environments for development and production
Installing Bootstrap via Bower
Creating a local Sass structure 
Preparing the JavaScript plugins
Modularization of your HTML
Creating a static web server
Putting it all together and creating the default task
Using the build process to finish your project
Styling the features
Styling the footer of your page
Running your template with Bootstrap CLI
JavaScript task runners are not required
Publishing your work on GitHub
Summary
Chapter 3: Customizing Your Blog with Bootstrap and Sass
Expected results and the process
Setting up your project and requirements
The power of Sass in your project
Importing files
Using the SCSS-linter for cleaner and more readable code
Strategies for customization with Sass
Writing your own custom SCSS code
The main part of your blog page
Styling the blog posts
Styling the side bar
The page footer
Reusing the SCSS code of the social buttons
Source code of this chapter
Summary
Chapter 4: Bootstrappin' a WordPress Theme
Installing WordPress and other requirements
Installing the JBST 4 theme
Installing the theme
Reusing the Sass code
Conflicts between WordPress and Bootstrap – predefined classes
Configuring the navbar
Giving your blog a page header
Don't forget the page footer
Styling your blog posts
The side bar of your blog
The off-canvas side bar
Applying style to the buttons
Styling the user comments on your pages
Adding a carousel to your page
Using Font Awesome in your theme
Using the masonry template
Child theming
Download at GitHub
Summary
Chapter 5: 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 Sass
Customizing Bootstrap's Sass according to our needs
Adding the logo image
Adding icons
Styling the carousel
Tweaking the columns and their content
Styling the footer
Recommended next steps
Summary
Chapter 6: Bootstrappin' Business
Sizing up our beginning files
Setting up the basics of your design
Creating a complex banner area
Adding utility navigation
Making responsive adjustments
Implementing the color scheme
Styling the collapsed navbar
Styling the horizontal navbar
Enabling Flexbox support
Designing a complex responsive layout
Laying out a complex footer
Setting up the markup
Summary
Chapter 7: 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
Adding a search form to your designing
Summary
Chapter 8: Bootstrappin' a One-Page Marketing Website
Overview
Surveying the starter files
Viewing the page content
Adding Font Awesome to our project
Adjusting the navbar
Customizing the jumbotron
Beautifying the features list
Tackling customer reviews
Creating attention-grabbing pricing tables
Adding the final touches
Adding ScrollSpy to the navbar
Summary
Chapter 9: Building an Angular 2 App with Bootstrap
Overview
Setting up your first Angular app
Adding routing to our app
Setting up navigation
Adding Bootstrap's HTML markup code to your app
Integrating Bootstrap's CSS code into the application
Downloading the complete code
What about Angular CLI?
Using React.js with Bootstrap
Other tools for deploying Bootstrap 4
Summary

Book Details

ISBN 139781785889653
Paperback404 pages
Read More
From 4 reviews

Read More Reviews