bootstrap grid relative to containing div instead of window

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.

make the parent position:relative and your child position:absolute; — jbutler483, Jan 20 '15 at 14:04
Thanks for the reply, unfortunately this does not work, it just makes the child divs stack on top of each, it dosn't effect their width — Mark, Jan 20 '15 at 14:10
Not originally but just tried and it dosn't help http://codepen.io/Irish1/pen/VYbrxP — Mark, Jan 20 '15 at 14:15

jbutler483 · Answer 1 · 2015-01-20T16:42:52.643

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'

thanks but what I am looking for is this http://codepen.io/anon/pen/rampNO but the divs in target have the exact same classes as the divs in regular ie col-md-4 — Mark, Jan 20 '15 at 15:56
you would have to override the width property - probably using media queries. Might be able to post an example of this if it's what you're looking for? — jbutler483, Jan 20 '15 at 16:00
that sounds like what I will have to do. If you can post an example to your answer that would be great — Mark, Jan 20 '15 at 16:28
@Ir1sh: done, if that's what you're looking for. (run snippet in full screen and resize to see effect) — jbutler483, Jan 20 '15 at 16:34

HAok SAM · Answer 2 · 2018-03-29T14:57:50.193

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');
    }
});

score 0 · Answer 3 · answered Jun 25 '20 at 23:25

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;
}

score -1 · Answer 4 · answered Jan 20 '15 at 14:34

-1

Try with this css:

.abs {
  position: relative;
  display: inline-block;
}

answered Jan 20 '15 at 14:34

MaGiO

507
2
7

Thanks for the reply, no joy unfortunately – Mark Jan 20 '15 at 14:39
an if you use in container B only div with col-xs-4 ? – MaGiO Jan 20 '15 at 14:56
the solitary div behaves the same as when there are 3 of them – Mark Jan 20 '15 at 15:00
if i understand well... like this [http://codepen.io/anon/pen/rampNO](http://codepen.io/anon/pen/rampNO) ? – MaGiO Jan 20 '15 at 15:09
yes exactly like that. the more i think about it though the more I think it might not be possible. the styles get applied through media-queries which are only aware of the window width right? – Mark Jan 20 '15 at 15:12
xs (small device window/content small) md (medium device window/medium content) lg (large device window/large content) you define the content width than with class col-*-* you define the width of div inside. – MaGiO Jan 20 '15 at 15:53
Yes I know but I have one template for a form that looks great at any window width with all the classes entered for xs, sm, md, lg. the problem is I need to use it in a modal say of fixed width. this modal is always 300px wide so I want the xs settings to be applied. Because the window is wider than 720px though it is one of the larger settings that is applied – Mark Jan 20 '15 at 16:01
Yes that is what I want it to look like, but the crucial part is that the markup for the divs in the modal is the exact same as the markup for the divs out of the modal ie includes the col-md-4 – Mark Jan 20 '15 at 16:40
i've update link [codepen.io/anon/pen/rampNO](http://codepen.io/anon/pen/rampNO) ... did you have a test area for look in real site what you want with real content? – MaGiO Jan 20 '15 at 16:46
ok so firstly I apologise for wasting your time as I am obviously not explaining myself well enough and that is my fault. I have forked your codepen. What I need is for this http://codepen.io/Irish1/pen/PwmExv to look like the one you just posted without the html in this one changing at all. ie just with css changes. per jbutler above I think this will require me to override some of the bootstrap classes in the modal myself – Mark Jan 20 '15 at 16:51
mmm try this [codepen.io/anon/pen/gbWoEJ](http://codepen.io/anon/pen/gbWoEJ) ... i've used col-sm-6 / col-sm-4 – MaGiO Jan 20 '15 at 17:01

bootstrap grid relative to containing div instead of window

4 Answers4