Getting started
An overview of Bootstrap Flat, how to download and use, and more.
An overview of Bootstrap Flat, how to download and use, and more.
Bootstrap Flat (currently v3.3.4) has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.
Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.
Source Less and JavaScript files, along with our docs. Requires a Less compiler and some setup.
Bootstrap Flat ported from Less to Sass for easy inclusion in Rails, Compass, or Sass-only projects.
You can also install and manage Bootstrap Flat's Less, CSS, JavaScript, and fonts using Bower:
$ bower install bootstrap-flat
$ bower install bootstrap-flat-sass
Bootstrap Flat is downloadable in two forms, within which you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.
Please note that all JavaScript plugins require jQuery to be included, as shown in the starter template. Consult our bower.json
to see which versions of jQuery are supported.
Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootstrap Flat. You'll see something like this:
bootstrap/
+-- css/
| +-- bootstrap-flat.css
| +-- bootstrap-flat.css.map
| +-- bootstrap-flat.min.css
| +-- bootstrap-flat-extras.css
| +-- bootstrap-flat-extras.css.map
| +-- bootstrap-flat-extras.min.css
+-- js/
| +-- bootstrap-flat.js
| +-- bootstrap-flat.min.js
This is the most basic form of Bootstrap Flat: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (bootstrap-flat.*
), as well as compiled and minified CSS and JS (bootstrap-flat.min.*
). CSS source maps (bootstrap-flat.*.map
) are available for use with certain browsers' developer tools.
The Bootstrap Flat source code download includes the precompiled CSS, and JavaScript, along with source Less, JavaScript, and documentation. More specifically, it includes the following and more:
bootstrap/
+-- less/
+-- css/
The less/
is the source code for our CSS, JS, and icon fonts (respectively). The css/
folder includes everything listed in the precompiled download section above. Beyond that, any other included file provides support for packages, license information, and development.
Start with this basic HTML template, or modify these examples. We hope you'll customize our templates and examples, adapting them to suit your needs.
Copy the HTML below to begin working with a minimal Bootstrap Flat document.
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap Flat 101 Template</title>
<!-- Bootstrap and Bootstrap Flat -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-flat.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/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.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Looking to migrate from an older version of Bootstrap Flat to v3.x? Check out our migration guide.
Since Bootstrap Flat is built on top of Bootstrap, it has the same browser support as Bootstrap. It is built to work best in the latest desktop and mobile browsers, meaning older browsers might display differently styled, though fully functional, renderings of certain components.
For more details, including officially supported browsers and devices, see Bootstrap's documentation
Bootstrap Flat is released under the MIT license and is copyright 2015 Scott Dorman. Boiled down to smaller chunks, it can be described with the following conditions.
The full Bootstrap Flat license is located in the project repository for more information.