bootstrap download

How to Install Bootstrap

If you’re completely new to Bootstrap, the first thing you’re probably wondering is where to start. There’s no question that learning by doing is the way to go.

In order to achieve this, the first thing you need to do is install Bootstrap. In the video below, we go through the standard Bootstrap installation process in detail. If you follow along the rest of the written post, we also discuss different installation methods.

[Update] Install for Bootstrap 4 Beta

Bootstrap 4 Beta is finally here. Here are some highlights to keep you updated:

  1. Moved from Less to Sass.
  2. Flexbox and an improved grid system.
  3. Dropped wells, thumbnails, and panels for cards.
  4. Forked Normalize.css and consolidated all our HTML resets into a new CSS module, Reboot.
  5. Brand new customization option
  6. Dropped IE8 and IE9 support, dropped older browser versions, and moved to rem units for component sizing
  7. Rewrote all our JavaScript plugins.
  8. Improved auto-placement of tooltips, popovers, and drop-downs
  9. Redesigned and improved documentation.
  10. New build tools
  11. Custom Form Controls
  12. Redesigned Carousel
  13. OverHauled Navbar
  14. HTML5 Form Validation Styles
  15. Hundreds of responsive utility classes
  16. New Components

Let’s get started with the world’s most popular framework for building responsive, mobile first sites.

1. Using the CDN

1. Load the Bootstrap stylesheet to your index

2. Add jQuery, Javascript and Popper.js

3. Begin with the starter template

2. Globals

1. HTML5 Doctype

2. Responsive meta tag

3. Download the Compiled CSS and JS

You can download the ready-to-use compiled code for Bootstrap 4 Beta from here https://github.com/twbs/bootstrap/releases/download/v4.0.0-beta/bootstrap-4.0.0-beta-dist.zip


Standard Install

The first thing you need to do is access the getting started page on getBootstrap. Here you will notice three different download options depending on your level and skill set.

If you’re completely new to Bootstrap, you’ll want to stick with the basic Bootstrap download. This contains compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.

If you’re experienced using CSS pre-processors to extend the CSS language, there are two additional options available. The Source Code installation contains Source Less, JavaScript and font files. The SASS installation is Bootstrap ported from Less to Sass for easy inclusion in Rails, Compass, or Sass-only projects.

Bootstrap Download

Once you’ve downloaded and unpacked the compiled version of Bootstrap, you should see the following structure in the downloaded folder.

This is the most basic form of Bootstrap designed for quick drop-in usage to get you started in nearly any web project. The standard template will reference the .min CSS and JS files. We recommend creating additional style sheets if you want to add modifications to the CSS.

Source Code Download

If you downloaded and unpacked the Bootstrap source code version, it will contain precompiled CSS, JavaScript, and font assets, along with source Less, JavaScript, and documentation. In addition to the files included in the basic download, it also includes the following:

Creating the HTML Template

After you’ve downloaded Bootstrap, open up your favorite text editor. Marc is using Notepad++ (Windows, free) and I’m using Coda (Mac OS X, $75). Here are some additional suggestions.

  • Vim (Windows/Mac OS X/Linux, Free)
  • Sublime Text (Windows/Mac OS X/Linux, $70)
  • TextMate (Mac OS X, $54)
  • Gedit (Windows/Mac/Linux, Free)
  • Emacs (Windows/Mac/Linux, Free)

Copy and paste the following HTML code into your file. You’ll notice it contains comments which can be deleted.

Save the file as “index.html” in the same folder where you unpacked Bootstrap. Open the index.html in your favorite web browser and you should see “Hello, world!” styled with the Helvetica Neue font.

Bootstrap Customization

Once you get a little more familiar with Bootstrap, you may want to consider a custom install. Doing so enables you to choose which Less files to compile into your custom build of Bootstrap. Reading through the CSS and Components pages on getBootstrap will help you determine which files to use.

Click here to access the customized download page on getBootstrap. Now that you know what you want, simply un-check any of the elements that you don’t need for your particular project. Click the ‘Compile and Download’ button and your customized Bootstrap will be ready to go.

Now that you’ve installed Twitter Bootstrap you’re ready to start creating beautiful design projects. Leave us a comment below and let us know how you’re doing. Make sure to stay up to date with our blog as we’ll be providing many resources and tutorials to build up your knowledge and use of Bootstrap.

 

Sharing is caring!

Christopher Gimmer

Christopher is an entrepreneur & the co-founder of BootstrapBay. He helps web designers, developers and entrepreneurs utilize the power of Bootstrap. Connect with him on Twitter.