Bootstrap Introduction

Front-end vs Back-end Web Development

There is a thin line between front-end web development and back-end development which is often overlooked. Web developers often struggle when it comes to designing and front end development tasks. Keeping in view the struggle through which developers have to go through, several front-end web development frameworks have been introduced. These frameworks contain built-in capabilities for performing common front-end development tasks. Foundation, W3CSS and Bootstrap are some of the most popular front-end development frameworks.This series of articles provides brief bootstrap introduction and explains how to perform different front-end tasks via bootstrap framework.

What is Bootstrap

Bootstrap is highly responsive front-end web development frameworks that fosters mobile first development. It is extremely light-weight and sleek yet powerful. It is based on core HTML, CSS, JavaScript and JQuery. To use bootstrap in your applications simply go to http://getbootstrap.com/getting-started/ and download the minified files. Then you can reference style sheet and JavaScript files in your applications.

However, for the sake of this series, we shall use CDN to include bootstrap style sheet and JavaScript files in your webpage. Following are the three links that you need to include in your webpages.

  • Bootstrap Style sheet: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
  • JQuery: https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js”
  • Bootstrap JS: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

It is important to note that, we have to include JQuery in our webpage in order for bootstrap JavaScript plugins to work. Therefore, you should always include JQuery reference before including Bootstrap JS files.

Basic Example

The following code contains a complete Bootstrap. The webpage contains two buttons. One is a simple button with out any styling while the other is button styled by bootstrap css classes. Take a look at the code.

<!DOCTYPE html>
<html>
    <head>
            <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>
    
    <body>
    
        <button>Welcome to Knowledge Hills</button>
        <button class="btn btn-primary">Welcome to Knowledge Hills</button>
    </body>

</html>

Download the code
Try the code

When you run the above page, you should see a simple button with some message. You should also see another button with blue color. If you look at the code, the first button has no class while the second button has “btn btn-primary” class. The “btn” and “btn-primary” are bootstrap classes for styling buttons. If you have to style the button in this way, yourself using CSS from scratch, you will have to write quite a bit of code. But, you can see how Bootsrap has helps us style elements easily.

This tutorial just provides a brief bootstrap introduction. In the upcoming tutorials we shall how different front-end functionalities are performed with bootstrap. Keep visiting the site!

Bootstrap Grid System >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .