bootstrap square and rectangle responsive with the same height

Question

Is it possible via css to have a square and a rectangle with the same height within a row in bootstrap? I need javascript to achieve this goal or I can with only css? something like this http://codepen.io/mp1985/pen/VvrWbQ but as you can see the 2 elements haven't the same height.

<div class="col-sm-8">
     <div class="rect-responsive">
          <div class="content">
               Hello rectangle
          </div>
     </div>
</div>
<div class="col-sm-4">
     <div class="square-responsive">
          <div class="content">
               Hello square
          </div>
     </div>
</div>

score 0 · Answer 1 · answered Oct 18 '15 at 10:51

I saw a similar problem somewhere here. You might find it useful.

Not an exact solution but you can also try something like this:

<style type="text/css">
    div[class*="col-"] > .square-responsive,
    span[class*="col-"] > .square-responsive,
    ol[class*="col-"] > .square-responsive,
    ul[class*="col-"] > .square-responsive,
    li[class*="col-"] > .square-responsive{
        padding-bottom:100%; 
    }
    div[class*="col-"] > .rect-responsive,
    span[class*="col-"] > .rect-responsive,
    ol[class*="col-"] > .rect-responsive,
    ul[class*="col-"] > .rect-responsive,
    li[class*="col-"] > .rect-responsive{
        padding-bottom:50%;
    }
    .square-responsive,
    .rect-responsive{
         position:relative; 
         overflow:hidden;
         background-color: red;
    }
    .square-responsive > *,
    .rect-responsive > *{
        position:absolute; 
    }
    .square-responsive > .content,
    .rect-responsive > .content {
        width:100%;
        height:100%;
    }
</style>


<div class="row">
    <div class="col-sm-6">
         <div class="square-responsive">
              <div class="content">
                   Hello
              </div>
         </div>
    </div>
    <div class="col-sm-6">
         <div class="square-responsive">
              <div class="content">
                   Hello
              </div>
         </div>
    </div>
</div>

This doesn't change the height of the square, in fact, this looks like the exact same code as the code in the [codepen](http://codepen.io/mp1985/pen/VvrWbQ) provided by OP — Mike Donkers, Oct 18 '15 at 10:55
The height of the square is linked to the width of the div here. Which is how I used the padding-bottom property. Other than that, I don't have a better solution yet. — salmanxk, Oct 18 '15 at 11:01

Joseph Khella · Answer 2 · 2015-10-18T11:33:47.403

check this

CSS:

.rect-responsive {
    background-color: red;
}
.square-responsive {
    background-color: yellow;
}

JS:

$(window).ready(function(){
        $(".square-responsive").height($(".square-responsive").width());
    $(".rect-responsive").height($(".square-responsive").width());
    console.log($(".rect-responsive").height() + " " + $(".square-responsive").height())
});
$(window).resize(function () {
    $(".square-responsive").height($(".square-responsive").width());
    $(".rect-responsive").height($(".square-responsive").width());
    console.log($(".rect-responsive").height() + " " + $(".square-responsive").height())
});

DEMO: JSFIDDLE

$(window).ready(function() {
  $(".square-responsive").height($(".square-responsive").width());
  $(".rect-responsive").height($(".square-responsive").width());
  console.log($(".rect-responsive").height() + " " + $(".square-responsive").height())
});
$(window).resize(function() {
  $(".square-responsive").height($(".square-responsive").width());
  $(".rect-responsive").height($(".square-responsive").width());
  console.log($(".rect-responsive").height() + " " + $(".square-responsive").height())
});

.rect-responsive {
  background-color: red;
}
.square-responsive {
  background-color: yellow;
}

<head>
  <title>Example of Twitter Bootstrap 3 Grid System</title>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <style type="text/css">
    p {
      padding: 50px;
      font-size: 32px;
      font-weight: bold;
      text-align: center;
      background: #f2f2f2;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-sm-8 col-md-8 col-xl-8 col-xs-8">
        <div class="rect-responsive">
          <div class="content">Hello rectangle</div>
        </div>
      </div>
      <div class="col-sm-4 col-md-4 col-xl-4 col-xs-4">
        <div class="square-responsive">
          <div class="content">Hello square</div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

bootstrap square and rectangle responsive with the same height

2 Answers2