For those of you who are just joining us, we’d like to introduce you to Bootstrap. Have you heard of Bootstrap web design before? Some people call it a plus for web developers with zero design knowledge, while others call it a blessing for the designers themselves. Whichever it is, using Bootstrap makes things a whole lot easier and faster. Most noteworthy about Twitter Bootstrap is that it is a CSS framework that assists with designing web applications. It is one of the easiest CSS frameworks to use today. It assumes you have no Bootstrap web design knowledge and you want to write some HTML as per the Bootstrap specifications. In short, Twitter Bootstrap has already written a CSS style sheet for you. Most importantly, it has built in jQuery support along with popular JavaScript tools. All in all, there are a handful of popular tools all ready to use. All you have to do is simply place the right HTML markup in the correct place. How cool is that?! Maybe we’re getting a little too excited here. In this Bootstrap web design tutorial, we’ll explain how to use Twitter Bootstrap by showcasing a demo layout page. In addition, we will cover how you can explore the framework of the Bootstrap app and how to customise it for your own requirements.

Getting Started: Bootstrap Web Design

To start using Twitter Bootstrap, first download Bootstrap from their page http://getbootstrap.com/. Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootstrap. You will see something similar to this: The css/, js/, and fonts/ are the source codes for our CSS, JS, and icon fonts. Now, let’s get started. First, open your text editor and create the first file called, “index.html” and save it in the home folder of your project. As a result, the structure of the project should look like this:

Bootstrap Differences

Our main CSS file is bootstrap.css, and we must include that in all of our HTML pages. Bootstrap.min.css is the condensed version of bootstrap.css. It is needed when we are actually deploying our application online. Bootstrap-theme.css is the additional CSS file, which is optional for you to use. It provides a 3D effect on the buttons along with some other flashy elements. Lastly, bootstrap-theme.min.css is a condensed CSS file of bootstrap-theme.css. Most importantly, the biggest difference between Bootstrap 2 and Bootstrap 3 is the use of font files instead of flat images to showcase various image icons. Some of these advantages include:

• Consumes less bandwidth, speeds up the website.
• The font icons are responsive and resizable.

These font icons are called Glyphicons, named after the company that gave these icons for free to Twitter Bootstrap. Moving on to the js folder, we have two files named bootstrap.js and bootstrap.min.js. These files contain Bootstrap web design’s main JavaScript libraries for things like carousels, drop down menus, search auto suggestions and many other powerful JavaScript functionalities. We will use the simplified version once the application is ready for deployment. Now, let’s add the basic tags for the Bootstrap web design app that are present in every HTML document.

Hello world!

The viewport meta tag allows the browser to know that it has to scale your webpage appropriately on every device. Here, we have to set the initial content width to the width of the device and have only needed to scale it once. Now that we have our basic structure ready, we will move on to adding different components into our webpage: Menu section, Header, Content area, and Footer. These components are by far the most important part of every website that we see every day.

Menu Section

Insidetag of html file, add the following:

Most noteworthy is each Bootstrap web design class. Navbar-wrapper class, as the name suggests, is the wrapper to the menu items. Navbar-inverse gives the background colour to the menu. Navbar-fixed-top helps fix the menu bar at the top of the page even if we are scrolling. If you don’t want a fixed top menu, then you can remove this class. Here is what we will have when we run index.html Now, let’s move on to the Header area.

Header Area

Bootstrap 3 provides a highly usable class called Jumbotron. As a result of this, it can be used to display large headers and content. This is mostly used in products selling websites. For this, we need to add the following markup.

Refresh your browser to see the header area.

Content Area

We need to divide the content area into three equal areas and place them on either side of each other. This is called the Bootstrap 3 grid system. You may have heard that Twitter Bootstrap is a 12 grid system. This is indeed true. It divides the screen into 12 equal parts. We need to specify which HTML element occupies which parts of the grid. So, in short, any element will occupy a minimum of one grid in the grid system.

We have defined a row of siblings. In our case, there are three div elements that are contained inside a single row. So we will start a new row by adding a new div within the class row. The row now has three more div tags with the class col-md-4. The number 4 in the class tells us that it occupies four grids. So three sibling divs with four grids will now occupy 12 grids. Now, refresh your browser to see the content area.

Footer Area

The footer area is again similar to the content area. Here’s the markup:

---

 

Since we have used the HTML5 footer tag and a container div and row, we can complete the rest of the design process. Now, divide the whole area into three equal sections with 12 grids system in mind and we will populate each sub division. Finally, refresh your browser to see your whole page. And there you have it! You’ve successfully completed your Bootstrap web design! *Tech Tip: Be sure to add this to your tech portfolio to show future clients. It always looks good to show recruiters and clients you’re continuously learning! Remember, practice makes perfect! If you’re interested in taking more coding tutorials or want to know more about what’s going on in the tech world, be sure to visit our technical blog. So why not strap on those boots and give it a try?