<div class="row s-lg-row">
<div id="s-lg-col-1" class="col-md-6">
<div class="s-lg-col-boxes">Column 1 Content</div>
</div>
<div id="s-lg-col-2" class="col-md-6">
<div class="s-lg-col-boxes">Column 2 Content</div>
</div>
</div>
<div class="row s-lg-row">
<div class="col-md-4" id="s-lg-col-1">
<div class="s-lg-col-boxes">Column 1 Content</div>
</div>
<div class="col-md-4" id="s-lg-col-2">
<div class="s-lg-col-boxes">Column 2 Content</div>
</div>
<div class="col-md-4" id="s-lg-col-3">
<div class="s-lg-col-boxes">Column 3 Content</div>
</div>
</div>
<div class="row s-lg-row">
<div class="col-md-3" id="s-lg-col-1">
<div class="s-lg-col-boxes">Column 1 Content</div>
</div>
<div class="col-md-3" id="s-lg-col-2">
<div class="s-lg-col-boxes">Column 2 Content</div>
</div>
<div class="col-md-3" id="s-lg-col-3">
<div class="s-lg-col-boxes">Column 3 Content</div>
</div>
<div class="col-md-3" id="s-lg-col-4">
<div class="s-lg-col-boxes">Column 4 Content</div>
</div>
</div>
<div class="row s-lg-row">
<div id="s-lg-col-1" class="col-md-12">
<div class="s-lg-col-boxes">Content</div>
</div>
</div>
You can change the widths of columns by changing the number in the "col-md-6" section of the code. The numbers used must total 12. Thus:
50/50 Columns
<div class="row s-lg-row">
<div id="s-lg-col-1" class="col-md-6">
<div class="s-lg-col-boxes">Column 1 Content</div>
</div>
<div id="s-lg-col-2" class="col-md-6">
<div class="s-lg-col-boxes">Column 2 Content</div>
</div>
</div>
66/33 Columns
<div class="row s-lg-row">
<div id="s-lg-col-1" class="col-md-8">
<div class="s-lg-col-boxes">Column 1 Content</div>
</div>
<div id="s-lg-col-2" class="col-md-4">
<div class="s-lg-col-boxes">Column 2 Content</div>
</div>
</div>
First reference. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Second reference. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Etc. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<div style="padding-left: 4em; text-indent: -4em;">
<p>First reference...</p>
<p>Second reference...</p>
<p>Etc...</p>
</div>
Menu items expand when clicked. Any number of menu items can be used.
<div aria-multiselectable="true" class="panel-group" id="accordion" role="tablist">
<!--Start of Menu Item 1 Code-->
<div class="panel panel-default">
<div class="panel-heading" id="headingOne" role="tab">
<a aria-controls="collapseOne" aria-expanded="true" data-parent="#accordion" data-toggle="collapse" href="#collapseOne" role="button">Menu Item 1</a>
</div>
<div aria-labelledby="headingOne" class="panel-collapse collapse " id="collapseOne" role="tabpanel">
<div class="panel-body">Content 1</div>
</div>
</div>
<!--Start of Menu Item 2 Code-->
<div class="panel panel-default">
<div class="panel-heading" id="headingTwo" role="tab">
<a aria-controls="collapseTwo" aria-expanded="false" class="collapsed" data-parent="#accordion" data-toggle="collapse" href="#collapseTwo" role="button">Menu Item 2</a>
</div>
<div aria-labelledby="headingTwo" class="panel-collapse collapse" id="collapseTwo" role="tabpanel">
<div class="panel-body">Content 2</div>
</div>
</div>
<!--Start of Menu Item 3 Code-->
<div class="panel panel-default">
<div class="panel-heading" id="headingThree" role="tab">
<a aria-controls="collapseThree" aria-expanded="false" class="collapsed" data-parent="#accordion" data-toggle="collapse" href="#collapseThree" role="button">Menu Item 3</a>
</div>
<div aria-labelledby="headingThree" class="panel-collapse collapse" id="collapseThree" role="tabpanel">
<div class="panel-body">Content 3</div>
</div>
</div>
</div>