lets say I have a row like this:
<div class="row">
<div class="col-md-4">
stuff
</div>
<div class="col-md-8">
stuff
</div>
</div>
How do I get the first grid (col-md-4) while you scroll down the second grid (col-md-8)?
do I use row or do I need to change the grids to containers?
----EDIT----
trying to use data-spy="affix" as show below but still can't get it to work...full code:
<div class="row">
<div class="col-md-2" style="border:1pt solid black" data-spy="affix">
<br><br><br><br>
<div class="row">
<h4>Select Time Series:</h4>
<div class="btn-group-vertical" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="timeoptions" id="yr" autocomplete="off" checked value="yr" ng-model="yAxistm" ng-model-options="{timezone: '-0500', updateOn: 'default blur', debounce: { 'default': 1, 'blur': 0 }, allowInvalid: false}">Yearly
</label>
<label class="btn btn-primary">
<input type="radio" name="timeoptions" id="qtr" autocomplete="off" value="qtr" ng-model="yAxistm" ng-model-options="{timezone: '-0500', updateOn: 'default blur', debounce: { 'default': 1, 'blur': 0 }, allowInvalid: false}">Quarterly
</label>
<label class="btn btn-primary">
<input type="radio" name="timeoptions" id="mth" autocomplete="off" value="mth" ng-model="yAxistm" ng-model-options="{timezone: '-0500', updateOn: 'default blur', debounce: { 'default': 1, 'blur': 0 }, allowInvalid: false}">Monthly
</label>
</div>
</div>
<br>
<div class="row" style="border:1pt solid black">
<h4>Select Chart Type:</h4>
<div class="btn-group-vertical" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="chartoptions" id="multiBarChart" autocomplete="off" checked value="multiBarChart" ng-model="chrtTyp" ng-model-options="{timezone: '-0500', updateOn: 'default blur', debounce: { 'default': 1, 'blur': 0 }, allowInvalid: false}">Bar Chart
</label>
<label class="btn btn-primary">
<input type="radio" name="chartoptions" id="lineChart" autocomplete="off" value="lineChart" ng-model="chrtTyp" ng-model-options="{timezone: '-0500', updateOn: 'default blur', debounce: { 'default': 1, 'blur': 0 }, allowInvalid: false}">Line Chart
</label>
<label class="btn btn-primary">
<input type="radio" name="chartoptions" id="stackedAreaChart" autocomplete="off" value="stackedAreaChart" ng-model="chrtTyp" ng-model-options="{timezone: '-0500', updateOn: 'default blur', debounce: { 'default': 1, 'blur': 0 }, allowInvalid: false}">Stacked Area Chart
</label>
</div>
</div>
<br>
<div class = "row">
<button uib-tooltip="Export data to CSV" class="btn btn-default btn-sm" ng-csv="export_data" csv-header="['SCENARIO_ID', 'SCENARIO_DESC', 'SCENARIO_STATUS', 'SCN_APPL_LOB_OWNR_NM',
'SCN_APPL_SUB_LOB_OWNR_NM', 'SCENARIO_ASV_ID',
'APPL_CI_ID', 'APPL_CI_NM', 'APPL_CI_COMM_NM', 'APPL_LOB_OWNR_NM', 'APPL_SUB_LOB_OWNR_NM',
'COST', 'AGG_COMPLEXITY', 'SRVC_LVL', 'DC_LOC', 'START_DT', 'END_DT',
'DECOMM_DT', 'ASV_TARGET_ID', 'ASV_TARGET_DESC', 'ASV_TARGET_MASTER', 'TYPE', 'DT',
'MTH_DT', 'ENV_STAT', 'ENV', 'COST_CURR', 'QTY_CURR','COST_TRGT', 'QTY_TRGT', 'FTPRNT']" filename="report_data.csv"><span class="glyphicon glyphicon-download"> </span> Export Data to CSV
</button>
</div>
</div>
<div class="col-md-10">
<treasure-overlay-spinner active='spinner.active'>
<h1 align="center">Scenario Reporting</h1>
<div class="row">
<div class="col-md-5 col-md-offset-1">
<div class="report-tile">
<nvd3 options="options_scn_lvl_cnt" data="data_LvlCntByScn"></nvd3>
</div>
</div>
<div class="col-md-5">
<div class="report-tile">
<nvd3 options="options_scn_lvl_cst" data="data_LvlCstByScn"></nvd3>
</div>
</div>
</div>
<h1 align="center">Scenario Specific Reporting</h1>
<div class="row">
<div class="col-md-5 col-md-offset-1">
<div class="report-tile" ng-repeat="data in data_cntByScn">
<h3>Scenario {{ data.key }} Total ASV Count</h3>
<nvd3 options="options_scn_cnt_compare" data="data.values"></nvd3>
</div>
</div>
<div class="col-md-5">
<div class="report-tile" ng-repeat="data in data_costByScn">
<h3>Scenario {{ data.key }} Total Cost</h3>
<nvd3 options="options_scn_cst_compare" data="data.values"></nvd3>
</div>
</div>
</div>
</treasure-overlay-spinner>
</div>
</div>
----EDIT 2---------
trying macgyver library but for some reason, my second column col-md-10 shifts to the left when I scroll and overlaps the first column then...
<div class="row">
<div class="col-md-2" style="border:1pt solid black" mac-affix >
<br><br><br><br>
<div mac-affix>
<div class="row">
<h4>Select Time Series:</h4>
<div class="btn-group-vertical" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="timeoptions" id="yr" autocomplete="off" checked value="yr" ng-model="yAxistm" ng-model-options="{timezone: '-0500', updateOn: 'default blur', debounce: { 'default': 1, 'blur': 0 }, allowInvalid: false}">Yearly
</label>
<label class="btn btn-primary">
<input type="radio" name="timeoptions" id="qtr" autocomplete="off" value="qtr" ng-model="yAxistm" ng-model-options="{timezone: '-0500', updateOn: 'default blur', debounce: { 'default': 1, 'blur': 0 }, allowInvalid: false}">Quarterly
</label>
<label class="btn btn-primary">
<input type="radio" name="timeoptions" id="mth" autocomplete="off" value="mth" ng-model="yAxistm" ng-model-options="{timezone: '-0500', updateOn: 'default blur', debounce: { 'default': 1, 'blur': 0 }, allowInvalid: false}">Monthly
</label>
</div>
</div>
<br>
<div class="row" style="border:1pt solid black">
<h4>Select Chart Type:</h4>
<div class="btn-group-vertical" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="chartoptions" id="multiBarChart" autocomplete="off" checked value="multiBarChart" ng-model="chrtTyp" ng-model-options="{timezone: '-0500', updateOn: 'default blur', debounce: { 'default': 1, 'blur': 0 }, allowInvalid: false}">Bar Chart
</label>
<label class="btn btn-primary">
<input type="radio" name="chartoptions" id="lineChart" autocomplete="off" value="lineChart" ng-model="chrtTyp" ng-model-options="{timezone: '-0500', updateOn: 'default blur', debounce: { 'default': 1, 'blur': 0 }, allowInvalid: false}">Line Chart
</label>
<label class="btn btn-primary">
<input type="radio" name="chartoptions" id="stackedAreaChart" autocomplete="off" value="stackedAreaChart" ng-model="chrtTyp" ng-model-options="{timezone: '-0500', updateOn: 'default blur', debounce: { 'default': 1, 'blur': 0 }, allowInvalid: false}">Stacked Area Chart
</label>
</div>
</div>
<br>
<div class = "row">
<button uib-tooltip="Export data to CSV" class="btn btn-default btn-sm" ng-csv="export_data" csv-header="['SCENARIO_ID', 'SCENARIO_DESC', 'SCENARIO_STATUS', 'SCN_APPL_LOB_OWNR_NM',
'SCN_APPL_SUB_LOB_OWNR_NM', 'SCENARIO_ASV_ID',
'APPL_CI_ID', 'APPL_CI_NM', 'APPL_CI_COMM_NM', 'APPL_LOB_OWNR_NM', 'APPL_SUB_LOB_OWNR_NM',
'COST', 'AGG_COMPLEXITY', 'SRVC_LVL', 'DC_LOC', 'START_DT', 'END_DT',
'DECOMM_DT', 'ASV_TARGET_ID', 'ASV_TARGET_DESC', 'ASV_TARGET_MASTER', 'TYPE', 'DT',
'MTH_DT', 'ENV_STAT', 'ENV', 'COST_CURR', 'QTY_CURR','COST_TRGT', 'QTY_TRGT', 'FTPRNT']" filename="report_data.csv"><span class="glyphicon glyphicon-download"> </span> Export Data to CSV
</button>
</div>
</div>
</div>
<div class="col-md-10">
<treasure-overlay-spinner active='spinner.active'>
<h1 align="center">Scenario Reporting</h1>
<div class="row">
<div class="col-md-5 col-md-offset-1">
<div class="report-tile">
<nvd3 options="options_scn_lvl_cnt" data="data_LvlCntByScn"></nvd3>
</div>
</div>
<div class="col-md-5">
<div class="report-tile">
<nvd3 options="options_scn_lvl_cst" data="data_LvlCstByScn"></nvd3>
</div>
</div>
</div>
<h1 align="center">Scenario Specific Reporting</h1>
<div class="row">
<div class="col-md-5 col-md-offset-1">
<div class="report-tile" ng-repeat="data in data_cntByScn">
<h3>Scenario {{ data.key }} Total ASV Count</h3>
<nvd3 options="options_scn_cnt_compare" data="data.values"></nvd3>
</div>
</div>
<div class="col-md-5">
<div class="report-tile" ng-repeat="data in data_costByScn">
<h3>Scenario {{ data.key }} Total Cost</h3>
<nvd3 options="options_scn_cst_compare" data="data.values"></nvd3>
</div>
</div>
</div>
</treasure-overlay-spinner>
</div>
</div>
