Website Troubles - two column layout

[theos71901143]

Hello, Ive been trying to find the answer to this for so long now, and Im sure its pretty simple.

I want to be able to have some text on the side, as well as the centre, like a separate column/box for key information.

This is my site: theosparks.co.uk

If you click on one of the portfolio boxes, you'l see there is text in the middle of the page, I want to have another smaller column on the right hand side of the page, for some key bits of information to be (this section I want to be a lot smaller than the main section, its just for key bits of information).

Can someone please point me in the right direction to make this a reality?

Thank you Dream Weaver gurus.

All the best,

Theo.

[Nancy OShea]

Why are you using modal windows for your project pages?  Your page speed performance scores an F.

Latest Performance Report for: http://theosparks.co.uk/ | GTmetrix

A better approach would be to put projects on individual pages with whatever multi-column layout you wish to use. 

Also you have way too many (174) code errors.   You should fix those.

Showing results for http://theosparks.co.uk/ - Nu Html Checker

[Nancy OShea · Accepted solution]

For 3 column layout, use this code in project pages.

<div class="container-fluid">

<div class="row">

<div class="col-md-3">

<h2>Column 1</h2>

<p>Donec id elit non mi porta gravida at eget metus.  </p>

<p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>

</div>

<div class="col-md-6">

<h2>Column 2 (wide)</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis necessitatibus, tempora, aperiam expedita ullam laudantium consequuntur quos commodi maiores possimus fugit pariatur aspernatur sit quae, voluptates nisi earum aliquid placeat!Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>

<p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>

</div>

<div class="col-md-3">

<h2>Column 3</h2>

<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. </p>

<p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>

</div>

</div>

</div>

[theos71901143]

Thank you so much Nancy.

Is there any way to make column 2 wider?

Theo.

[Nancy OShea]

Bootstrap is a 12-box grid system.

col-nd-3 + col-md-6 + col-md-3 = 12

or  2 + 8 + 2 = 12

or 1 + 10 + 1 = 12

Use the col sizes that best fit your layout and add up to 12