Structuring a page using the grid

Now that we have created a few pages for out web site, we want to give the site a basic structure. To do this we could manually do it by creating page elements as div and then manually style and float each of them by editing the style sheet for the site or add it directly to each document. We will do some styling out self later on in this book, but for now we will let Bootstrap take care of this for us and focus on the content. To do this we will need some background on the concept of grids in Bootstrap.

Grids

One of the things you will find when you are creating web applications are a grid system. In the early days, you usually just used to create a fixed size 950px wide design that had an auto margin. This will make it easier for you to know exactly how your web application will look and behave in all browser down to the pixel. The problem however is that you will have to scroll or zoom on mobile phones and tablets in portrait mode, and get wide spaces on the side on desktop computers. Now when everybody expect a web site to behave proper in all from a mobile phone, to a big desktop and all in between, this is not the way to go anymore. That is why Bootstrap and other framework have started to offer a responsive grid system. The grid will automatically adapt to different screen sizes and change font sizes and spacing to fit. All of this are controlled using some basic css classes and standard html elements.

In Bootstrap you divide the web pages into containers that can hold rows and columns. Each row can be divided into 12 columns. These are automatically scaled to fit the different screen widths automatically. Each of the columns can nest a new grid of rows and 12 columns. This give you all the flexibility you need. Bootstrap then have default spacing between the columns based on the screen size. If the default do not fit your needs, you can build a custom version of Bootstrap where you can change the break points an spacing. For now an in the first part of this book, we will only use the default version with some custom themes.

The container

The outer element in the Bootstrap grid is the container. The container wraps all other elements and can not be nested. You can have several containers on a page that will work as separate areas like header, main body and footer. There are two types of containers, the fixed and the fluid. The fixed will have a size that only changes on the break points. The fluid will fill the screen estate and scale with percents. Ideally we would want to use the fluid, but it is much harder to test and get working well as you never know how wide the browser windows will be anytime. In this book we will stick to the fixed reactive model. To use the containers, you simply add a class to a page section.

Container sizes

The default breakpoints in the grid system widths for a standard container are:

The problem with larger screen sizes is the biggest flaw of Bootstrap as far as I can see, but one that we can live with giving all the other goodies that it gives.

Rows

Inside the container you can split down the pages to rows. You do not have to add a row, but if you wants a clean break on your page this is the way to do it. Each row starts from the left and gives you the full with of your container based on the device size. To add a new row, make a section in your html and add a row.

Columns

This is the real nice part of the grid system. If you ever tired to make a web site without a grid system, you will know how hard it is to get tings to fit and float right. To get elements to stack as columns in a web browser means getting all the elements to add up to a certain and do css trickery using "float right", "float left" and "clear" all the right places. One small error or some bad implementation of a browser and you have elements all over the page and not where you want them. This is where the column system of Bootstrap comes to your rescue and one of the main reasons to use a css framework like Bootstrap.

Bootstrap divides section into 12 columns. You can combine as many of each as you like, as long as the final number adds up to 12. This means that if you want to divide your browser into two equal sized parts, you add two column of size 6. If you want a navigator on the left and some commercials on the right with the size of 3/12 for the navigator 8/12 for the content and 1/12 for the commercials, you creates three columns with size 3, 8 and 1 as 3+8+1=12. You get it? 

You think this will be inflexible and hard to get working in a real site? Then we have another treat, you can divide each of the sections you just created by nesting them. So you can have as many rows as you like and as many new columns as you like inside any of the outer containers. If you need any more flexibility that that, you could always create your own version of Bootstrap of simply do all the heavy lifting of css your self.

Examples in DG3

The landing page should be with a nice heading and then news in three columns and a nice footer. Here is how.

<div class="jumbotron">
<div class="container">
<h1>DG3 by Example</h1>
<p>This is a site dedicated to the fanstastic product of DG3.</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<h4>DG3 - An independent child.</h4>
<p>DG3 is not an upgrade! It wasn't even created as an upgrade migration path for existing DataEase users.</p>
<p>With DG3 the idea of DataEase has been re-invented. All the DFD versions are just evolutions of the same product. DataEase for Windows is what it is, but a genuine idea and direction is not what you primarily associate with it. In my mind it is a little like a chronic disease, you live with it but would rather be without - this is of course a private view and</p>
<a class="btn btn-primary btn-xs pull-right" href="#">Read more</a>
</div>
<div class="col-md-4">
<h4>An Open product Open Closed Doors.</h4>
<p>DG3 is not an open source product but it is an open product. So what is the difference?</p>
<br/>
<p>DataEase has always been a "closed" product. The only way you could ever influence its behaviour was through CDFs and not many people ever ventured down that path.</p>
<a class="btn btn-primary btn-xs pull-right" href="#">Read more</a>
</div>
<div class="col-md-4">
<h4>DG3 - the spider in your web.</h4>
<p>We have been working with DG3 for over 4 years so it is almost second nature to us and sometimes we forget that to most people this is a completely new offering - a completely new product.</p>
<br/>
<p>DG3 is not one product, it is a range of products, and our goal is to bridge a lot of gaps that were not bridged before.</p>
<a class="btn btn-primary btn-xs pull-right" href="#">Read more</a>
</div>
</div>
<hr/>
<footer>
<div class="text-center"><a href="/about/">About 4ThePeople Limited</a>|<a href="/contact/">Contact Us</a></div>
<p class="text-center"><small>Copyright © 2014 4ThePeople Ltd & DataEase International Ltd. All Rights Reserved</small></p>
</footer>
</div>

This should give a landing page looking like this, a little dull without any images and the buttons do not line up, but we will fix up that later. This is all about the structure of the page.

If we start looking at each of the three parts of the page, the top, the main part and the footer and look at how they behave and how they change when moving from small desktop to narrow phone.

The jumbotron

In the first section of the page we add a class called the jumbotron. This is one of the predefined page elements found in Bootstrap. It gives a full width element bit a different background and more visible fonts that the standard. To make the content fit the rest of the page we add a container element inside the jumbotron. There are several other page elements in Bootstrap that you can use for highlighting elements on your web page like the page header, panels, wells and the carousel. These and how they work can be found in components and javascript sections of the bootstrap web site.

The footer

As you can see the we use the new html 5 footer tag to add a page footer. You can just as well use a div, but using the new section tag will make it clearer for you and the search engines what the parts contains. To center the links we wrap the <a> tags in a div and add the text-center class. I the next text only line, we add the class text-center direct on the <p> tag. As you can see, it works the same for both. The text-align commands work on any kind of element that can hold texts.

The main section

This is where we use the grid for the first time. We do it all by adding classes to <div>s. We use container as the out most, then a row to tell we are making a vertical block, and then we divide the row in three equal parts by using the col-xx-num classes. The col classes can be broken into three different parts, col, size and number of columns. And we have learned that to use all of a row, it should add up to 12. So in this case we did 3 col-md-4 that takes the full width. If we add to many, the overflow will wrap, if we have the few, we will fill the ones given. We told the grid system to use the medium (md) size of the grid. This means that it will show 3 in a row in this browser width, but start stacking the element when on a narrow screen as you can see in the narrow picture.