Bootstrap 4 - content sticking to the bottom of div when making it square

Question

I am working on a budgeting app, and I am trying to make something that looks like a bunch of tiles (below). However I am getting stuck, because when I go to put content in the tiles, the content sticks to the bottom.

I am using bootstrap 4, and I have been able to make some square divs, and style them to my liking (thanks SO), but I just can't add anything to them. How would I solve this?

(also on a related/unrelated note when I put m-2 on the divs it bumps the rightmost div down a row)

.squareBox:before{
   padding-top: 100%;
   /* makes expand to a square */
   content: '';
   width: 0;
   white-space: normal;
   display: inline-block;
   vertical-align: middle;
   max-width: 100%;
 }

 .icon {
   font-family: lato;
   background: #1A3967;
   border-radius: 10px;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }

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

  
  <div class="container">
    <div class="row">
      <div class="col-md-6 mt-4">
        <div class="row">
            <div class="col-sm-4 squareBox icon m-2">
              <div class="row">
                <div class="col-xs-6">
                  <img src="https://s3.amazonaws.com/rkersey-test-assets/netflix.png" height="20px" />
                </div>
              </div>
            </div>
            <div class="col-sm-4 squareBox m-2">
              first square box.
            </div>
            <div class="col-sm-4 squareBox m-2">
              first square box.
            </div>
          </div>
      </div>
      <div class="col-md-6 mt-4"></div>
    </div>
  </div>

What it currently looks like:

What it needs to look like:

Carol Skelly · Answer 1 · 2018-11-28T11:22:32.603

I would use a different method to make the boxes square. Use a margin "dummy" div, and place the squareBox inside the columns...

.dummy {
    margin-top: 100%;
}

.squareBox {
    background: #1A3967;
    color: #fff;
    border-radius: 10px;
    position: absolute;
    top: 30px;
    bottom: 0;
    left: 30px;
    right: 0;
}

Then you can put whatever is needed inside each box, using Bootstrap 4 flexbox utils to position it.

Demo: https://www.codeply.com/go/MZrc2ELjIG

C.RaysOfTheSun · Accepted Answer · 2018-11-28T13:34:04.663

You could try the flexbox approach :)

.squareBox{
   /* makes expand to a square */
   width: 200px;
   height: 200px;
   white-space: normal;
   display: inline-block;
   vertical-align: middle;
   max-width: 100%;
 }

 .icon {
   font-family: lato;
   background: #1A3967;
   border-radius: 10px;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   max-width: 200px;
 }

.justify-start {
  align-self: flex-start !important;
}

.t-1 {
  font-size: 1.2rem;
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div class="m-5 d-flex justify-content-center align-items-center">
  <div class="squareBox icon d-flex flex-column justify-content-between align-items-center m-2">
    <div class="d-flex align-self-start justify-content-between w-100 p-2">
      <img src="https://s3.amazonaws.com/rkersey-test-assets/netflix.png" height="20px" />
      <p class="font-weight-bold text-muted">$XX.X</p>
    </div>
    <div class="d-flex justify-content-center align-items-center text-white text-center">
      <p class="font-weight-bold t-1">Netflix & Hulu With roommcomm</p>
    </div>
    <div class="d-flex align-self-start justify-content-around w-100 text-white">
      <p>Sorted</p>
      <p>3</p>
    </div>
  </div>
  <div class="squareBox icon d-flex flex-column justify-content-between align-items-center m-2">
    <div class="d-flex align-self-start justify-content-between w-100 p-2">
      <img src="https://s3.amazonaws.com/rkersey-test-assets/netflix.png" height="20px" />
      <p class="font-weight-bold text-muted">$XX.X</p>
    </div>
    <div class="d-flex justify-content-center align-items-center text-white text-center">
      <p class="font-weight-bold t-1">End of The F****** World</p>
    </div>
    <div class="d-flex align-self-start justify-content-around w-100 text-white">
      <p>Sorted</p>
      <p>5</p>
    </div>
  </div>
</div>

also, here's a working example :)

On a side note, I modified your squareBox class's width and height to give it dimensions :)

On the other hand, you can apply the flex-wrap class on the parent container so the stuff inside it that doesn't fit in a given row will go to the next row instead

score 0 · Answer 3 · answered Nov 28 '18 at 02:50

You would want to set the icon to absolute and set to top with a bit of left and top offset.

If you're not gonna make these 'icon'-looking-things as image. then you have to rely heavily on absolute positioning.

.squareBox:before {
  padding-top: 100%;
  /* makes expand to a square */
  content: '';
  width: 0;
  white-space: normal;
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
}

.icon {
  font-family: lato;
  background: #1A3967;
  border-radius: 10px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.icon .row {
  position: absolute;
  top: 5px;
  left: 20px;
}

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


<div class="container">
  <div class="row">
    <div class="col-md-6 mt-4">
      <div class="row">
        <div class="col-sm-4 squareBox icon m-2">
          <div class="row">
            <div class="col-xs-6">
              <img src="https://s3.amazonaws.com/rkersey-test-assets/netflix.png" height="20px" />
            </div>
          </div>
        </div>
        <div class="col-sm-4 squareBox m-2">
          first square box.
        </div>
        <div class="col-sm-4 squareBox m-2">
          first square box.
        </div>
      </div>
    </div>
    <div class="col-md-6 mt-4"></div>
  </div>
</div>

score 0 · Answer 4 · answered Nov 28 '18 at 11:56

Rather than using padding-top: 100%; to define the dimensions of square box , add height and width.

.squareBox{
   width: 100px;
   height: 100px;
   padding: 5px;
 }

 .icon {
   font-family: lato;
   background: #1A3967;
   border-radius: 10px;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }

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

  
  <div class="container">
    <div class="row">
      <div class="col-md-6 mt-4">
        <div class="row">
            <div class="col-sm-4 squareBox icon m-2">
              <div class="row">
                <div class="col-xs-6">
                  <img src="https://s3.amazonaws.com/rkersey-test-assets/netflix.png" height="20px" />
                </div>
              </div>
            </div>
            <div class="col-sm-4 squareBox m-2">
              first square box.
            </div>
            <div class="col-sm-4 squareBox m-2">
              first square box.
            </div>
          </div>
      </div>
      <div class="col-md-6 mt-4"></div>
    </div>
  </div>

Bootstrap 4 - content sticking to the bottom of div when making it square

4 Answers4