info@websitebana.com 03322-473158


 If you have any sort of interest in web development, you've likely heard of Bootstrap. According to the official website, Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. Sounds great! Now how do I use it?
 
It would be easy to send you over to their Getting Started page and call it a day. Their setup guide is indeed a host of useful information - links to CDNs, explanations on how to install with Bower, npm, and Composer, information on integration with Autoprefixer and LESS, a bunch of templates, licenses, and translations - but it is certainly not a step by step guide to getting started (which very well might be in the spirit of autodidactic).
 
When I discovered Bootstrap a few years ago, responsive design was still gaining in popularity, and not necessarily the expected norm. Having only ever made websites from scratch, I was a little confused about the entire concept of a framework. I would imagine it's even more confusing for beginners who are now expected to learn responsive design concepts and Bootstrap and JavaScript libraries, in addition to HTML, CSS and JS.
 
This guide is meant, as a first look into Bootstrap for beginners, so won't be going into LESS and Sass integration, which are more intermediate/advanced concepts. While it is written for the current, stable version Bootstrap 3, the concepts will remain the same for future versions.
 
Goals
Learn what a front-end framework is and how it can be useful
Understand how to properly include Bootstrap's CSS and JavaScript and begin customizing
Prerequisites
Basic knowledge and understanding of HTML and CSS
What is Bootstrap?
Bootstrap can be boiled down to three main files:
 
bootstrap.css - a CSS framework
bootstrap.js - a JavaScript/jQuery framework
glyphicons - a font (an icon font set)
Additionally, Bootstrap requires jQuery to function. JQuery is an extremely popular and widely used JavaScript library, that both simplifies and adds cross browser compatibility to JavaScript.
 
Everything else you might happen across while studying the Bootstrap documentation - Grunt, Gulp, Sass, LESS, bower, npm, etc - is not necessary to get started with Bootstrap. These are task runners, preprocessors, installation aids, and package managers, so don't be discouraged if you don't know how to use any of them yet.
 
Why is a framework important? Do I need to use one?
You absolutely don't need to use a framework - I recently wrote an article called You Don't Need a Framework: Understanding the Fundamentals of Responsive Design, which I would recommend reading if you want to learn more about responsive design. However, frameworks are very popular and have many benefits, so it's important to learn how to work with them.
 
Some of the ways that frameworks can help you:
 
Prevent repetition between projects
Utilize responsive design to allow your website to adapt to various screen sizes - mobile, desktop, and everything in between
Add consistency to design and code between projects and between developers
Quickly and easily prototype new designs
Ensure cross-browser compatibility
Generally, every web project you work on will need to be responsive and work properly on all the major browsers, and likely have some fallbacks for older browsers. Bootstrap has a huge open source community that works on covering this so you don't have to. Additionally, when multiple developers all know the same system, they can work in better harmony - and it also makes it easier for newcomers on a project to get up to speed.
 
 

The grid is probably one of the most essential aspects of the framework. It's the basis on which the entire layout is created. Beyond that, Bootstrap's core CSS will also add helpful styling to forms, tables, buttons, lists, and images, as well as fully functioning navigation bars, while the core JavaScript will add helpful code for creating modals, carousels, alerts, popups, dropdowns, and accordions.