Now that Bootstrap is added to the template, we are ready to start using it to create our pages. As you might noticed when we edited the template, we only added one block in the body tag of the template. This means that all code for the body of the page comes from the page document in the DG3 editor. Later on we will do more in the template, but for now to illustrate the structure for building and using the fabulous grid system in Bootstrap, we want all in our pages.

<body>
{% block content %}
{% endblock %}
</body>

So the first we will do is to change our "hello world" page to something useful. We gave it the name landing, so head back to the Designer and open the landing page. This can be done by double clicking the name or right click and select open from the context menu. Once the page is open, we do not want to use the build in richtext editor like we did when creating hallo world. Instead we will use the raw html editor. We will that for all the exercises in this book. Other product in the DG3 range will come that cover making web pages without knowing how html works. DG3 in the current state is not one of them. To create anything nice working and looking in the DG3 alpha product, you have to dive into html and css, and some times javascript. DG3 will do most of the heavy lifting when it comes to fields, database connection, DQLs and when it comes to do backend stuff like uploading images, sending mail, schedules task and search, but not to design and style. This product is all about getting all the technology to work well together. So here are the basic steps to go into the html editor for a page element. Click on the page element and locate the Element proper ties. There you will find a dropdown named Box type. There are two different type, dg3 and html. The dg3 type will be a full page designer, but for now it is a basic richtext editor. The html type is to render raw html that is edited in a separate editor that you can reach from the page designer. Change box type from dg3 to html and click inside the page element again. Now it will only render the content in designer.

To get to the raw html editor: right click and select "Open html designer". This will open a new tab with a html editor. If you select the "Edit html" instead, a dialog will pop up where you can edit the html, but you will not get element properties and tools for field, buttons, livetext etc. The name of the html editor tab will be the same as for the element name (default is box1-2-etc).

Now you can edit the raw html  that is rendered for the box element. DG3 takes every elements on the page and renders it to raw html in a template that then is merged with the base template. Now select and change the html in the editor to read:

<h1 class="page-header text-center">This is the home page</h1>
<p class="lead">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>

Then exit the html editor by using close button. This will return you tho the page editor where you can see a kind of preview. If you want a proper test of the page, you can press the preview browser icon at the top and use the preview browser or the preview tab at the bottom.

Typography

Bootstrap tries to makes in unnecessary to use inline styles. It will take care of the most common elements and style them to work in a manner that is pleasing. There usually are just one font for heading and one for text. It is common to say that a web site should maximum use three different fonts and just a few different sizes in this font. As with every thing else in bootstrap, you add a class to a standard element to do some common styling to it. Here are a few of the one we use on this homepage, the rest can be found in the bootstrap documentation pages at http://getbootstrap.com/css/#type.

To make our header stand out, we add the page-header class. To get it centered we add the class text-centered, you also heave text-left, text-right and text-justify that can be used on any text. We use the class "lead" to make the first paragraph a little bigger font for your most important text, but you can also use the "strong" tag for bolding text and "em" tag for italics. Bootstrap also have a few colors that are used in all of its components: the class used is text-value that might be: muted, primary, success, warning and error. Ex. text-primary. We will decribe more of these classes as we use them.