Is it possible to create a column with height equal to its width in Bootstrap 4?

Question

The first 2 columns should be quadratic and third one has height as previous columns. Is it possible?

<div class="row">
    <div class="col-lg-3 col-md-3 col-sm-12">

    </div>
    <div class="col-lg-3 col-md-3 col-sm-12">

    </div>
    <div class="col-lg-6 col-md-6 col-sm-12">

    </div>
</div>

score 0 · Answer 1 · answered Jan 29 '20 at 00:21

0

what you are looking for is unfortunatly not available yet in bootstrap 4. but yet you can do what you want with display: grid.

here's a full guide on grid: https://css-tricks.com/snippets/css/complete-guide-grid/

answered Jan 29 '20 at 00:21

Said Benmoumen

166
2
10

score 0 · Answer 2 · answered Jan 29 '20 at 03:15

Yes it is possible, but not with CSS & Bootstrap. There is a workaround and you can use <svg> to maintain the ratio of your columns.

You need to place an empty <svg> inside a column to maintain the ratio. Use it with bootstrap class invisible to make sure it's never visible. Place your content using position:absolute.

For 3:2 ratio set viewBox="0 0 3 2" and so on.

However there is a catch. If you have a layout with different column size like col-3 and col-6 you need to adjust viewBox="" for each size. For example for col-3 use viewBox="0 0 1 1" and for col-6 must use viewBox="0 0 2 1" to maintain col-3 ratio. Remember - in bootstrap columns are stretched to the same size.

Check out my demo.

/*DEMO*/body{padding:3rem}

.content{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  
  overflow:hidden;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="row border">
  <div class="col-3 border border-primary">
    <svg class="invisible" viewBox="0 0 1 1"></svg>
    <div class="content">Lorem Ipsum</div>
  </div>
  <div class="col-3 border border-danger">
    <svg class="invisible" viewBox="0 0 1 1"></svg>
    <div class="content">Lorem Ipsum</div>
  </div>
  <div class="col-6 border border-success">
    <svg class="invisible" viewBox="0 0 2 1"></svg>
    <div class="content">Lorem Ipsum</div>
  </div>
</div>

Is it possible to create a column with height equal to its width in Bootstrap 4?

2 Answers2