Bootstrap columns with other columns inside - html

Question

I am new to bootstrap and I want to know if I put columns inside another bootstrap column, how can I calculate it?
For example below my first col-md-6 has to "inside" classes. Can I put bootstrap columns to those two boxes? If yes, how can I calculate the number of columns?
I want those tho boxes to be one next to each other, like you put to both float left, but with bootstrap if is possible.
<div class="container-fluid">
<div class=" left-side col-md-6">
<div class="page inside">
<h1>This Is A Title</h1>
<div class="page-text">
<p>This is the price <span>$735</span></p>
</div>
<div class="page-text">
<p>This is the price <span>$735</span></p>
</div>
</div>
<div class="page inside">
<h1>This Is A Title</h1>
<div class="page-text">
<p>This is the price <span>$735</span></p>
</div>
<div class="page-text">
<p>This is the price <span>$735</span></p>
</div>
</div>
<div class="">
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sollicitudin magna in aliquam hendrerit. Duis facilisis ipsum in scelerisque convallis. Vestibulum eget vehicula arcu. Suspendisse viverra accumsan euismod. Maecenas ac felis at mi pellentesque porta. Vestibulum sed metus et enim molestie sodales. Etiam auctor magna ac tincidunt dignissim. </p>
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sollicitudin magna in aliquam hendrerit. Duis facilisis ipsum in scelerisque convallis. Vestibulum eget vehicula arcu. Suspendisse viverra accumsan euismod. Maecenas ac felis at mi pellentesque porta. Vestibulum sed metus et enim molestie sodales. Etiam auctor magna ac tincidunt dignissim. </p>
</div>
</div>
<div class="middle-side col-md-3">
<div class="page">
<h1>This Is A Title</h1>
<div class="page-text">
<p>This is the price <span>$735</span></p>
</div>
<div class="page-text">
<p>This is the price <span>$735</span></p>
</div>
</div>
<div class="page">
<h1>This Is A Title</h1>
<div class="page-text">
<p>This is the price <span>$735</span></p>
</div>
<div class="page-text">
<p>This is the price <span>$735</span></p>
</div>
</div>
<div class="page">
<h1>This Is A Title</h1>
<div class="page-text">
<p>This is the price <span>$735</span></p>
</div>
<div class="page-text">
<p>This is the price <span>$735</span></p>
</div>
</div>
</div>
</div>

Answer 1

Twitter Bootstrap is a 12 column framework so all columns per row should add up to 12.
So yes you can add columns inside other columns as long as you wrap the new columns within a new row div like this:
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="row"> <!-- new row added here -->
<div class="col-md-3">
....
</div>
<div class="col-md-9">
<div class="row"> <!-- even another row for new columns -->
<div class="col-md-5">
....
</div>
<div class="col-md-7">
....
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
....
</div>
</div>
</div>