How to fix Bootstrap browser resizing? - html

Question

I am trying to create a simple three column layout. I just cant figure how to make the divs work properly when resizing the browser. I can probably make it work if I used #media queries, but I want to use Bootstrap framework. The text spills out when resizing, as I have given a fixed div height. If I don't give a fixed height, the size of the divs become uneven when resizing browser.
I also have to list (unordered list) 1-3 links, which makes the alignment go wonky when resizing the browser. Here is the link the Codepen link,
https://codepen.io/ArshRai/pen/xyxmEJ
HTML:
<div class="container-fluid">
<div class="row ">
<div class="col-lg" id="setup-mini-card">
<div class="row align-items-start">
<div class="col col-lg-4">
<div class="tile-sm pt-4">
<div class="col col-md-6">
<img class="mr-auto pt-3" src="https://webiconspng.com/wp-content/uploads/2017/02/Photograph-Transparent-Icon.png" />
</div>
<div class="col-md-6 ml-5" style="display: table; height: 90px;overflow: hidden;" >
<div class="tile-sm-link">
<ul class="tile-sm-list">
<li>Lorem ipsum dolor </li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-4 ">
<div class="tile-sm pt-4">
<div class="col-md-6">
<img class="mr-auto pt-3" src="https://webiconspng.com/wp-content/uploads/2017/02/Photograph-Transparent-Icon.png" />
</div>
<div class="col-md-6 ml-5" style="display: table; height: 90px;overflow: hidden;" >
<div class="tile-sm-link">
<ul class="tile-sm-list">
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="tile-sm pt-4">
<div class="col-md-6">
<img class="mr-auto pt-3" src="https://webiconspng.com/wp-content/uploads/2017/02/Photograph-Transparent-Icon.png" />
</div>
<div class="col-md-6 ml-5" style="display: table; height: 90px;overflow: hidden;" >
<div class="tile-sm-link">
<ul class="tile-sm-list">
<li><a href="">Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
#setup-mini-card {
padding-top: 60px;
}
.tile-sm-txt {
vertical-align: text-bottom;
padding-left: 10px;
}
.tile-sm {
height: 130px;
margin-bottom: 20px;
border-radius: 5px;
/* text-align: center;*/
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
padding: 30px
}
.tile-sm:hover
{
box-shadow: 0 4px 4px rgba(0, 200, 149, .24), 0 0 4px rgba(0, 173, 147, .12), 0 6px 18px rgba(0, 145, 147, .12);
transform: translate3d(0, -2px, 0);
text-decoration: none;
}
.tile-sm > a:hover {
color:#fff !important;
}
.tile-sm > div img {
float:left;
width:60px;
}
.tile-sm-list {
list-style: none;
}
.tile-sm-link {
display: table-cell; vertical-align: middle;
}

Answer 1

Make sure you nested the bootstrap row correctly. I'm doing a sample and hopefully, it would help you a little on how to use Bootstrap grid if this is the direction you are wanting to move forward
.tomato{
background: tomato
}
.yellow{
background: yellow
}
.green{
background: green
}
.nested{
padding: 15px;
}
.image{
background-color: blue
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<!-- Columns start at 100% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="container">
<div class="row">
<div class="col-12 col-md-4 yellow">
<!--Nested-->
<div class="row nested">
<div class="col-5 image">
</div>
<div class="col-7 tomato">
<ul>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
</ul>
</div>
</div>
</div>
<div class="col-12 col-md-4 green">.col-12 .col-md-4</div>
<div class="col-12 col-md-4 yellow">.col-12 .col-md-4</div>
</div>
</div>

Answer 2

Depending on your aim you could change the overflow property as shown below.
overflow:hidden;
or
overflow:auto;
.tile-sm{
height: 130px;
margin-bottom: 20px;
border-radius: 5px;
/* text-align: center;*/
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
padding: 30px;
overflow:auto;
}
or
.tile-sm{
height: 130px;
margin-bottom: 20px;
border-radius: 5px;
/* text-align: center;*/
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
padding: 30px;
overflow: hidden;
}