bootstrap grid relative to containing div instead of window - css

Question

Please see this pen for a quick example http://codepen.io/Irish1/pen/mymBje
html
<div class="container A">
<div class="col-xs-12 col-md-4 border1 height"></div>
<div class="col-xs-12 col-md-4 border2 height"></div>
<div class="col-xs-12 col-md-4 border3 height"></div>
</div>
<div class="container B border1">
<div class="col-xs-12 col-md-4 border1 height"></div>
<div class="col-xs-12 col-md-4 border2 height"></div>
<div class="col-xs-12 col-md-4 border3 height"></div>
</div>
css
.height {
height: 20px;
}
.B {
width: 325px;
height: 100px;
}
.border1 {
border: 1px black solid;
}
.border2 {
border: 1px blue solid;
}
.border3 {
border: 1px red solid;
}
container A has the width of the browser window and contains 3 columns that go from 33% width to 100% width when the window width is below 768px
container B is the same set up accept that its width is only 350px. As you can see in the pen the 3 columns are 33% width.
I am sure this is working as intended but is it possible to make the grid relative to its containing div instead of the browser window? ie so that the divs in container B have 100% width because B's width is less than 768px.

Answer 1

This is setting the width to 30%, along with display:inline-block to all div child's of class container. See below how this alters the appearance:
.height {
height: 20px;
}
.B {
width: 325px;
height: 100px;
}
.border1 {
border: 1px black solid;
}
.border2 {
border: 1px blue solid;
}
.border3 {
border: 1px red solid;
}
.container div {
width: 30%;
display: inline-block;
}
<div class="container A">
<div class="col-xs-12 col-md-4 border1 height"></div>
<div class="col-xs-12 col-md-4 border2 height"></div>
<div class="col-xs-12 col-md-4 border3 height"></div>
</div>
<div class="container B border1">
<div class="col-xs-12 col-md-4 border1 height"></div>
<div class="col-xs-12 col-md-4 border2 height"></div>
<div class="col-xs-12 col-md-4 border3 height"></div>
</div>
Media Query approach:
div{
display:inline-block;
width:30%;
height:50px;
background:blue;
border:1px solid black;
margin:1%;
font-weight:bold;
font-size:30px;
text-align:center;
transition: all 0.8s;
}
#media screen and (max-width:768px)
{
div{
background:red;
display:block;
width:100%;
}
}
<div>A</div><div>B</div><div>C</div>
At this point I would like to mention my absolute hatred for bootstrap, mainly due to its lack of functionality. Like, seriously, it would be more beneficial, (and actually less time consuming) to write the css yourself, especially when you want to do anything 'out of the box'. I found bootstrap to be far too restrictive for any sort of 'further functionality'

Answer 2

Looks like the only way is to do it programmatically.
Found a solution in another StackOverflow question.
Basically you have a class that gives 100% width to element and based on parent width, this class is toggled.
.m {
width: 100%;
}
$('.somecontainer').on('resize',function(){
if ($('.somecontainer').width() < 140) {
$('.somecontainer').addClass('m');
} else {
$('.somecontainer').removeClass('m');
}
});

Answer 3

Try this removing the padding of the bootstrap class or you can overright it by giving your own class
HTML:
<div class="container regular">
<div class="col-xs-12 col-md-4 border1 height"></div>
<div class="col-xs-12 col-md-4 border2 height"></div>
<div class="col-xs-12 col-md-4 border3 height"></div>
</div>
<div class="container regular">
<div class="col-xs-12 col-md-offset-4 col-md-4 border1 regular">
<div class="col-xs-12 col-md-4 border1 height"></div>
<div class="col-xs-12 col-md-4 border2 height"></div>
<div class="col-xs-12 col-md-4 border3 height"></div>
</div>
</div>
CSS:
.height {
height: 20px;
}
.target {
width: 325px;
height: 100px;
}
.col-md-4{
padding:0;
}
.border1 {
border: 1px black solid;
}
.border2 {
border: 1px blue solid;
}
.border3 {
border: 1px red solid;
}

Answer 4

Try with this css:
.abs {
position: relative;
display: inline-block;
}