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.
Once you’ve downloaded and unpacked the compiled version of Bootstrap, you should see the following structure in the downloaded folder.
1234567891011121314 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
12345678910 bootstrap/├── less/├── js/├── fonts/├── dist/│ ├── css/│ ├── js/│ └── fonts/└── docs/└── examples/
Creating the HTML Template
- 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.
<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]>
<!– Include all compiled plugins (below), or include individual files as needed –>
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.
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.