Adding a simple menu to the pages we are going to create

One last thing add to the pages is a menu for navigating the site. We will use the navbar that comes with Bootstrap for that. You can add it in several ways just by changing the classes. The basic structure is the same for all. You create a <nav> or <div> tag with the navbar classes and add a <ul> containting <li> elements for the menu. The menu it self, contains links for navigation. You can set one of them active (stand out) by adding the class "active". 

That's the theory, and here is the code as found in the about page:

<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="/">DG3 by Example</a>
</div>
   <div class="navbar-collapse collapse">
     <ul class="nav navbar-nav">
       <li><a href="/landing/">Home</a></li>
       <li class="active"><a href="/about/">About</a></li>
       <li><a href="/contact/">Contact</a></li>
    </ul>
  </div>
</div>
</nav>

The nice thing about using the bootstrap components, are that they already works for all from mobile to big desktop. A nav menu will show as a dropdown on a phone, but will stick to the top and show all menus when there are enough room in the web browser. 

This is how it looks in medium desktop:

And this on mobile phone both collaped and expanded versions:

The well

To make something stand out, you can use add the class well as used for the field below the heading. 

<div class="well"><p>4ThePeople Limited is a new vehicle that was set up to fund the development of the next generation of DataEase products - DataEase Generation 3. The project that is now called DataEase Generation 3 - DG3 for short - was started in 2007 under the "code name" DataEase4Web. In the early years, this was funded by the Nefines Group, but a special vehicle was set up in 2010 to focus 100% on DG3.</p></div><br>

Pull right

To add elements to the right on the screen outside the grid, you can add the class "pull-right". There are several helpers to move elements like this. If you look at the code for the contact us section, you will find that it comes before the body text describing the company. We want to add it to a side panel where the rest of the text float around. To do this you simply use the pull-right helper class and the framework do the rest. Here is the code:

<div class="pull-right panel panel-primary"  style="margin-left:10px;">
<div class="panel-heading">Contacting Us</div>
<div class="panel-body">
If you have any questions or queries please contact 4ThePeople at:<br/><br/>
4ThePeople Limited<br/>
8 High Street<br/>
Ivinghoe<br/>
LU7 9EX<br/><br/>
Registered in England & Wales  registration number: 07226697<br/><br/>
Contact: desales@dataease.com Phone: +44 (0) 203 28 666 28
</div>
</div>

<div>
<p>4ThePeople had the first version of DG3 ready in April 2011
<br>

We add a little in-line style to add a little margin to the left of the box. As long as it is a one of and note used on a lot of elements,this is not a bad thing to do. If you add each and every small adjustment to you css, this will make just make it large and hard to read. Cheat if that is what it takes to get your site ready on time. The colour on the heading comes from the colour set for primary elements. You will find the same colours for buttons as well.

Copy the menu to all the other pages

Later we will look at a better way, but for now, you only get the menu on the about page.To get it on all pages, just copy the menu code into each page and change the active to the right page.