More formating

Now that we have the basic structure on our pages with a menu that shows active page, we can get down to finish our landing page. First of all, we want to add a big article and some images. The buttons should also be aligned for the small articles and have a nice icon.

Add the big article with image

First make a new row to add the full width article. In that row we add a medium column 9 and one 3 for the image. This makes up the full width of 12. We also add the button to it's own row to make that come in it's own line and not interfere with the article text. We will use the same technique for the small articles. To make all the articles the same height, we will need to add our own css. We can do this directly on the page or in the global application wide CSS found in the "Style" section.

Style section to add global style loaded in all pages that load base.css file.

<div class="row">
<div class="col-md-9  art-big">
<h4>The Story behind....</h4>
<p>All the fuss at the moment is about DataEase 8 and that is as it should be as we gear up towards the release. But I can't help thinking that a lot of what is going to make DataEase 8 a great product, and the DataEase 8 product range the most productive DataEase range since DFD is down to it's younger brother - DataEase Generation 3.</p>
<p>We have kept silent about DG3 because we wanted to finish it in peace but it is now time to start showing and talking a little more about the truly new member of the DataEase family.</p>
</div>
<div class="col-md-3">
<img class="img-thumbnail pull-right" src="/static/images/storybehind_de8.png" alt="story behind">
</div>
</div>
<div class="row art-btn-sm"><a class="btn btn-primary btn-xs pull-right" href="#">Read more</a></div>
<hr/><br>

We added the img-thumbnail to the image and to make it as far left as possible, we added pull-righ. In this example this will not do any extra, since the image fills the entire col-md-3, but would be nice for a smaller image. We used the <img> to make it easier to understand what is being done. You can just as easy do this using the image snippet.

.art-sm {
	height : 174px;
	overflow : hidden;
	padding-right: 10px;
}

.art-btn-sm {
	padding-right: 10px;
}

.art-big {
	height : 174px;
	overflow : hidden;
	padding-right: 10px;
	padding-left: 0px;
}<br>

The style to make the elements aligned and the right height with overflow hidden. Found in base.css in the style section.

The new version of the landing page.

Images in Bootstrap

Images can be added by using img tag or the image snippet. To make text flow to the left or the right of the image, use the classes "pull-right" and "pull-left". To make the image scale use the "img-thumbnail" class. This makes some space around the image and makes it scale to fit the different screen sizes. To just make the image responsive add the class "img-responsive". This makes sure the image behave well in all devices.