How to build responsive web using templates and bootstrap? - html

Question

I'm building a web app with meteor. Right now, I'm trying to create this web page containing two templates.
Basic design layouts:
First template: This template includes the Left Menu Bar (4 tabs).
Next is what it looks like after adding the 2nd template (purple).
What I want to do is to switch templates in the purple area for the 4 tabs, while keeping the rest layout. I'm using bootstrap to set the layout. However, when I try to resize the window to a smaller one:
issue 1. the green and purple parts will stack on each other.
issue 2. After I set a top padding to move the purple area down, when I scroll down, there is still a part where these two templates will stack on each other.
What would be the best approach here?
Here are my codes:
<template name="layout">
{{header}}
{{> Template.dynamic template=template1}}
{{> Template.dynamic template=purpleTemplate2}}
{{> footer}}
</template>
Inside first template:
<div>
<div class="col-xs-12 col-md-3" >
//content - four tabs
</div>
<div class="col-xs-12 col-md-9">
</div>
</div>
Inside second template:
<div id="tab1">
<div class="col-xs-12 col-md-3" >
</div>
<div class="col-xs-12 col-md-9">
//tab 1 content
</div>
</div>
same as ...tab2 ...tab3 ...tab4
I hope this makes sense. I'll be glad to provide you with more details if needed. Thank you in advance for your help!!
JUST ADDED:
Ideally, it should look like this when I resize the browser:
However, it looks like this:
The left menu bar stays on top, which is what I want. But when I scroll down the purple area will scroll up and cover the menu. Also, the footer seems to stay with the purple area as well.

Answer 1

We can start by setting up wrappers to the dynamic templates. like this:
<div class="col-xs-12 col-md-3" >
{{> Template.dynamic template=template1}}
</div>
<div class="col-xs-12 col-md-9">
{{> Template.dynamic template=purpleTemplate2}}
</div>
This means you probably not need the bootstrap cols inside your dynamic html.
heres an example I whipped up:
http://codepen.io/nilestanner/pen/PGwAXL