History of Bootstrap?
In 2011, Bootstrap was developed as an in-house solution to solve developing problems/shortcomings within Twitter’s development team. Basically, there was no set code-structure in the way that engineers at Twitter chose to develop the platform, which was solved by a responsive framework called Bootstrap.
Bootstrap was initially developed by now former Twitter engineers Jacob Thorton and Mark Otto as an attempt to encourage Twitter’s in house issue of increasing inconsistencies about their platform. Needless to say looking at today’s requirement of Bootstrap, initiative succeeded at Twitter as the entire team worked faster, smoother, more efficiently and with fewer inconsistencies.
Although it was started as an internal solution at Twitter platform, Mark and Jacob quickly realized that they were on to something much greater and which could change the face of responsive web design around the world. Bootstrap framework was released on August 2011 as a freely download-able project on Github. Within the next few months, more than thousands of developers around the world downloaded it and also contributed to the code to enhance the shortcomings and Bootstrap became the most actively downloaded open source development project in the world after PHP. Since then, Bootstrap has only gained in notoriety and has become the most flexible and famous front-end framework for developing responsive, mobile first projects on the web.
So…What actually is Bootstrap?
Put simply, Bootstrap is a collection of many, customizable web-designing elements and functions all pre-packaged together in one tool which are not only helpful in creating enhanced but feasible UI. When designing a website with Bootstrap, developers can pick and choose which elements to use thanks to Bootstrap being made Open Source. More importantly, they can feel design anything they want knowing that the code structure they will use will not conflict and will not break on multiple screens .
Lets Conclude why Bootstrap is the need of the hour.
1) Ease of use: Anybody with just average knowledge of HTML and CSS can start using Bootstrap
2) Responsiveness features: Bootstrap’s responsive CSS adjusts to desktops, tablets, and mobile phones
3) Browser compatibility: Bootstrap is compatible with all modern browsers (Chrome, Firefox, Internet Explorer, Safari, and Opera)
4) Mobile-first approach: In Bootstrap 3, mobile-first styles are part of the core framework
You can download the most updated version of Bootstrap from getbootstrap.com which is the official website for Twitter Bootstrap Framework and follow the instructions there.
Using CDN links for hosting Bootstrap
If due to some issues you don’t wish o download the contents on your local platform and want to use Bootstrap from an online platform you can link your required files of Bootstrap from a CDN (Content Delivery Network).
Let’s start our first Bootstrap code.
1. Adding the HTML5 doctype!
Bootstrap uses a couple of HTML5 elements and CSS3 properties which are required to be mentioned in the first line of the HTML document. So we add a HTML5 doctype. Always use the HTML5 Doctype as the first line of your Bootstrap code structure.
2.Mobile first approach
Bootstrap has been built with a mobile first approach. A mobile first approach has been initiated because of advancement of smart phones in the modern world. In this, the layout is designed first for smaller screens and then more and more features are added to the wider screens. This approach is also called “Progressive Enhancement”. In order to make sure proper working of all the features of of Bootstrap.
There are two types of websites whole in certain around the internet or should I say there are two types of layouts :- boxed and full-width. Boxed websites are the ones whose content are confined to a rectangular area inside the content of the body and the full-width websites are the ones whose contents are stretched from one end to another. In Bootstrap, in order to have a boxed-style layout we use the class “container” and in order to have a full-width layout we use the class “container-fluid”.
Bootsrap GRID System
Most of the basic responsive frameworks use a 12-column grid. Primarily, the classes for bootstrap which offer the grid layout were the ones like:- span1, span2, span3, span4, span5, span6, span7, span8, span9, span10, span11, span12. The width of all theses classes were defined as per the percentage of the screen width. Inspite of the fact, that the use of theses classes usually served the purpose of responsiveness there were quite a few features which could have been incorporated to make the grid more flexible. Bootstrap’s grid system is amazingly responsive, and all the columns will automatically re-arrange depending on the screen size.
With the introduction of Bootstrap 3.0, there were classes defined for four kinds of screens namely:-
1.Mobile Devices:- ‘xs’ (less than 640px).
2. Tablet Devices ‘sm’ (from 640px to 1024px).
3. Desktop Devices ‘md’ (from 1024px to 1919px.
4. Extra large devices ‘lg’ (more than 1920px).
Overall while writing down the code for the Bootstrap if you use two classes “col-md-6” and “col-md-6”. The contents of both the classes will be evenly divided in them. But instead if we use the classes “col-md-4” and “col-md-8” the contents of the classes will be divided in the ration of 4:12 i.e 1.3. Bootstrap also offers us the flexibility to show a content of the class in the ratio of 4/12 and show the same on smaller screens 12/12. The classes used in such case would be “col-md-4” and “col-sm-12”.
OTHER HELPFUL CLASSES
There are a bunch of predefined classes in Bootstrap which we can use for our codes that can reduce our time and effort. It works in situations where we wish to apply any specific class on somewhere in our code and that can also be achieved also by the direct usage of these predefined classes. The list of some of most actively used classes are given below:-
1. .lead:- The use of this class makes the text enclosed in this tag stand out and is more appealing to the user.
2. .small:- The use of this class makes the size iof the text 85% smaller than the original font size of the body.
3a. .text-left:- The use of this class makes all the text inside it as left aligned.
3b. .text-right:- The use of this class makes all the text inside it as right aligned.
3c. .text-center:- The use of this class makes all the text inside it as center aligned.
3d. .text-justify:- The use of this class makes all the text inside it aligned from both the left and from the right side.
3e. .text-lowercase:- The use of this class makes all the text inside it as small letters.
3f. .text-uppercase:- The use of this class makes all the text inside it as capital letters.
3g. .text-capitalize:- The use of this class makes all the text inside it as Camel Case font style.
Stay tuned to for further lessons on Bootsrap!