Bootstrap Setup

Setting up Bootstrap is very simple and easy to get started writing your first bootstrap application. There two variations of getting the bootstrap from their website http://getbootstrap.com/.

Download Bootstrap

  • Download pre-compiled bootstrap
    • When you download the pre-compiled version of the distribution, it comes with the minified version of CSS, JavaScript and HTML files. This is the recommended way for start the development easier. In this distribution, there is no documentation or the original source code will not be included. The latest version of the bootstrap at the time of writing this tutorial is 3.0.3.
  • Download source code
    • If you download the source code, it comes with the LESS¬†and JavaScript source code by downloading it directly from GitHub. It is not the recommended download if you are just using for your own project development. This source code needs to be built in your local environment before it is used in your project.
  • Use CDN
    • If you don’t want to use the download and install in your application, there is CDN provider for accessing the bootstrap. MaxCDN provides the support to access directly from their server to download the bootstrap’s JavaScript and CSS files.

File Structure

If you download the pre-compiled version of the bootstrap, after un-zip of the distribution the extracted files structure would look like this:

bootstrap file precompiled

If you download the source code, then the file structure would look like this:

file bootstrap source code

  • In the above screenshot, the files under less, js and fonts are the source codes.
  • Pre-compiled files are copied under the folder dist.
  • This also contains the documents and examples

Simple Bootstrap Example

Here is the simple template to get start your first application. It uses the MaxCDN to download the resources. Look at the code. This example is provided by the official website.

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 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.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

In the above code, it uses the jQuery, bootstrap.min.js and bootstrap.min.css files are included to make a normal HTM file to Bootstrapped Template.

Comments

comments

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Speak Your Mind

*