0

I want to have a set of columns in a row that are centered in the row, and have equal height, and space between them, also be responsive and display vertical on a phone or other small device.

css:

/* CSS used here will be applied after bootstrap.css */
.my-well {
    margin: 10px;
    border-radius:20px; 
    background-color: White;
}

@media (min-width: 480px) {
  .foo {
    margin: 20px !important;
  }
}

/* from http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height */
/* centered columns styles */
.row-centered {
    text-align:center;
}
.col-centered {
    display:inline-block;
    float:none;
    /* reset the text-align */
    text-align:left;
}

/* content styles */

.inside {
  margin-top: 10px;
  margin-bottom: 10px;
}
.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: 90%;
  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: 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: 90%;
  }
  .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-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;
  }
}

Html:

<div class="container" style="background-color: pink;">
  <div class="row row-centered row-xs-height foo">


      <div class="well my-well col-xs-11 col-sm-3 col-centered  col-xs-height">
    <div class="inside-full-height">
Faultily crud dear far trying yet dainty fluent sedately sent enthusiastic however and returned one much cat much beneficently selfishly evident unblushing wow after gradual raptly jeepers due under but.
    </div>
      </div>

      <div class="well my-well col-xs-11 col-sm-3 col-centered  col-xs-height">
    <div class="inside-full-height">
Tautly doggedly at reserved cardinal when far magnanimously the and close wow buffalo jeepers disgracefully wow well dolorous inflexible primly that immorally.
    </div>
    <div></div>
      </div>

      <div class="well my-well col-xs-11 col-sm-3 col-centered  col-xs-height">
    <div class="inside-full-height">
Faultily crud dear far trying yet dainty fluent sedately sent enthusiastic however and returned one much cat much beneficently selfishly evident unblushing wow after gradual raptly jeepers due under but. Far sloth hardheaded some wherever chivalrous and far some yikes crud humane extravagantly emoted however untiringly the antelope ouch anticipative scallop off hyena played tortoise pounded.
    </div>
    <div></div>
      </div>


  </div class="row row-centered row-sm-height">
</div class="container" style="background-color: pink;">

results:

Desktop view

Phone view

I'm ok with the phone rendering, but I'd like margins between the items in the desktop view. I've been messing with it for several days, and tried multiple solutions from the web, be making the centering & fixed height play together with responsiveness has eluded me.

Jeremy W
  • 1,889
  • 6
  • 29
  • 37
JSpears
  • 1

1 Answers1

1

Use the following:

.container-row {display: flex;flex-wrap: wrap;flex-direction: row;justify-content: center;align-items: stretch;align-content: stretch;}

.container-col{
display: inline-block;
margin: 20px auto;
}

This is what i done here for example http://www.widest.eu/news

Deinok
  • 73
  • 1
  • 9