- Bootstrap Tutorial For Beginners – Introduction and Installation
- Bootstrap Tutorial For Beginners – Grid System
So you heard a lot about bootstrap but still aren’t sure what it is? then you have landed on correct page, We will be covering a complete bootstrap series and understand what it is? why is it used? and how to use it. So with any further delay lets start discussing.
First things first, what I am assuming is that you have a good knowledge of HTML and CSS, If you don’t first go through some tutorials else, my words might feel greek to you.
A small history of bootstrap
Bootstrap, originally named Twitter Blueprint, was developed by Mark Otto and Jacob Thornton at Twitter as a framework to encourage consistency across internal tools. Before Bootstrap, various libraries were used for interface development, which led to inconsistencies and a high maintenance burden. Source WIKI.
So what is bootstrap?
This is the first part of Bootstrap Tutorial For Beginners Series, Basically bootstrap is a front end framework designed for web developers, which help creating responsive websites. So a responsive website is one which behaves perfectly or rather say opens up perfectly in different devices, with different layouts. So for instance If we say you have created your companies website and you realize that there is a lot of traffic coming through mobile devices and you cannot recreate a mobile version, then this is where bootstrap comes to help you. A bootstrapped site will work on desktop and equally good on a mobile device.
Bootstrap Out Of The Box
So what does bootstrap brings out of the box? If you use bootstrap the first and the foremost thing which you are going to get is responsiveness, Other thing which ships with bootstrap is all the basic functionality which you need while making a website like, buttons, forms, navbars, menus, lists, tables etc. We would be covering each of them one by one, tutorial by tutorial, so for now you can just think of bootstrap framework as a magic wand which will turn your site responsive, so that it will work on all devices like desktops, tablet and mobile phones.
You can use bootstrap is two ways, First using a CDN and second by download everything locally. So CDN is Content Delivery Network, bootstrap’s CSS and JS files are stored over a CDN and can be fetched. For both the ways you have to go to getbootstrap website
1. The CDN way.
MaxCDN hosts bootstrap’s files, you can use the code below in your HTML page and you would be ready with bootstrap.
Understanding what these three file will do.
a. Bootstrap’s CSS : It contains the complete grid system and default styling for bootstrap, but you have to include some styling else your website will looks similar to all other bootstrapped site.
b. Theme CSS : Its a pretty basic theme style provide by bootstrap. There are lots of free styling avaialable, visit bootswatch for that.
c. Boostrap JS : It includes things like, tooltip, modal, popover etc.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
2. Installing Locally
Follow this link getbootstrap website and click download bootstrap button. This will download a compressed archive / zip which contains all the files required to crate bootstrapped website.
Note : If you are trying to install bootstrap locally you would require a copy of jquery or you can use a cdn for that.
Just for our reader, click the link below and download a complete source for this tutorial, It contains everything to run a bootstrap site plus a sample HTML that already includes everything.