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:
- Moved from Less to Sass.
- Flexbox and an improved grid system.
- Dropped wells, thumbnails, and panels for cards.
- Forked Normalize.css and consolidated all our HTML resets into a new CSS module, Reboot.
- Brand new customization option
- Dropped IE8 and IE9 support, dropped older browser versions, and moved to rem units for component sizing
- Rewrote all our JavaScript plugins.
- Improved auto-placement of tooltips, popovers, and drop-downs
- Redesigned and improved documentation.
- New build tools
- Custom Form Controls
- Redesigned Carousel
- OverHauled Navbar
- HTML5 Form Validation Styles
- Hundreds of responsive utility classes
- 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
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">2. Add jQuery, Javascript and Popper.js
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>3. Begin with the starter template
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>2. Globals
1. HTML5 Doctype
<!DOCTYPE html>
<html lang="en">
...
</html>2. Responsive meta tag
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">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.
bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf └── glyphicons-halflings-regular.woff
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:
bootstrap/ ├── less/ ├── js/ ├── fonts/ ├── dist/ │ ├── css/ │ ├── js/ │ └── fonts/ └── docs/ └── examples/
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.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
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.
