What is Bootstrap?
When Twitter was expanding, Mark Otto and Jacob Thornton realized the need for a standardized framework and tools that would facilitate consistency and ease of development in the expansion of the Twitter website. The project took a life of its own and we got an HTML and CSS toolkit, named Bootstrap or formerly Twitter Bootstrap, which made the process of web development a little easier. Bootstrap is currently used by many different types of web sites, including NASA and MSNBC, and is currently one of the most popular open source projects on GitHub.
To convert a PSD image design to a responsive HTML website, the most important step is to write the style CSS that ultimately dictates whether the site is responsive or not. Bootstrap helps in writing this CSS code. To be more precise- it’s the CSS code that could be used in creating a responsive website.?
Now, the question comes what exactly is bootstrap and how can we use it. To explain it in a single line- ‘Bootstrap is a collection of tools and HTML/CSS templates that could be used to build a website’. And since Bootstrap version 2.0 (the latest version of bootstrap), has support for responsive web development it can be used to build a responsive website. As for what it can be used for, well it can develop any type of website and could be used with any type of content management system (CMS) that has support of integrating custom CSS, such as WordPress, Joomla, Drupal etc. The best thing about this framework is that it is supported by every major web browser such as Chrome, Firefox, Internet Explorer, etc.
What is a responsive website?
A responsive website provides optimal viewing experience to a website even when viewed through different screen sizes. Here, optimal viewing means accessing website content with minimum to no left to right scrolling and good legibility of text, images, and other media. Therefore, for optimal viewing the website must automatically adjust its rendering width, images sizes, and text size according to viewing screen size.
How responsive websites are generally made?
To make a mobile compatible site, web developers generally use two major techniques. One is by using an altogether separate domain such as m.example.com or example.com/mobile, and redirecting the mobile traffic to this domain. Of course this domain contains the mobile optimized version of the site. This approach, though gets the job done, has a number of disadvantages related to search engine optimization of a site such as duplicate content, promotion of two separate domains, and diluting of link juice.
The other way is by creating a responsive website cleverly using CSS style sheets to render a different styled version of a website according to the screen size. The size of the screen is detected through Media Queries. The CSS used in this screen size loads a rendering style that most fits the screen. The only disadvantage is that the latest versions of CSS are not supported by old browsers such as Internet Explorer 6 thus they cannot display such CSS sites optimally. But this is also changing as more and more people are shifting to the newer versions of browsers.
Bootstrap: Making life easier for web developers
Bootstrap is a pre built CSS framework that could be used by web developers to create websites of any type. The framework provides tools that the developers can call from website’s HTML. Bootstrap has the basic style definition of all the major HTML components that you can use in your website such as alerts, modals, tool-tips, button dropdowns, dropdowns, button groups, navbar, navigational tabs, pills, lists, labels, page headers and hero unit, thumbnails, progress bars, accordion, carousel, and typeahead.
Bootstrap is based upon LESS, a dynamic style sheet language that is considered to be an extension of CSS. As such- LESS is considered to be way faster than other extensions such as SASS. And since it is written in JavaScript, it is easier to understand by a majority of web developers as most are well versed in JavaScript.
Though some professional web developers prefer to create custom code as much as possible, many uses Bootstrap CSS files to create their websites. The only disadvantage of Bootstrap is that it does not fully support HTML5 and is not completely built in CSS3. This is because only the latest browsers fully support these two technologies and most web users have not updated to these browser versions. So, to make a site completely compatible with most of the web browsers, some sacrifices have to be made.
Bootstrap Grid
Bootstrap comes with a 12 column grid and is available in both fixed and fluid grids. For those who don’t know, fixed grids use exact column width in pixels whereas fluid grids uses relative lengths that is represented in percentages.
To make the website responsive, Bootstrap uses the fliud grid system that modifies the width of the column in the grid and resizes the heading and the text accordingly. Similarly the fluid grid also resizes the images as image sizes are also entered in percentages. In addition to make a responsive site you have to use stack elements instead of float. Though you can make a responsive site using fixed width, but it is not generally preferred.