CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
K. Rawls
K. Rawls

Reputation: 115

Bootstrap - Change columns height on stack

Using Bootstrap, I have a row and 3 column divs in my html and I have the css set to give the columns a height of 100%.

HTML:

<div class="row">
    <div id="one" class="col-sm-4">one</div>
    <div id="two" class="col-sm-4">two</div>
    <div id= "three" class="col-sm-4">three</div>
</div>

CSS:

html,body,{
    height:100%;
}
.col-sm-4{
    border: 1px solid black;
    height: 100%;
} 
#one{
    background-color: red;
}
#two{
    background-color: blue;
}
#three{
    background-color: green;
}

When the screen get small enough and the columns stack, I want to essentially change the height of the columns from 100% to 33.3333% so they don't exceed the height of the body. Then when the screen gets big and the columns unstack I want to change their height back to 100%. How do I do this?

Upvotes: 2

Views: 23463

Answers (3)

Carol Skelly
Carol Skelly

Reputation: 362260

Use a media query specifically for Bootstrap's xs breakpoint of <768px..

html, body, .container-fluid, .row {
    height:100%;
}
.col-sm-4 {
    border: 1px solid black;
    min-height: 100vh;
} 
#one{
    background-color: red;
}
#two{
    background-color: blue;
}
#three{
    background-color: green;
}
@media (max-width: 767px) {
    .col-sm-4 {
        min-height: 33.3333333%;
        height: 33.3333333%;
    } 
}

http://www.bootply.com/uXe60OvI4I

Also, remember the .row should always be used inside a container.

Upvotes: 1

Mike-DHSc
Mike-DHSc

Reputation: 111

Add a new class called .whatever (I used .mydivs) in your css. You don't want to be attaching media queries to bootstrap defined selectors. Add the height values to the ".mydivs" class instead.

If you attach values to a bootstrap class if you use it again later on your page it will also be changing anywhere else you end up using it.

  1.) Add
    <div class="row">
      <div id="one" class="mydivs col-sm-4 col-xs-12">one</div>
      <div id="two" class="mydivs col-sm-4 col-xs-12">two</div>
      <div id="three" class="mydivs col-sm-4 col-xs-12">three</div>
    </div>

 2.)   Then Use Breakpoints


    @media (max-width: 543px) {
    .mydivs { 
    height: 33.3%;
    }
    }

     @media (min-width: 544px) {  
    .mydivs{ height: 100%; }
    }

Upvotes: 1

Zze
Zze

Reputation: 18805

Sounds like you want to use a media query. 

@media(max-width: 500px) {
      .col-sm-4 {
        height: 33px;
      }
    }

This will change the height of .col-sm-4 whenever the viewport width is < 500px;

html,
body,
{
  height: 100%;
}
.col-sm-4 {
  border: 1px solid black;
  height: 100px;
}
#one {
  background-color: red;
}
#two {
  background-color: blue;
}
#three {
  background-color: green;
}
@media(max-width: 500px) {
  .col-sm-4 {
    height: 33px;
  }
}
<div class="row">
  <div id="one" class="col-sm-4">one</div>
  <div id="two" class="col-sm-4">two</div>
  <div id="three" class="col-sm-4">three</div>
</div>

(note that this is really hard to see here because this website has a fixed min width)

Upvotes: 0

Related Questions