Bootstrap 4: Getting Started
Quick Start with a Simple Bootstrap 4 Template
Part 1 of the Tutorial on Bootstrap 4
The hardest part of trying anything new is just taking the first step. So if you’re looking to get up-and-running with the latest Bootstrap v4.0.0, here is the quick-n-dirty need to know…
Step 1__ Choose A Startup Method:
Option 1: Codeply Playground
The fastest option is to use Codeply since Bootstrap 4 is built into the editor. Bootstrap 4 templates, components and example snippets are included so it’s easy to drop in whatever you need. This is the best option if you’re looking to play with Bootstrap, understand the basics, and mock-up designs.
Option 2: Your Editor / IDE
Or, to use your own development environment, just copy & paste the official Bootstrap starter template into your code editor. Then you just need to determine how you want to reference the Bootstrap files…
Step 2__ Get Bootstrap:
Option 1: Bootstrap CDN
As shown in the official starter template, you can reference the Bootstrap 4 files from CDN. You’ll find links to the latest on BootstrapCDN, and then you can use other public CDN’s for jQuery.
Option 2: Download or Build?
Alternatively, you can download the ready-to-use compiled JS and CSS files to drop into your project, however this doesn’t include the dependencies that Bootstrap 4 requires which are jQuery and Popper.js.
Depending upon your code editor, development and/or build environment, those familiar with NPM/Node, Nuget, Ruby Gems and other package managers will want to install and reference Bootstrap accordingly.
Step 3__ Learn the “Bootstrap Grid”
Now that you’re off-and-running, you’ll want to keep the Bootstrap documentation handy. The logical next step is to learn about Bootstrap’s “Grid”. This is a concept you’ll need to know in order to layout content in your Bootstrap pages.
Up next…
Part 2 of the Tutorial on Bootstrap 4 —Learn the Grid
