Square responsive divs using Bootstrap 4

Question

I want to create a grid system similar to this page using Bootstrap 4. I want to create a square box in a col-sm-4 and a longer rectangle next to it in a col-sm-8 of the same height. I'm having trouble creating a square box that is responsive. How can I do this?!

Current code:

<div class="container">
    <div class="row section-box">
        <div class="col-sm-4 text-center description-text">
        first square box.
        </div>
        <div class="col-sm-8 description-image">
        second rectangle box.
        </div>
    </div>
</div>

Things I've tried:

Using jQuery to set the height. This doesn't work with padding on the div, and isn't responsive.
This link where I managed to get a square box with a rectangle next to it, but as soon as text was added it was no longer a square.

Can you post some code here, so that we can provide examples. there is a lot regarding bootstrap grids. — bhansa, Sep 17 '17 at 16:59
What have you tried? Where is your code? Please read: [How to create a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) — disinfor, Sep 17 '17 at 17:34

score 11 · Answer 1 · answered Aug 01 '19 at 15:04

You could use bootstrap 4 embed-responsive class and it's done

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
</head>
<body>
<div class="container">
    <div class="row m-5">
        <div class="col-1">
            <div class="embed-responsive embed-responsive-1by1 text-center">
                <div class="embed-responsive-item bg-primary">col-1</div>
            </div>
        </div>
    </div>
    <div class="row m-5">
        <div class="col-2">
            <div class="embed-responsive embed-responsive-1by1 text-center">
                <div class="embed-responsive-item bg-primary">col-2</div>
            </div>
        </div>
    </div>
    <div class="row m-5">
        <div class="col-3">
            <div class="embed-responsive embed-responsive-1by1 text-center">
                <div class="embed-responsive-item bg-primary">col-3</div>
            </div>
        </div>
    </div>
    <div class="row m-5">
        <div class="col-4">
            <div class="embed-responsive embed-responsive-1by1 text-center">
                <div class="embed-responsive-item bg-primary">col-4</div>
            </div>
        </div>
    </div>
    <div class="row m-5">
        <div class="col-5">
            <div class="embed-responsive embed-responsive-1by1 text-center">
                <div class="embed-responsive-item bg-primary">col-5</div>
            </div>
        </div>
    </div>
    <div class="row m-5">
        <div class="col-6">
            <div class="embed-responsive embed-responsive-1by1 text-center">
                <div class="embed-responsive-item bg-primary">col-6</div>
            </div>
        </div>
    </div>
    <div class="row m-5">
        <div class="col-7">
            <div class="embed-responsive embed-responsive-1by1 text-center">
                <div class="embed-responsive-item bg-primary">col-7</div>
            </div>
        </div>
    </div>
    <div class="row m-5">
        <div class="col-8">
            <div class="embed-responsive embed-responsive-1by1 text-center">
                <div class="embed-responsive-item bg-primary">col-8</div>
            </div>
        </div>
    </div>
    <div class="row m-5">
        <div class="col-9">
            <div class="embed-responsive embed-responsive-1by1 text-center">
                <div class="embed-responsive-item bg-primary">col-9</div>
            </div>
        </div>
    </div>
    <div class="row m-5">
        <div class="col-10">
            <div class="embed-responsive embed-responsive-1by1 text-center">
                <div class="embed-responsive-item bg-primary">col-10</div>
            </div>
        </div>
    </div>
    <div class="row m-5">
        <div class="col-11">
            <div class="embed-responsive embed-responsive-1by1 text-center">
                <div class="embed-responsive-item bg-primary">col-11</div>
            </div>
        </div>
    </div>
    <div class="row m-5">
        <div class="col-12">
            <div class="embed-responsive embed-responsive-1by1 text-center">
                <div class="embed-responsive-item bg-primary">col-12</div>
            </div>
        </div>
    </div>
</div>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

G-Cyrillus · Accepted Answer · 2017-09-17T18:54:51.217

7

eventually, a pseudo element could help :

.col-sm-4:before,
.col-sm-8:before {
  content: '';
  width: 0;
}

.col-sm-4:before,
.col-sm-8:before,
.ib {
  white-space: normal;
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
}

.col-sm-4:before {
  padding-top: 100%;
  /* makes expand to a square */
}

.col-sm-8:before {
  padding-top: 50%;
  /* makes a rectangle half the height of a square */
}

[class^="col"] {
  white-space: nowrap;
  box-sizing: border-box;
  box-shadow: inset 0 0 0 5px white;
  padding: 0;
  text-align: center;
  background: url(http://lorempixel.com/400/200) tomato;
  background-size: cover;
}

.row {
  color: white;
  text-shadow: 0 0 black, 0 0 2px black;
}

.col-sm-4 {
  background: gray;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row section-box">
    <div class="col-sm-4 text-center description-text p-0">
      first square box.
    </div>
    <div class="col-sm-8 description-image p-0">
      second rectangle box.
    </div>
  </div>
  <div class="row section-box">
    <div class="col-sm-8 description-image p-0">
      <div class="ib">second<br> rectangle box.</div>
    </div>
    <div class="col-sm-4 text-center description-text p-0">
      first square box.
    </div>
  </div>
</div>

edited Sep 17 '17 at 18:54

answered Sep 17 '17 at 18:35

G-Cyrillus

101,410
14
105
129

This is great! Although there is an issue with multiple lines of text within the boxes. It doesn't wrap around and when you have `
` in it goes funny. Is there a way to solve that? – Tometoyou Sep 17 '17 at 18:37
@Tometoyou there is an `.ib` div inserted on second line to deal with it ;) If you turn the child into a flexbox too, the vertical % padding trick will not be avalaible . inline-block elements side by side are to be used to allow vertical-align, like if it was IE5 coming back ! – G-Cyrillus Sep 17 '17 at 18:39
Ah cool, if I wanted to add padding to the inside of the boxes how would I? – Tometoyou Sep 17 '17 at 18:47
@Tometoyou add the padding to the `.ib`box and set width to 100% at the most . you can also easily draw borders and set backgrounds image https://codepen.io/gc-nomade/pen/oGjdVZ – G-Cyrillus Sep 17 '17 at 18:47
In fact nevermind, I can add it to description-text and it works. Thanks this is exactly what I was looking for :) – Tometoyou Sep 17 '17 at 18:48

Square responsive divs using Bootstrap 4

2 Answers2

Linked