Bootstrap Framework Quick Start

There's been a lot of buzz lately about Twitter's Bootstrap framework, many new excellent websites are built upon Bootstrap solid framework. whether your need is a responsive grid system or pre-styled typography, Bootstrap comes in handy, it is very easy to start and well documented. But if you are wondering where to start, look no further, because I am going to show you how responsive layout using Bootstrap works and how we can use it to create flexible websites, let's get started.

What is Bootstrap?

Bootstrap is a open source(free) front-end framework library for web developers, it was developed by Twitter's Mark Otto and Jacob Thornton. Bootstrap comes with CSS stylesheets and jQuery plugins, which can be included in web projects for creating amazing websites and web applications rapidly. Since version 2.0 bootstrap supports responsive designs, this means web pages based on Bootstrap adjusts dynamically in tablet, desktop or smartphone.

Customize and Download Bootstrap

Bootstrap can be customized and downloaded here, just select components you need for your website, if you are unable to decide or confused, just select everything and hit download button, you can customize it later again when you are more familiar the framework. Extract the zipped file, and you should get following structure of folders and files. Good thing about customized download is that you want to include only things you need for your project and keep files smaller as you can. Once you download and extract you get both compiled and minified file variations. These two files: bootstrap.min.css & bootstrap.min.js with extension min.js and min.css are compressed files, if you open these files you'll find no spaces and extra lines, its a strategy to save you few bytes and improve load time performances of your website. Since we only need minified versions bootstrap.min.css & bootstrap.min.js, we can delete other two non-minified files bootstrap.css & bootstrap.js at this point.

jQuery

Before we start, we also need latest jQuery from their download page, and include it inside Bootstrap JS folder. All bootstrap plugins are based on jQuery, so we must include jQuery before the bootstrap JS file so that things like bootstrap transition effects, dropdown, modal and popover effects run smoothly.

Include Bootstrap into your project

One thing you must not forget to include within head tag is viewport meta tag: When loading the page, viewport meta tag ensures that the layout will be displayed properly at 1:1 scale. No zooming or side scrolling will be required, the browser will shrink the width of the layout to fit user's screen. Without this tag, browser will not adjust the width of your page layout and users will have to scroll to see more of the webpage.

The Grid & Markup

Bootstrap default grid system comes with standard 12 columns, making for a 940px wide container. Below 767px viewports, all columns in the containers automatically become fluid and stack vertically.Fixed Container: Without making things anymore complicated, Lets see how easily we can achieve simple fixed 2 column layout with Bootstrap:As you can see the columns are wrapped within row and row is wrapped in the container. Since Bootstrap supports 12 columns, span number should always add up to 12, no matter how many columns you may decide to place in there. Here's another example:Lets break things up in a picture to see how our layout renders on a browser:Here's our code so far, I have added bit of own style here, just play with example code below, try adding up columns and rows, resize browser to different sizes or test it in various devices: [cc lang="html"] [/cc]

Adding Navigation

At this point you must be clear about Bootstrap responsive grid system, many grid frameworks out there work similar way, but Bootstrap is more advance and powerful, because it comes packed with many features such as buttons, modal box or the Navigation bar.Navigation is very important part of any websites, but many beautiful navigation menus don't really work with responsive layout and would distort and fail! because they are not designed to adopt to the different screen sizes. Thanks to Bootstrap, we can have a responsive navigation bar, which will automatically collapse and adjust to different screen sizes.HTML Example below to achieve a Bootstrap collapsible navigation bar. [cc lang="html"] [/cc] We can also change the position the navigation bar simply by adding following class names: Fix the navbar to the top: [cc lang="html"] [/cc]Or the bottom: [cc lang="html"] [/cc]For dark backgrounds, you can inverse the color of the navbar: [cc lang="html"] [/cc]

Conclusion

At this moment, you must be feeling pretty confident about the whole Bootstrap thing, but this is not the end, I suggest you go further and find out how to use Bootstrap Dropdown menus, Modals, tabs and more, Good luck.