Setup Bootstrap 3 Framework

Download Bootstrap

Bootstrap's latest version can be download from https://getbootstrap.com location by clicking on this link, you will be redirected to get below screen:

Now click on DownloadBootstrap button, this will redirect you to another page. Here you can see Three buttons:

Download Bootstrap - By clicking on this option, you can download the precompiled and minified versions of Bootstrap CSS, JavaScript, and fonts.
Download Source - By clicking on this option, you can get the latest Bootstrap LESS and JavaScript source code from GitHub.
Download Sass - By clicking on this option, you can get the latest Bootstrap LESS to Sass for easy inclusion in Rails, Sass-only projects.

It's based on your requirement, you can download Bootstrap's latest version. If you want to use precompiled version of Bootstrap, click on Download Bootstrap button. As the files are complied and minified you don't requires LESS compiler and setup.

Bootstrap File System

Precompiled Bootstrap

Once downloaded, unzip the compressed folder to see the structure of Bootstrap. You'll find something like this:

bootstrap/
+-- css/
|   +-- bootstrap.css
|   +-- bootstrap.css.map
|   +-- bootstrap.min.css
|   +-- bootstrap.min.css.map
|   +-- bootstrap-theme.css
|   +-- bootstrap-theme.css.map
|   +-- bootstrap-theme.min.css
|   +-- bootstrap-theme.min.css.map
+-- js/
|   +-- bootstrap.js
|   +-- bootstrap.min.js
+-- fonts/
    +-- glyphicons-halflings-regular.eot
    +-- glyphicons-halflings-regular.svg
    +-- glyphicons-halflings-regular.ttf
    +-- glyphicons-halflings-regular.woff
    +-- glyphicons-halflings-regular.woff2

Bootstrap Source Code

The Bootstrap source code download includes the precompiled CSS, JavaScript and font along with source LESS, JavaScript, and documentation.

<bootstrap/
+-- less/
+-- js/
+-- fonts/
+-- dist/
|   +-- css/
|   +-- js/
|   +-- fonts/
+-- docs/
    +-- examples/

Bootstrap CDN

If you don't want to download, you can still use Bootstrap, MaxCDN provides CDN support for Bootstrap's CSS and JavaScript. Just use below Bootstrap CDN links.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>

Basic HTML Template

<!DOCTYPE html>
<html lang="en">
<head> <!-- www.techstrikers.com -->
  <title>Basic Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" 
  href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
  <link rel="stylesheet" 
  href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap-theme.min.css">
  <script src="https://code.jquery.com/jquery.min.js"></script> 
  <script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>Bootstrap Basic Template</h1>
  <p>This is first Bootstrap page.</p> 
</div>

</body>
</html>

« Previous