Equal height and width boxes in Bootstrap? - html

Question

I am trying to make the bottom right greyish box (the one without image) same height and width as other boxes with images. It is supposed to be responsive but if I manage to make it fit this resolution it doesn't work in other resolutions. I tried with flexbox but couldn't make it work. I am using Bootstrap as you can see. I also tried using vh and vw but no luck...
I would really appreciate if someone with more experience could tell me the proper way to do this? Thanks all for reading and trying to help!
Here is the screenshot of what I am trying to achieve:
Here is my code so far:
<!-- T E A M S E C T I O N -->
<section id="team" class="no-padding">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
<h1><span class="orange">[ </span>Meet Our Team<span class="orange"> ]</span></h1>
<p>A perfect blend of creativity and technical wizardry.</br>The best people formula for great websites!</p>
</div>
</div>
<div class="row no-gutter">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a class="team-box" rel="" href="img/team/1.jpg" title="">
<img src="img/team/1.jpg" class="img-responsive" alt="">
<div class="team-box-caption">
<div class="team-box-caption-content">
<div class="name">
Full Name
</div>
<div class="position">
Position
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a class="team-box" rel="" href="img/team/2.jpg" title="">
<img src="img/team/2.jpg" class="img-responsive" alt="">
<div class="team-box-caption">
<div class="team-box-caption-content">
<div class="name">
Full Name
</div>
<div class="position">
Position
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a class="team-box" rel="" href="img/team/3.jpg" title="">
<img src="img/team/3.jpg" class="img-responsive" alt="">
<div class="team-box-caption">
<div class="team-box-caption-content">
<div class="name">
Full Name
</div>
<div class="position">
Position
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a class="team-box" rel="" href="img/team/4.jpg" title="">
<img src="img/team/4.jpg" class="img-responsive" alt="">
<div class="team-box-caption">
<div class="team-box-caption-content">
<div class="name">
Full Name
</div>
<div class="position">
Position
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a class="team-box" rel="" href="img/team/5.jpg" title="">
<img src="img/team/5.jpg" class="img-responsive" alt="">
<div class="team-box-caption">
<div class="team-box-caption-content">
<div class="name">
Full Name
</div>
<div class="position">
Position
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a class="team-box" rel="" href="img/team/6.jpg" title="">
<img src="img/team/6.jpg" class="img-responsive" alt="">
<div class="team-box-caption">
<div class="team-box-caption-content">
<div class="name">
Full Name
</div>
<div class="position">
Position
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a class="team-box" rel="" href="img/team/7.jpg" title="">
<img src="img/team/7.jpg" class="img-responsive" alt="">
<div class="team-box-caption">
<div class="team-box-caption-content">
<div class="name">
Full Name
</div>
<div class="position">
Position
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a class="team-box" rel="" href="img/team/8.jpg" title="">
<img src="img/team/8.jpg" class="img-responsive" alt="">
<div class="team-box-caption">
<div class="team-box-caption-content">
<div class="name">
Full Name
</div>
<div class="position">
Position
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<div class="team-box">
<div class="team-box-last">
<h3>Want to join our team?</h3>
<p>We’re always looking for talented designers, developers, project managers and anyone who’s driven and has a passion for the digital industries.
</p>
<ul>
<li>Check our jobs page</li>
<li>Send us your CV</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
/* -------- TEAM SECTION -------- */
#team{
background-color: #fff;
text-align: center;
width: 100%;
}
#team h1{
color: #345;
font-weight: 700;
margin-top: 50px;
margin-bottom: 50px;
}
#team p{
color: #345;
font-size: 21px;
margin-top: 0px;
margin-bottom: 50px;
padding-left: 15px;
padding-right: 15px;
}
.no-padding {
padding: 0;
}
.no-gutter > [class*=col-] {
padding-right: 0;
padding-left: 0;
}
.team-box {
display: block;
position: relative;
margin: 0 auto;
max-width: 650px;
overflow: hidden;
}
.team-box img{
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
}
.team-box:hover img {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.team-box .team-box-caption {
display: block;
position: absolute;
bottom: 0;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
opacity: 1;
background: transparent;
/* background: rgba(67,208,243,0.9);
-webkit-transition: all .35s;
-moz-transition: all .35s;
transition: all .35s; */
}
.team-box .team-box-caption .team-box-caption-content {
position: absolute;
bottom: 12px;
width: 100%;
text-align: left;
}
.team-box .team-box-caption .team-box-caption-content .name,
.team-box .team-box-caption .team-box-caption-content .position {
padding: 0 15px;
text-shadow: 0px 0px 5px #000;
}
.team-box .team-box-caption .team-box-caption-content .name {
text-transform: uppercase;
font-size: 12px;
font-weight: 700;
}
.team-box .team-box-caption .team-box-caption-content .position {
font-size: 12px;
text-transform: uppercase;
}
.team-box:hover .team-box-caption {
opacity: 1;
}
#media(min-width:768px) {
.team-box .team-box-caption .team-box-caption-content .name {
font-size: 15px;
}
.team-box .team-box-caption .team-box-caption-content .position {
font-size: 15px;
text-transform: uppercase;
}
}
.team-box-last{
text-align: left;
padding: 30px 30px;
}
.team-box:last-child{
background-color: #f3f3f3;
}
#team .team-box-last h3{
color: #345;
padding-top: 15px;
padding-left: 15px;
}
#team .team-box-last p{
font-size: 18px;
line-height: 23px;
padding-top: 15px;
margin-bottom: 30px;
}
#team .team-box-last ul{
padding-left: 15px;
}
#team .team-box-last ul li{
font-size: 18px;
font-weight: 500;
}
#team .team-box-last ul li{
list-style: none;
}

Answer 1

Well, you cannot really achieve this with CSS, you may add some Javascript code using jQuery to make it easier for you.
I am giving you an example just have a look to get an idea. The idea is to get the height of each image box which I have assigned id="getheight" and then add that height to the last box. Remember you need to use overflow:hidden if you want to see same height. I have altered your code and add some class and javascript to give you what you can do.
The problem in responsiveness in the last box is you need to also handle font-size or other stuff to make sure it always appears and perfect which I haven't touched that yet. However, you can still have scrollbar for longer text if you want.
All in all, this is one approach to solve your problem, there maybe more ways if spend more time.
** Please copy and see in bigger screen for responsiveness as well we watch console to see dynamic height. ***
var picHeight = $('#getheight').height();
$('.sameHeight').css('height',picHeight + 'px');
$('.team-box-last').css('height',picHeight + 'px')
$(window).on('resize',function(){
var picHeight = $('#getheight').height();
$('.sameHeight').css('max-height',picHeight + 'px');
})
/* -------- TEAM SECTION -------- */
#team{
background-color: #fff;
text-align: center;
width: 100%;
}
#team h1{
color: #345;
font-weight: 700;
margin-top: 50px;
margin-bottom: 50px;
}
#team p{
color: #345;
font-size: 21px;
margin-top: 0px;
margin-bottom: 50px;
padding-left: 15px;
padding-right: 15px;
}
.no-padding {
padding: 0;
}
.no-gutter > [class*=col-] {
padding-right: 0;
padding-left: 0;
}
.team-box {
display: block;
position: relative;
margin: 0 auto;
max-width: 650px;
overflow: hidden;
}
.team-box img{
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
}
.team-box:hover img {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.team-box .team-box-caption {
display: block;
position: absolute;
bottom: 0;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
opacity: 1;
background: transparent;
/* background: rgba(67,208,243,0.9);
-webkit-transition: all .35s;
-moz-transition: all .35s;
transition: all .35s; */
}
.team-box .team-box-caption .team-box-caption-content {
position: absolute;
bottom: 12px;
width: 100%;
text-align: left;
}
.team-box .team-box-caption .team-box-caption-content .name,
.team-box .team-box-caption .team-box-caption-content .position {
padding: 0 15px;
text-shadow: 0px 0px 5px #000;
}
.team-box .team-box-caption .team-box-caption-content .name {
text-transform: uppercase;
font-size: 12px;
font-weight: 700;
}
.team-box .team-box-caption .team-box-caption-content .position {
font-size: 12px;
text-transform: uppercase;
}
.team-box:hover .team-box-caption {
opacity: 1;
}
#media(min-width:768px) {
.team-box .team-box-caption .team-box-caption-content .name {
font-size: 15px;
}
.team-box .team-box-caption .team-box-caption-content .position {
font-size: 15px;
text-transform: uppercase;
}
}
.sameHeight{
overflow:hidden;
}
.team-box-last{
text-align: left;
overflow:auto;
padding:30px 30px;
}
.team-box:last-child{
background-color: #f3f3f3;
}
#team .team-box-last h3{
color: #345;
padding-left: 15px;
}
#team .team-box-last p{
font-size: 18px;
line-height: 23px;
padding-top: 15px;
margin-bottom: 30px;
}
#team .team-box-last ul{
padding-left: 15px;
}
#team .team-box-last ul li{
font-size: 18px;
font-weight: 500;
}
#team .team-box-last ul li{
list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- T E A M S E C T I O N -->
<section id="team" class="no-padding">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
<h1><span class="orange">[ </span>Meet Our Team<span class="orange"> ]</span></h1>
<p>A perfect blend of creativity and technical wizardry.</br>The best people formula for great websites!</p>
</div>
</div>
<div class="row no-gutter">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4" id="getheight" >
<a class="team-box" rel="" href="https://free4kwallpapers.com/uploads/originals/2015/07/13/natur-hintergrundbilder-09-2012-269-2.jpg" title="">
<img src="https://free4kwallpapers.com/uploads/originals/2015/07/13/natur-hintergrundbilder-09-2012-269-2.jpg" class="img-responsive" alt="">
<div class="team-box-caption">
<div class="team-box-caption-content">
<div class="name">
Full Name
</div>
<div class="position">
Position
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a class="team-box" rel="" href="img/team/2.jpg" title="">
<img src="https://free4kwallpapers.com/uploads/originals/2015/07/13/natur-hintergrundbilder-09-2012-269-2.jpg" class="img-responsive" alt="">
<div class="team-box-caption">
<div class="team-box-caption-content">
<div class="name">
Full Name
</div>
<div class="position">
Position
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a class="team-box" rel="" href="img/team/3.jpg" title="">
<img src="https://free4kwallpapers.com/uploads/originals/2015/07/13/natur-hintergrundbilder-09-2012-269-2.jpg" class="img-responsive" alt="">
<div class="team-box-caption">
<div class="team-box-caption-content">
<div class="name">
Full Name
</div>
<div class="position">
Position
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a class="team-box" rel="" href="img/team/4.jpg" title="">
<img src="https://free4kwallpapers.com/uploads/originals/2015/07/13/natur-hintergrundbilder-09-2012-269-2.jpg" class="img-responsive" alt="">
<div class="team-box-caption">
<div class="team-box-caption-content">
<div class="name">
Full Name
</div>
<div class="position">
Position
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a class="team-box" rel="" href="img/team/5.jpg" title="">
<img src="https://free4kwallpapers.com/uploads/originals/2015/07/13/natur-hintergrundbilder-09-2012-269-2.jpg" class="img-responsive" alt="">
<div class="team-box-caption">
<div class="team-box-caption-content">
<div class="name">
Full Name
</div>
<div class="position">
Position
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a class="team-box" rel="" href="img/team/6.jpg" title="">
<img src="https://free4kwallpapers.com/uploads/originals/2015/07/13/natur-hintergrundbilder-09-2012-269-2.jpg" class="img-responsive" alt="">
<div class="team-box-caption">
<div class="team-box-caption-content">
<div class="name">
Full Name
</div>
<div class="position">
Position
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a class="team-box" rel="" href="img/team/7.jpg" title="">
<img src="https://free4kwallpapers.com/uploads/originals/2015/07/13/natur-hintergrundbilder-09-2012-269-2.jpg" class="img-responsive" alt="">
<div class="team-box-caption">
<div class="team-box-caption-content">
<div class="name">
Full Name
</div>
<div class="position">
Position
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a class="team-box" rel="" href="img/team/8.jpg" title="">
<img src="https://free4kwallpapers.com/uploads/originals/2015/07/13/natur-hintergrundbilder-09-2012-269-2.jpg" class="img-responsive" alt="">
<div class="team-box-caption">
<div class="team-box-caption-content">
<div class="name">
Full Name
</div>
<div class="position">
Position
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 sameHeight">
<div class="team-box">
<div class="team-box-last">
<div class="t">
<h3>Want to join our team?</h3>
<p>We’re always looking for talented designers, developers, project managers and anyone who’s driven and has a passion for the digital industries.
</p>
<ul>
<li>Check our jobs page</li>
<li>Send us your CV</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<br/>
<br/>
<br/>
<br/><br/>
<br/>
<br/>
<br/>
<br/>
I also included resize option to tell how you can handle automatic height size.
Please feel free to change my code and make that nice and compatible with your requirement.