Skip to main content

Introduction to bootstrap


Bootstrap is the simplest framework used to create both mobile and desktop friendly responsive websites without any prior programming language experience.

 History of bootstrap

Mark Otto and Jacob Thornton, developers from Twitter, developed an internal tool while working in twitter company. It was named as Twitter Blueprint. Months later, many developer from twitter started to contribute to this internal tool. Later it was renamed as Bootstrap and was released as an open source project in GitHub on 19th August 2011.

Compatibility with browsers and devices

Bootstrap is compatible with all the latest versions of web browsers namely Google Chrome, Microsoft Internet explorer, Microsoft Edge, Firefox, Safari, Android Browser and WebView.

 How to get the bootstrap?

Bootstrap can be included from the Content Delivery Network(CDN) into the webpage or it can be downloaded from the official website

 Bootstrap usage guidelines

  1. Webpage should have HTML5 doctype 
  2. Viewport meta tag utilization 
  3. For internet explorer web browser,it should meet the latest rendering mode

Covering all above guidelines, your page will look as shown below

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>

Responsive meta tag is added to ensure proper rendering and zooming on all the devices with different viewports.


Popular posts from this blog

How to create breadcrumb in bootstrap 4 ?

Breadcrumb provides the hierarchical navigation of a webpage. If the webpage resides deep down the hierarchy, breadcrumb helps in navigation. This will be most useful for the websites having large number of webpages. It indictes the cuurent location of a webpage. Home Folder 1 Folder 2 <ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Folder 1</a></li> <li><a href="#">Folder 2</a></li> </ol> In above example, Folder 1 resides inside Home directory and Folder 2 resides inside Folder 1. We need to add .breadcrumb class to the ol HTML tag. Seperators will be automatically added by CSS through ::before and content as shown below. .breadcrumb > li + li:before { color:#CCCCCC; content:"/ "; padding:05px; }
Read more

How to create progress bars in bootstrap 4 ?

Progress on any task keeps a vital role. The bar graph which shows the completion percentage got the name progress bar. The default HTML 5 progress bar is very simple both in look and the information it provides. It makes users to add CSS and JavaScript as per the requirement. Bootstrap progress bar overcomes the addition of CSS and JavaScript with its inbuilt beauty and maturity. Default bootstrap progress bar Default HTML5 progress bar looks as shown below 0% 25% 50% 75% 100% <progress class="progress" value="0" max="100">0%</progress> <progress class="progress" value="25" max="100">25%</progress> <progress class="progress" value="50" max="100">50%</progress> <progress class="progress" value="75" max="100">75%</progress> <progress class="progress" value="100" max="100...
Read more