Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletter Hub
Free Learning
Arrow right icon
timer SALE ENDS IN
0 Days
:
00 Hours
:
00 Minutes
:
00 Seconds
Bootstrap 4 Cookbook
Bootstrap 4 Cookbook

Bootstrap 4 Cookbook: Solutions to common problems faced in Responsive Web Design

eBook
$27.98 $39.99
Paperback
$48.99
Subscription
Free Trial
Renews at $19.99p/m

What do you get with a Packt Subscription?

Free for first 7 days. $19.99 p/m after that. Cancel any time!
Product feature icon Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon 50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon Thousands of reference materials covering every tech concept you need to stay up to date.
Subscribe now
View plans & pricing
Table of content icon View table of contents Preview book icon Preview Book

Bootstrap 4 Cookbook

Layout Like a Boss with the Grid System

 

This chapter will cover the following topics:

  • Preparing a static server with Bootstrap 4, Harp, and Grunt
  • Deploying your web project with Surge
  • Splitting up our Harp project into partials
  • Using containers with margin and padding utility classes
  • Adding columns in a row
  • Making col-* classes work
  • Building a simple page with the default grid
  • Building a real-life web page example with the default grid

Introduction

In this chapter, we will start off by installing a static server with Harp, locally on Windows. Where there are differences between Windows and Ubuntu-based c9, they will be pointed out.

The way we set up Harp will allow for a truly modular approach to develop recipes throughout the rest of this book, helping us keep our code DRY.

Preparing a static server with Bootstrap 4, Harp, and Grunt

In this recipe, we will set up a static server with the help of Harp (available at https://harpjs.com/). We will use Grunt to set up the foundation for tasks to be run, and we will start with the grunt-contrib-copy, grunt-contrib-sass, and grunt-watch tasks. We will use Bootstrap 4 source code mainly because of its partial Sass files to begin with. This first recipe in this chapter will be the foundation for all the other recipes in this chapter. Hopefully, you will be able to appreciate the power that the combination of these technologies brings when joined with the Cloud9 web-based IDE.

This recipe is relatively long. If you just want to get up and run as fast as possible, you can skip the setup listed in this recipe and just clone the GitHub repository with all the files set up for you, at https://github...

Deploying your web project with Surge

In this recipe, we will serve the web project we created with Surge. For a quick introduction to the way it works, visit its website, surge.sh.

If you would like to know more about Surge, visit this Medium page--http://bit.ly/2jDJ7L1 (URL shortened as the original link was too long).

This short recipe will marry the workflow from the previous recipe, the relatively long setup of Harp on Cloud9 IDE, with a simple way to serve the completed page on a custom URL. This should be quite a time saver and a powerful way to combine Cloud9 IDE, Harp, and Surge.

Getting ready

To get ready, we should build on the setup we created in the first recipe, Preparing a static server with Bootstrap...

Splitting up our Harp project into partials

In this recipe, we will split our existing project into partials, to keep our code DRY. Harp uses Embedded JS (EJS) format for includes. For more information on .ejs, visit http://www.embeddedjs.com/.

To begin, we can either continue from the previous recipe or clone the available repository for the recipe from the link https://github.com/ImsirovicAjdin/bootstrap4-with-sass-harp-grunt.

It is assumed in this recipe that you are using Cloud9 IDE. However, if that is not the case, then do not include the reference to workspace in commands to be run, as that folder is Cloud9-specific.

How to do it...

  1. In workspace/app, add a new folder and call it partial:
      cd &amp...

Using containers with margin and padding utility classes

In this recipe, we will build a simple layout, the old-fashioned way, using the default Bootstrap grid (without flexbox).

Getting ready

To get ready for this recipe, we will build from what we made in the first two recipes, Preparing a static server with Bootstrap 4, Harp and Grunt and Deploying your web project with Surge, of this chapter.

For basic information on how the layout works in Bootstrap 4, check out http://v4-alpha.getbootstrap.com/layout/overview/.

How to do it...

  1. In workspace/app...

Introduction


In this chapter, we will start off by installing a static server with Harp, locally on Windows. Where there are differences between Windows and Ubuntu-based c9, they will be pointed out.

The way we set up Harp will allow for a truly modular approach to develop recipes throughout the rest of this book, helping us keep our code DRY.

Preparing a static server with Bootstrap 4, Harp, and Grunt


In this recipe, we will set up a static server with the help of Harp (available at https://harpjs.com/). We will use Grunt to set up the foundation for tasks to be run, and we will start with the grunt-contrib-copy, grunt-contrib-sass, and grunt-watch tasks. We will use Bootstrap 4 source code mainly because of its partial Sass files to begin with. This first recipe in this chapter will be the foundation for all the other recipes in this chapter. Hopefully, you will be able to appreciate the power that the combination of these technologies brings when joined with the Cloud9 web-based IDE.

Note

This recipe is relatively long. If you just want to get up and run as fast as possible, you can skip the setup listed in this recipe and just clone the GitHub repository with all the files set up for you, at https://github.com/ImsirovicAjdin/bootstrap4-with-sass-harp-grunt.

To get started quickly, look at the README.md available in the repository...

Deploying your web project with Surge


In this recipe, we will serve the web project we created with Surge. For a quick introduction to the way it works, visit its website, surge.sh.

Note

If you would like to know more about Surge, visit this Medium page--http://bit.ly/2jDJ7L1 (URL shortened as the original link was too long).

This short recipe will marry the workflow from the previous recipe, the relatively long setup of Harp on Cloud9 IDE, with a simple way to serve the completed page on a custom URL. This should be quite a time saver and a powerful way to combine Cloud9 IDE, Harp, and Surge.

Getting ready

To get ready, we should build on the setup we created in the first recipe, Preparing a static server with Bootstrap 4, Harp and Grunt, in this chapter. However, before we start, there are a few clarifications to be made.

The first thing to note is the one major distinction that the web page that was created in the app folder was still serving the index.html page from the root of that folder...

Splitting up our Harp project into partials


In this recipe, we will split our existing project into partials, to keep our code DRY. Harp uses Embedded JS (EJS) format for includes. For more information on .ejs, visit http://www.embeddedjs.com/.

To begin, we can either continue from the previous recipe or clone the available repository for the recipe from the link https://github.com/ImsirovicAjdin/bootstrap4-with-sass-harp-grunt.

It is assumed in this recipe that you are using Cloud9 IDE. However, if that is not the case, then do not include the reference to workspace in commands to be run, as that folder is Cloud9-specific.

How to do it...

  1. In workspace/app, add a new folder and call it partial:
      cd && cd worspace/app && mkdir partial
  1. Add _nav.ejs to the partial folder--touch partial/_nav.ejs.
  2. Open the app/index.html and cut all the code starting with <nav> and ending with </nav> (the whole navbar). Paste the code into the _nav.ejs file.
  3. In index.html, right where...
Left arrow icon Right arrow icon
Download code icon Download Code

Key benefits

  • Packed with easy-to-follow recipes on building responsive web pages with Bootstrap 4 that can be applied to a web project of your choice
  • Build intuitive user interfaces that are mobile-ready with the latest features offered by BS4
  • Stay on top of the changes that Bootstrap 4 brings to front-end development
  • Craft beautiful UIs and learn best practices, tips and tricks for quick, effortless, and proper Bootstrap 4 development

Description

Bootstrap, one of the most popular front-end frameworks, is perfectly built to design elegant, powerful, and responsive interfaces for professional-level web pages. It supports responsive design by dynamically adjusting your web page layout. Bootstrap 4 is a major update with many impressive changes that greatly enhance the end results produced by Bootstrap. This cookbook is a collection of great recipes that show you how to use all the latest features of Bootstrap to build compelling UIs. This book is using the most up-to-date version of Bootstrap 4 in all its chapters. First off, you will be shown how you can leverage the latest core features of Bootstrap 4 to create stunning web pages and responsive media. You will gradually move on to extending Bootstrap 4 with the help of plugins to build highly customized and powerful UIs. By the end of this book, you will know how to leverage, extend, and integrate bootstrap to achieve optimal results for your web projects.

Who is this book for?

If you are a web designer or a developer who is familiar with the basics of Bootstrap and now want to build highly responsive and professional web pages using Bootstrap 4, this cookbook is for you. Familiarity with the fundamentals of HTML, CSS and jQuery, and some experience of incorporating JavaScript plugins is assumed.

What you will learn

  • Craft beautiful UIs the right way
  • Use jQuery and JavaScript to extend Bootstrap layouts
  • Become more efficient by speeding up your workflow to achieve amazing results in the shortest time possible
  • Setup your environment for future changes of the framework.
  • Stay DRY by quickly prototyping Bootstrap-based websites with the help of Github's own serverless blogging platform, Jekyll
  • Integrate Bootstrap with the most popular JS frameworks, Angular and React
  • Combine Bootstrap with the .NET platform

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Jun 30, 2017
Length: 338 pages
Edition : 1st
Language : English
ISBN-13 : 9781785889295
Languages :
Concepts :
Tools :

What do you get with a Packt Subscription?

Free for first 7 days. $19.99 p/m after that. Cancel any time!
Product feature icon Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon 50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon Thousands of reference materials covering every tech concept you need to stay up to date.
Subscribe now
View plans & pricing

Product Details

Publication date : Jun 30, 2017
Length: 338 pages
Edition : 1st
Language : English
ISBN-13 : 9781785889295
Languages :
Concepts :
Tools :

Packt Subscriptions

See our plans and pricing
Modal Close icon
$19.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
$199.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just $5 each
Feature tick icon Exclusive print discounts
$279.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just $5 each
Feature tick icon Exclusive print discounts

Frequently bought together


Stars icon
Total $ 187.97
Bootstrap 4 Cookbook
$48.99
Mastering Bootstrap 4
$48.99
Bootstrap 4 ??? Responsive Web Design
$89.99
Total $ 187.97 Stars icon

Table of Contents

12 Chapters
Installing Bootstrap 4 and Comparing Its Versions Chevron down icon Chevron up icon
Layout Like a Boss with the Grid System Chevron down icon Chevron up icon
Power Up with the Media Object, Text, Images, and Tables Chevron down icon Chevron up icon
Diving Deep into Bootstrap 4 Components Chevron down icon Chevron up icon
Menus and Navigations Chevron down icon Chevron up icon
Extending Bootstrap 4 Chevron down icon Chevron up icon
Make Your Own jQuery Plugins in Bootstrap 4 Chevron down icon Chevron up icon
Bootstrap 4 Flexbox and Layouts Chevron down icon Chevron up icon
Workflow Boosters Chevron down icon Chevron up icon
Creating a Blog with Jekyll and Bootstrap 4 Chevron down icon Chevron up icon
Bootstrap 4 with ASP.NET Core Chevron down icon Chevron up icon
Integrating Bootstrap 4 with React and Angular Chevron down icon Chevron up icon

Customer reviews

Rating distribution
Full star icon Full star icon Half star icon Empty star icon Empty star icon 2.8
(4 Ratings)
5 star 25%
4 star 25%
3 star 0%
2 star 0%
1 star 50%
Andrew Yourkin Oct 12, 2017
Full star icon Full star icon Full star icon Full star icon Full star icon 5
This book does exactly what it says in the foreword -- does not copy the official Bootstrap 4 documentation but expands on it, covering a lot of ground that can be useful to the initiated developer.Being fairly acquainted with the framework already, and having stumbled into some of its idiosyncrasies I was looking to fill in some gaps in BS4 customization, better layout techniques, and more examples of advanced usage. Not disappointed.
Amazon Verified review Amazon
Svein Soermo Apr 12, 2018
Full star icon Full star icon Full star icon Full star icon Empty star icon 4
High quality projects and very good explanations.
Amazon Verified review Amazon
Kenneth D. Hawkins Mar 22, 2019
Full star icon Empty star icon Empty star icon Empty star icon Empty star icon 1
All of the first chapter and the beginning of the second chapter could be eliminated as it has nothing to do with bootstrap. I would expect someone writing a book on coding would understand the usage of white space and indentation, but not so. The code examples are a mish-mosh of mess. The only way to effectively read them is to copy them into your editor of choice and reformat them. I am glad he does not code for me.
Amazon Verified review Amazon
Maria Nov 09, 2017
Full star icon Empty star icon Empty star icon Empty star icon Empty star icon 1
use always online ide!!! cloud 9?? what's this? no atom no sublime text no visual studio... all those are free.I can't imagine a firm using cloud 9........aaaaand messy and intriguing explanations too!!why this book exist?
Amazon Verified review Amazon
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

What is included in a Packt subscription? Chevron down icon Chevron up icon

A subscription provides you with full access to view all Packt and licnesed content online, this includes exclusive access to Early Access titles. Depending on the tier chosen you can also earn credits and discounts to use for owning content

How can I cancel my subscription? Chevron down icon Chevron up icon

To cancel your subscription with us simply go to the account page - found in the top right of the page or at https://subscription.packtpub.com/my-account/subscription - From here you will see the ‘cancel subscription’ button in the grey box with your subscription information in.

What are credits? Chevron down icon Chevron up icon

Credits can be earned from reading 40 section of any title within the payment cycle - a month starting from the day of subscription payment. You also earn a Credit every month if you subscribe to our annual or 18 month plans. Credits can be used to buy books DRM free, the same way that you would pay for a book. Your credits can be found in the subscription homepage - subscription.packtpub.com - clicking on ‘the my’ library dropdown and selecting ‘credits’.

What happens if an Early Access Course is cancelled? Chevron down icon Chevron up icon

Projects are rarely cancelled, but sometimes it's unavoidable. If an Early Access course is cancelled or excessively delayed, you can exchange your purchase for another course. For further details, please contact us here.

Where can I send feedback about an Early Access title? Chevron down icon Chevron up icon

If you have any feedback about the product you're reading, or Early Access in general, then please fill out a contact form here and we'll make sure the feedback gets to the right team. 

Can I download the code files for Early Access titles? Chevron down icon Chevron up icon

We try to ensure that all books in Early Access have code available to use, download, and fork on GitHub. This helps us be more agile in the development of the book, and helps keep the often changing code base of new versions and new technologies as up to date as possible. Unfortunately, however, there will be rare cases when it is not possible for us to have downloadable code samples available until publication.

When we publish the book, the code files will also be available to download from the Packt website.

How accurate is the publication date? Chevron down icon Chevron up icon

The publication date is as accurate as we can be at any point in the project. Unfortunately, delays can happen. Often those delays are out of our control, such as changes to the technology code base or delays in the tech release. We do our best to give you an accurate estimate of the publication date at any given time, and as more chapters are delivered, the more accurate the delivery date will become.

How will I know when new chapters are ready? Chevron down icon Chevron up icon

We'll let you know every time there has been an update to a course that you've bought in Early Access. You'll get an email to let you know there has been a new chapter, or a change to a previous chapter. The new chapters are automatically added to your account, so you can also check back there any time you're ready and download or read them online.

I am a Packt subscriber, do I get Early Access? Chevron down icon Chevron up icon

Yes, all Early Access content is fully available through your subscription. You will need to have a paid for or active trial subscription in order to access all titles.

How is Early Access delivered? Chevron down icon Chevron up icon

Early Access is currently only available as a PDF or through our online reader. As we make changes or add new chapters, the files in your Packt account will be updated so you can download them again or view them online immediately.

How do I buy Early Access content? Chevron down icon Chevron up icon

Early Access is a way of us getting our content to you quicker, but the method of buying the Early Access course is still the same. Just find the course you want to buy, go through the check-out steps, and you’ll get a confirmation email from us with information and a link to the relevant Early Access courses.

What is Early Access? Chevron down icon Chevron up icon

Keeping up to date with the latest technology is difficult; new versions, new frameworks, new techniques. This feature gives you a head-start to our content, as it's being created. With Early Access you'll receive each chapter as it's written, and get regular updates throughout the product's development, as well as the final course as soon as it's ready.We created Early Access as a means of giving you the information you need, as soon as it's available. As we go through the process of developing a course, 99% of it can be ready but we can't publish until that last 1% falls in to place. Early Access helps to unlock the potential of our content early, to help you start your learning when you need it most. You not only get access to every chapter as it's delivered, edited, and updated, but you'll also get the finalized, DRM-free product to download in any format you want when it's published. As a member of Packt, you'll also be eligible for our exclusive offers, including a free course every day, and discounts on new and popular titles.