Bootstrap need two columns to be same height

Thanks!! I'll check it out.

OK.. So here's what I have: <div class="row"><div class="row-lg-height row-md-height">

and on the two columns which I want to be the same height in large and medium windows,
<div class="col-md-12 col-sm-12 col-lg-height col-md-height" style="padding-right:10px;padding-left:10px;padding-bottom:15px;border:thin solid;">

Then in a style tag at the top of the page:
.row-md-height {
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
  }

.col-md-height {
    display: table-cell;
    float: none;
    height: 100%;
  }

  .row-lg-height {
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
  }
  .col-lg-height {
    display: table-cell;
    float: none;
    height: 100%;
  }

But I don't see it working on http://dev2.magickitchen.com/menu/meal_packages/7622.html. What do you think I am doing wrong? Thanks.

greetings mel200, , I have tried to use CSS to have side by side <div> an equal height, and I could not do it that worked AND was responsive. (you can set the height to the same  321px, , and equal shows, BUT it is NOT responsive)

About the only way to get this is to use javascript , NOT CSS, in the link that Marco Gasi gave you it says -
    "There is no real css solution to have "columns content" with the same height"

You try and use the CSS for table settings as -
.col-md-height {
    display: table-cell;
    float: none;
    height: 100%;
  }

but this can NOT WORK, unless you have a truer "TABLE" structure for the aligned <div> using the  .col-md-height , , BUT if you use a truer "TABLE" structure, then it can NOT drop from two columns, to two different rows in a responsive pattern change.
If you can not do the javascript your self, then use a plug-in

Slick 812, I thought that might be the problem. This is a big problem, I wish there was an easy fix.

Would you be able to point me to a javascript plugin that would do the job? Thanks.

? ?
I was just trying to get you to understand some, ,
BUT  Marco Gasi , has already given you a bootstrap plugin Link, just scroll up this page to that comment, ,

I feel it would be better to get an OVER ALL assessment of that page, look at the "Customer Feedback" placement, That is not good, , might just place a horizontal bar (even just a <hr>) between the two columns for "Meals for One (8 Meals) #1 & #2" and the "Customer Feedback", have the "Customer Feedback" be centered on the page NOT to the right, as it is now.

Personally , I do not think any of your users will even ever notice that the columns are Not the same (height), they don't care, what they want is the services (or informations) you have as as a provider of "Delicious Prepared Meals Delivered", that are on an EASY TO USE, and EASY TO UNDERSTAND web site, ,

OK, this is not helping, sorry. I need to concentrate on those two columns be equal height. I can look at  the rest of the page later, this is a process. But for now, I used the link Marco gave me, and it is not working. I need to understand why it is not working. :)

I do not have time today for much info, , you have to much html as <div> and other, to use the CSS methods in the examples there, because Your Number and Arrangement of the many, many divs  u have in your page does not fit into the design there, their's is -

  <div class="row">
    <div class="row-height">
      <div class="col-xs-12 col-sm-6 col-sm-height">
        <div class="inside inside-full-height">
          <div class="content"><br><br><br><br><br><br><br></div>
        </div>
      </div>
      <div class="col-xs-6 col-sm-3 col-sm-height col-sm-top">
        <div class="inside inside-full-height">
          <div class="content"></div>
        </div>
      </div>
      <div class="col-xs-6 col-sm-2 col-sm-height col-sm-middle">
        <div class="inside inside-full-height">
          <div class="content"></div>
        </div>
      </div>
      <div class="col-xs-6 col-sm-1 col-sm-height col-sm-bottom">
        <div class="inside inside-full-height">
          <div class="content"></div>
        </div>
      </div>
     </div>
  </div>

Select allOpen in new window

where each column is a simple -
   <div class="col-xs-12 col-sm-6 col-sm-height">
        <div class="inside inside-full-height">
          <div class="content"><br><br><br><br><br><br><br></div>
        </div>
      </div>

sorry but , I would think this would take time to un tangle the many HTML elements you have and see what the problem is. Sorry I tried to help, without having the time today

Thanks- That's a good point, so I tried this. I took all the other divs out, and only have the row with the columns, but still it doesn't work: http://dev2.magickitchen.com/test-columns.html

You forgot the 'inside' element. In addition, the inner col-lg-12 is superflous. Try this (I have slightly simplified your markup just to show you the correct way):

<div class="row">
  <div class="row-lg-height row-md-height">
    <div class="col-md-6 col-height" style="padding-left:10px;padding-right:10px;padding-bottom:15px;border:thin solid;">
			<div class="inside">
				<p class="BodyBoldGreen"><mim>header7</mim></p>
        <mim>
          ...
        </mim>        
			</div>
    </div>
  </div>
  <div class="row-lg-height row-md-height">
    <div class="col-md-6 col-height" style="padding-left:10px;padding-right:10px;padding-bottom:15px;border:thin solid;">
			<div class="inside">
				<p class="BodyBoldGreen"><mim>header7</mim></p>
        <mim>
          ...
        </mim>        
			</div>
    </div>
  </div>
</div>

Select allOpen in new window

Thanks!

Hope it works for you :-)

I'm not sure how that will work for me. Maybe I am going about this wrong. I need something that looks like this, attached.
Untitled-1.jpg

Hi, I went back to my old template for those pages. Eventually I will sit down with your solution and work it out properly, but for now I will award you the points. Thanks.

thanks.

Thank you for points. I'll do some test to see if I get a result as the one you want :-)

Hi, Melany (I suppose).
Please, take a look at this raw experiment and try to resize the browser down to mobile width: http://www.webintenerife.com/testing_script/columns.html

Here I attach the whole page and the columns.css:

test page:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>mel200 test</title>
    <link rel="stylesheet" href="css/bootstrap.css" type="text/css">
    <link rel="stylesheet" href="css/columns.css" type="text/css">
    <style>
      .BodyBoldRed{
        background: #F10B0D;
      }
      .BodyBoldGreen{
        background: #F3811E;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="row-lg-height row-md-height">
          <div class="col-md-6 col-height" style="padding-left:10px;padding-right:10px;padding-bottom:15px;border:thin solid;">
            <div class="inside">
              <p class="BodyBoldRed"><mim>header7</mim></p>
              <mim>
                Meals for One (8 Meals) #1 :
                <br>
                Meals
                <ul>
                  <li>Chicken Marsala, Broccoli & Cauliflower with Cheese Sauce </li>
                  <li>Beef Stew, Magic Mashed Potatoes</li>
                  <li>Mama's Beef Lasagna, Verdura Gourmet Artisan Flatbread with Kalamata Olives (RC)</li>
                  <li>Deep-dish Chicken Pot Pie (RC)</li>
                  <li>Chicken Marsala, Rice with Mixed Vegetables</li>
                  <li>Beef Stew, Buttered Carrots</li>
                  <li>Mama's Beef Lasagna, Verdura Gourmet Artisan Flatbread with Kalamata Olives (RC)</li>
                  <li>Deep-dish Chicken Pot Pie (RC)</li>
                </ul>
                Desserts:
                <ul>
                  <li>Double Fudge Brownie (2 servings)</li>
                  <li>Pucker Up Lemon Loaf (2 servings)</li>
                </ul>
                <strong>*Note: Some items in this bundle require cooking in the oven. Those are marked with an (RC). </strong>
              </mim>        
            </div>
          </div>
          <div class="col-md-6 col-height" style="padding-left:10px;padding-right:10px;padding-bottom:15px;border:thin solid;">
            <div class="inside">
              <p class="BodyBoldGreen"><mim>header7</mim></p>
              <mim>
                Meals:
                <ul>
                  <li>Chicken Parmigiana, Rosemary Potatoes</li>
                  <li>Beef Pot Roast with Mushroom Gravy, Fresh Cut Corn Medley</li>
                  <li>Portabella/Shiitake Mushroom Ravioli, French Bread</li>
                  <li>Beef Chile con Carne, Stuffed Baked Potato (RC)</li>
                  <li>Chicken Parmigiana, Creamy Spinach</li>
                  <li>Portabella/Shiitake Mushroom Ravioli, French Bread</li>
                  <li>Beef Pot Roast with Mushroom Gravy, Rice Pilaf</li>
                  <li>Beef Chile con Carne, Stuffed Baked Potato (RC)</li>
                </ul>
                Desserts:
                <ul>
                  <li>Chocolate Ganache Cake (2 servings)</li>
                  <li>Dutch Apple Pie (RC) (2 servings)</li>
                </ul>
                <strong>*Note: Some items in this bundle require cooking in the oven. Those are marked with an (RC). </strong>
              </mim>        
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Select allOpen in new window

columns.css

.row-centered {
  text-align: center;
}
.col-centered {
    display:inline-block;
    float:none;
    /* reset the text-align */
    text-align:left;
    /* inline-block space fix */
    margin-right:-4px;
}
.col-centered-centered {
	text-align: center;
}

.inside {
  margin-top: 20px;
  margin-bottom: 20px;
/*  background: #ededed;
  background: -webkit-gradient(linear, left top, left bottom,color-stop(0%, #f4f4f4), color-stop(100%, #ededed));
  background: -moz-linear-gradient(top, #f4f4f4 0%, #ededed 100%);
  background: -ms-linear-gradient(top, #f4f4f4 0%, #ededed 100%);*/
}
.inside-full-height {
  /*
  // if you want to give content full height give him height: 100%;
  // with content full height you can't apply margins to the content
  // content full height does not work in ie http://stackoverflow.com/questions/27384433/ie-display-table-cell-child-ignores-height-100
  */
  height: 100%;
  margin-top: 0;
  margin-bottom: 0;
}

/* columns of same height styles */

.row-height {
  display: table;
  table-layout: fixed;
  height: 100%;
  width: 100%;
}
.col-height {
  display: table-cell;
  float: none;
  height: 100%;
}
.col-top {
  vertical-align: top;
}
.col-middle {
  vertical-align: middle;
}
.col-bottom {
  vertical-align: bottom;
}

@media (min-width: 320px) {
	.col-height{
		float: left;
		width: 100%;
	}
}
@media (min-width: 480px) {
  .row-xs-height {
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
  }
  .col-xs-height {
    display: table-cell;
    float: none;
    height: 100%;
  }
  .col-xs-top {
    vertical-align: top;
  }
  .col-xs-middle {
    vertical-align: middle;
  }
  .col-xs-bottom {
    vertical-align: bottom;
  }
}

@media (min-width: 768px) {
  .row-sm-height {
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
  }
  .col-sm-height {
    display: table-cell;
    float: none;
    height: 100%;
  }
  .col-sm-top {
    vertical-align: top;
  }
  .col-sm-middle {
    vertical-align: middle;
  }
  .col-sm-bottom {
    vertical-align: bottom;
  }
}

@media (min-width: 992px) {
  .row-md-height {
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
  }
	.col-height{
		float: none;
	}
  .col-md-height {
    display: table-cell;
    float: none;
    height: 100%;
  }
  .col-md-top {
    vertical-align: top;
  }
  .col-md-middle {
    vertical-align: middle;
  }
  .col-md-bottom {
    vertical-align: bottom;
  }
}

@media (min-width: 1200px) {
  .row-lg-height {
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
  }
  .col-lg-height {
    display: table-cell;
    float: none;
    height: 100%;
  }
  .col-lg-top {
    vertical-align: top;
  }
  .col-lg-middle {
    vertical-align: middle;
  }
  .col-lg-bottom {
    vertical-align: bottom;
  }
}

Select allOpen in new window

Oh, you're form Mexico, so your name isn't probably Melany! Hasta luego, chica :-)

:) Thanks for doing that extra work! I am from Mexico, but originally from Canada. It's Melody, good guess!