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 create a basic responsive layout using Bootstrap, focusing on some fundamental stuff to get you started quickly.
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. 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 get all checked CSS and jQuery plugins compiled into just two minified file : bootstrap.min.css & bootstrap.min.js. File with extension min.js and min.css are compressed files, it is a process to reduce the file size to improve load time performances. 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.
Before we start, we also need latest jQuery from their download page, and include it inside Bootstrap JS folder.
Please note: we can build a page layout without including jQuery or Bootstrap JS file, but we might want to use other Bootstrap features, such as transition effects, dropdown, modal or popover effects etc, which are all jQuery based plugins and require jQuery to run.
Include Bootstrap into your project
Another thing you must not forget to include within head tag is viewport meta
<meta name="viewport" content="width=device-width, initial-scale=1.0">. Viewport meta tag indicates that the site is Responsive & optimized for mobile. without this tag, your website may fail to adjusts dynamically in different devices, such as tablet, desktop or smartphone.
The Grid & Markup
Bootstrap default grid system comes with standard 12 columns, and option to choose from fixed or fluid container. Difference is that the fluid container covers 100% width of screen, and fixed container doesn’t go further than 724px or 1170px wide depending on your viewport. Below 767px viewports, all columns in the containers automatically become fluid and stack vertically. It is up to you to choose the container that fits your requirements.
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.
Fluid Container: To create a fluid two-column layout, just change
<div class="container"> to
<div class="container-fluid"> and
<div class="row"> to
Here’s example of fluid 2 column layout with 2 rows:
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, change container to fluid and fixed, resize browser to different sizes or test it in various devices to understand the difference more clearly:
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.
We can also change the position the navigation bar simply by adding following class names:
Fix the navbar to the top:
Or the bottom:
For dark backgrounds, you can inverse the color of the navbar:
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.