Written on: Updated on:
Bootstrap 4 Boilerplate Template Kit for Espresso
What is Included
The Boilerplate Kit’s primary objective is to accelerate your development
process by providing you with all the files and code needed for working with the
most current release of Bootstrap - currently version 4.1.3. Not
only does this Kit include all the Bootstrap CSS and JS,
Holder.js scripts, but it also includes 20 fully-functional example
templates that you can fire up and begin using as a base for your project.
Here is what is included in this Boilerplate Kit for
The following vendor scripts are included in the template.
The Bootstrap 4 Boilerplate Kit template for Espresso includes the following 20 template variations ranging from using parts of the framework to custom components and layouts as well as Bootstrap experiments.
Here is an overview (with screenshots) of each of the included templates in the Boilerplate Kit.
|Jumbotron: Build around the jumbotron with a navbar and some basic grid columns.|
|Album: Simple one-page template for photo galleries, portfolios, and more.||Pricing: Example pricing page built with Cards and featuring a custom header and footer.|
|Checkout: Custom checkout form showing our form components and their validation features.||Product: Lean product-focused marketing page with extensive grid and image work.|
|Cover: A one-page template for building simple and beautiful home pages.||Carousel: Customize the navbar and carousel, then add some new components.|
|Blog: Magazine like blog template with header, navigation, featured content.||Dashboard: Basic admin dashboard shell with fixed sidebar and navbar.|
|Sign-in: Custom form layout and design for a simple sign in form.||Sticky Footer: Attach a footer to the bottom of the viewport when page content is short.|
|Sticky Footer Navbar: Attach a footer to the bottom of the viewport with a fixed top navbar.|
|Navbars: Demonstration of all responsive and container options for the navbar.||Navbar Static: Single navbar example of a static top navbar along with some additional content.|
|Navbar Fixed: Single navbar example with a fixed top navbar along with some additional content.||Navbar Bottom: Single navbar example with a bottom navbar along with some additional content.|
|Floating Labels: Beautifully simple forms with floating labels over your inputs.||Offcanvas: Turn your expandable navbar into a sliding offcanvas menu.|
The following screenshot outlines the various options available to you when you
create a New Project within
There is an optional Extras section which allows you to include extra configuration files that form part of most modern-day web projects.
Theme Options you will find the following settings for you to choose
These extras are:
- IE Classes: this includes markup in your HTML document for IE9 that will
display a browser upgrade message. When selecting this option a new
browser-upgrade.cssfile is included in your
/css/folder and is linked in your HTML markup. If you don’t select this option then no additional markup or CSS is added to your HTML template.
- Server Extras: includes an
humans.txtfile in the root of your project folder. You can edit these files and customise them to your needs. This option is selected by default as these files are recommended but if you don’t select them then none of these files are added to your project.
- Google Analytics: by including this, additional Google Analytics code is
included in your markup just before the closing
</body>tag. You have the option of inputting your Site ID at time of creating your template or, if you only create the GA tag later on, you can add the Site ID to the markup later on. If this option is unticked, no additional code is added to your markup.
- Font Awesome: includes the CSS and webfonts required for using the
Font Awesome library in your projects. To use Font Awesome
just add markup to your html like this
<i class="fa fa-star"></i>and you will get a star icon loaded in your document. If you don’t select this option then the CSS and
/webfonts/directory are not copied over into your project.
Each Bootstrap template that is generated from the Boilerplate Kit contains a range of favicons that you can customise and use in your projects.
In the HTML markup for each template you will see these meta-tags:
<link rel="icon" href="favicon.ico"> <link rel="manifest" href="manifest.json"> <!-- For Android Devices. --> <meta name="msapplication-config" content="browserconfig.xml"> <!-- For Windows and Microsoft Mobile. --> <link rel="apple-touch-icon" href="img/favicons/apple-touch-icon.png"> <!-- For Apple iOS. --> <link rel="mask-icon" href="img/favicons/safari-pinned-tab.svg" color="#563d7c"> <!-- For Safari. -->
The following breaks down what each of the meta-tags provide.
favicon.icois the first meta-tag and sits in the root of your project folder. The
favicon.icois a compiled icon image made of 16x16, 32x32 and, in some cases, 48x48 pixel images. If you don’t know how to generate a
favicon.icohave a look at this resource.
manifest.jsonis used by Android devices and sits in your root folder. This json file contains the path to the various Android-specific favicon files. These files are located in
/img/favicons/and are labelled
android-chrome-512x512.png. These are the default sizes required for most Android devices.
browserconfig.xmlis similar to the Android
manifest.jsonbut this file is specific to Windows and Microsoft devices. The
browserconfig.xmlcontains links to Microsoft-specific favicon files. These files are located in
/img/favicons/and are prefixed with
mstile-*and then the file dimensions. Each of these files cover an array of Windows and Mobile device sizes.
apple-touch-iconis a link to the favicon used for iOS devices. There is only one size image for iOS devices as this is all you really need to provide but some developers choose to add more icons to cater for specific iOS devices. You don’t need to add more but feel free to should you want.
safari-pinned-tab.svgis a link to a SVG file which is used by Safari on macOS and iOS. This is a transparent, single-colour SVG which is styled by the
color="#563d7c"class in the meta-tag. This favicon is used when people add your website to their favourites and appears under the favourite sites in Safari.
NB: PLEASE TAKE NOTE
The files contained in /img/favicons/ are all Bootstrap favicons and you will need to redesign each of the images and SVG files in this directory (or delete what you aren’t going to use in your markup). You will also need to update the TileColor contained in the browserconfig.xml file as well as the theme_color and background_color in the manifest.json to your website’s primary colour used. The current colours are all Bootstrap specific colours and need changing.
These instructions will get the Bootstrap 4 Boilerplate Kit template installed
Espresso on your
You will need a copy of Espresso running on
There are two methods to installing the Boilerplate Template Kit and these are documented below.
- Download the Boilerplate Template Kit by clicking this link.
- Extract the zip folder.
- Open up your
Espresso.appapplication on your machine.
New Project(or Shift+Cmd+N)
Show Templates Folder
- Copy the extracted folder (called
bootstrap4.espressotemplate) to the
Templatesdirectory that has just opened up (see below).
The new Boilerplate Template Kit should now be available for you to use in
Espresso app when you create a New Project (see below for what you
should be seeing).
- Open up your
Terminal.appon your machine.
- Run the following commands to checkout the project directly to your
$ cd ~/Library/Application\ Support/Espresso/Templates/ $ git clone https://github.com/justinhartman/bootstrap4.espressotemplate.git
You can now open up
Espresso.app and the template will be available to you
when you click on
New Project or Shift+Cmd
This project is licensed under the
MIT License. See the
LICENSE file for full details.
Special thanks go out to the following people and projects.
- Bootstrap - for the framework and example code that is used in this project. Without them, this project wouldn’t even exist.
- Espresso - for their H5BP template that this was adapted from.
- Font Awesome - the best icon font library in the world.
- humans.txt - for the
- robotstxt - for the
- H5BP - for providing the
.htaccessfile in the extras component.
- @justinhartman/.github - for the Github project templates.