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

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:

enter image description here

What it needs to look like:
enter image description here

asked Nov 28 '18 at 2:21

Reid

1,81072547

add a comment |

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:

enter image description here

What it needs to look like:
enter image description here

asked Nov 28 '18 at 2:21

Reid

1,81072547

add a comment |

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:

enter image description here

What it needs to look like:
enter image description here

asked Nov 28 '18 at 2:21

Reid

1,81072547

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:

enter image description here

What it needs to look like:
enter image description here

.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>

.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>

html css bootstrap-4

asked Nov 28 '18 at 2:21

Reid

1,81072547

asked Nov 28 '18 at 2:21

Reid

1,81072547

asked Nov 28 '18 at 2:21

Reid

1,81072547

asked Nov 28 '18 at 2:21

Reid

1,81072547

asked Nov 28 '18 at 2:21

Reid

1,81072547

add a comment |

4 Answers
4

active

oldest

votes

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

edited Nov 28 '18 at 13:34

answered Nov 28 '18 at 13:11

C.RaysOfTheSun

645128

add a comment |

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

edited Nov 28 '18 at 11:22

answered Nov 28 '18 at 11:16

Zim

194k51406393

add a comment |

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>

answered Nov 28 '18 at 2:50

ACD

8941112

add a comment |

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>

answered Nov 28 '18 at 11:56

Sumit Ridhal

5823523

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53511162%2fbootstrap-4-content-sticking-to-the-bottom-of-div-when-making-it-square%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

4 Answers
4

active

oldest

votes

4 Answers
4

active

oldest

votes

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

edited Nov 28 '18 at 13:34

answered Nov 28 '18 at 13:11

C.RaysOfTheSun

645128

add a comment |

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

edited Nov 28 '18 at 13:34

answered Nov 28 '18 at 13:11

C.RaysOfTheSun

645128

add a comment |

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

edited Nov 28 '18 at 13:34

answered Nov 28 '18 at 13:11

C.RaysOfTheSun

645128

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

.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>

.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>

edited Nov 28 '18 at 13:34

answered Nov 28 '18 at 13:11

C.RaysOfTheSun

645128

edited Nov 28 '18 at 13:34

answered Nov 28 '18 at 13:11

C.RaysOfTheSun

645128

answered Nov 28 '18 at 13:11

C.RaysOfTheSun

645128

answered Nov 28 '18 at 13:11

C.RaysOfTheSun

645128

add a comment |

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

edited Nov 28 '18 at 11:22

answered Nov 28 '18 at 11:16

Zim

194k51406393

add a comment |

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

edited Nov 28 '18 at 11:22

answered Nov 28 '18 at 11:16

Zim

194k51406393

add a comment |

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

edited Nov 28 '18 at 11:22

answered Nov 28 '18 at 11:16

Zim

194k51406393

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

edited Nov 28 '18 at 11:22

answered Nov 28 '18 at 11:16

Zim

194k51406393

edited Nov 28 '18 at 11:22

answered Nov 28 '18 at 11:16

Zim

194k51406393

answered Nov 28 '18 at 11:16

Zim

194k51406393

answered Nov 28 '18 at 11:16

Zim

194k51406393

add a comment |

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>

answered Nov 28 '18 at 2:50

ACD

8941112

add a comment |

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>

answered Nov 28 '18 at 2:50

ACD

8941112

add a comment |

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>

answered Nov 28 '18 at 2:50

ACD

8941112

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>

.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>

.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>

answered Nov 28 '18 at 2:50

ACD

8941112

answered Nov 28 '18 at 2:50

ACD

8941112

answered Nov 28 '18 at 2:50

ACD

8941112

answered Nov 28 '18 at 2:50

ACD

8941112

add a comment |

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>

answered Nov 28 '18 at 11:56

Sumit Ridhal

5823523

add a comment |

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>

answered Nov 28 '18 at 11:56

Sumit Ridhal

5823523

add a comment |

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>

answered Nov 28 '18 at 11:56

Sumit Ridhal

5823523

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>

.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>

.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>

answered Nov 28 '18 at 11:56

Sumit Ridhal

5823523

answered Nov 28 '18 at 11:56

Sumit Ridhal

5823523

answered Nov 28 '18 at 11:56

Sumit Ridhal

5823523

answered Nov 28 '18 at 11:56

Sumit Ridhal

5823523

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Btukfyl