michaelmcgurk michaelmcgurk - 2 months ago 5
CSS Question

Set bootstrap column height same as width

How do I set the red background area to have the same height as it does width in my demo?

Demo: https://jsfiddle.net/tv0b5m3b/



/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
margin: 10px;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container">

<div class="row">
<div class="col-sm-12">

<div class="col-sm-3 col-xs-6" style="background:red;">
<button type="button" class="btn btn-default btn-lg text-center"><i class="icon-cog icon-4x"></i><br>Resend</button>
</div>

<div class="col-sm-3 col-xs-6">
<button type="button" class="btn btn-default btn-lg text-center"><i class="icon-cog icon-4x"></i><br>Resend</button>
</div>

<div class="col-sm-3 col-xs-6">
<button type="button" class="btn btn-default btn-lg text-center"><i class="icon-cog icon-4x"></i><br>Resend</button>
</div>

<div class="col-sm-3 col-xs-6">
<button type="button" class="btn btn-default btn-lg text-center"><i class="icon-cog icon-4x"></i><br>Resend</button>
</div>





https://jsfiddle.net/tv0b5m3b/

Answer

https://jsfiddle.net/vivekkupadhyay/tv0b5m3b/1

/* Latest compiled and minified CSS included as External Resource*/


/* Optional theme */

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
  margin: 10px;
}
<div class="container">

  <div class="row">
    <div class="col-sm-12" style="background:red;">
      <div class="row">
        <div class="col-sm-3 col-xs-6">
          <button type="button" class="btn btn-default btn-lg text-center"><i class="icon-cog icon-4x"></i>
            <br>Resend</button>
        </div>

        <div class="col-sm-3 col-xs-6">
          <button type="button" class="btn btn-default btn-lg text-center"><i class="icon-cog icon-4x"></i>
            <br>Resend</button>
        </div>

        <div class="col-sm-3 col-xs-6">
          <button type="button" class="btn btn-default btn-lg text-center"><i class="icon-cog icon-4x"></i>
            <br>Resend</button>
        </div>

        <div class="col-sm-3 col-xs-6">
          <button type="button" class="btn btn-default btn-lg text-center"><i class="icon-cog icon-4x"></i>
            <br>Resend</button>
        </div>
      </div>
    </div>
  </div>

Comments