Book Image

Bootstrap 4 Site Blueprints - Second Edition

By : Ian Whitney, David Cochran
Book Image

Bootstrap 4 Site Blueprints - Second Edition

By: Ian Whitney, David Cochran

Overview of this book

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.

Related Content you might be interested in

Current Title:

Small book image
Bootstrap 4 Site Blueprints - Second Edition
Ian Whitney | David Cochran
Oct, 2016 | 404 pages
No titles found
Table of Contents (15 chapters)
Bootstrap 4 Site Blueprints
Bootstrap 4 Site Blueprints
Credits
Credits
About the Authors
About the Authors
About the Reviewer
About the Reviewer
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Getting Started with Bootstrap
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
2
Creating Your Own Build Process with Gulp
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
3
Customizing Your Blog with Bootstrap and Sass
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
4
Bootstrappin' a WordPress Theme
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
5
Bootstrappin' Your Portfolio
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
6
Bootstrappin' Business
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
7
Bootstrappin' E-Commerce
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
8
Bootstrappin' a One-Page Marketing Website
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
9
Building an Angular 2 App with Bootstrap
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

Customizing the jumbotron

The jumbotron is a Bootstrap component highlighting the key message of your website. More information about the jumbotron and its HTML markup can be found at the following URL: http://v4-alpha.getbootstrap.com/components/jumbotron/.

In this section, we'll customize the jumbotron to display our client's big welcome message with stylistic touches in line with her mockup. This will include adding a large background image, enlarging the welcome message text, and then adjusting its presentation for multiple viewports.

In index.html, find the following markup:

    <!-- INTRO SECTION --> 
    <section class="jumbotron" id="welcome"> 
      <div class="container"> 
      <h1 class="display-3"><strong>Big</strong> Welcome Message</h1> 
      <p class="lead"> 
        Ingenious marketing copy. And some <em>more</em> ingenious marketing copy.<a href="#features" class="btn btn-lg btn-primary...
Previous Section
End of Section 7
Next Section