Columns same height (part of column) + bootstrap
Question
I'm trying to figure out how can I make a part of my columns the same height as the other parts in the column. An image to clarify:
Left from the data I also have another column. Full page is like this:
My html looks like this:
<div class="container">
<div class="row">
<div class="col-md-5">
<div class="contacts">
<h2>Business Contacts</h2>
<div class="infomation">
<div class="col-md-6">
<h3>Industry</h3>
<div class="name">Joris<br> <span>Vuerstaek</span></div>
<div class="mail"><a href="mailto:joris.v@vkgroup.be">joris.v@vkgroup.be</a></div>
</div>
<div class="col-md-6">
<h3>Public Space</h3>
<div class="name">Wouter<br> <span>Verhaegen</span></div>
<div class="mail"><a href="mailto:wouter.v@vkgroup.be">wouter.v@vkgroup.be</a></div>
</div>
<div class="col-md-6">
<h3>Buildings</h3>
<div class="name">Dirk<br> <span>Slabbinck</span></div>
<div class="mail"><a href="mailto:dirk.s@vkgroup.be">dirk.s@vkgroup.be</a></div>
</div>
<div class="col-md-6">
<h3>Healthcare</h3>
<div class="name">Kenneth<br> <span>Groosman</span></div>
<div class="mail"><a href="mailto:kenneth.g@vkgroup.be">kenneth.g@vkgroup.be</a></div>
</div>
</div>
</div>
</div>
<div class="col-md-7">
<div class="addresses">
<h2>Belgium</h2>
<div class="col-xs-6 col-md-4">
<div class="information">
<div class="address">
Itech Incubator 2<br>
rue Auguste Piccard 48<br>
B - 6041 Charleroi
</div>
<div class="numbers">
<span>T</span> +32 71 15 91 30<br>
<span>E</span> <a href="mailto:valerie.t@vkgroup.be">valerie.t@vkgroup.be</a>
</div>
<a href="#" class="direction">Directions</a>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="information">
<div class="address">
Brugsesteenweg 210<br>
B - 8800 Roeselare
</div>
<div class="numbers">
<span>T</span> +32 51 26 20 20<br> <span>F</span> +32 51 26 20 21<br>
<span>E</span> <a href="mailto:roeselare@vkgroup.be">roeselare@vkgroup.be</a>
</div>
<a href="#" class="direction">Directions</a>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="information">
<div class="address">
Europa Building<br>
Avenue Clemenceau 87<br>
B - 1070 Brussels
</div>
<div class="numbers">
<span>T</span> +32 2 414 07 77<br>
<span>F</span> +32 2 414 04 98<br>
<span>E</span> <a href="mailto:bxl@vkgroup.be">bxl@vkgroup.be</a>
</div>
<a href="#" class="direction">Directions</a>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="information">
<div class="address">
Axxes Business Park<br>
Guldensporenpark<br>
Building A - n° 4<br>
B - 9820 Merelbeke
</div>
<div class="numbers">
<span>T</span> +32 9 210 31 50<br>
<span>F</span> +32 9 210 31 59<br>
<span>E</span>
<a href="mailto:gent@vkgroup.be">gent@vkgroup.be</a>
</div>
<a href="#" class="direction">Directions</a>
</div>
</div>
</div>
<div class="addresses">
<h2>Vietnam</h2>
<div class="col-xs-6 col-md-4">
<div class="information">
<div class="address">
Pullman Hanoi, C21, Level 5<br>
40 Cat Linh, Dong Da District<br>
Hanoi
</div>
<div class="numbers">
<span>T</span> +84 4 3736 9097<br> <span>E</span> <a href="mailto:vietnam@vkgroup.be">vietnam@vkgroup.be</a>
</div>
<a href="#" class="direction">Directions</a>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="information">
<div class="address">
Harbour View Tower, Level 13<br>
35 Nguyen Hue, District 1<br>
Ho Chi Minh City
</div>
<div class="numbers">
<span>T</span> +84 8 3512 2051<br>
<span>E</span>
<a href="mailto:vietnam@vkgroup.be">vietnam@vkgroup.be</a>
</div>
<a href="#" class="direction">Directions</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
What I've done is give my div with class address a fixed height of 104px. But the problem is in the second part where the address is longer than 104px. How can I fix this easily?
1 answers
solution1
0 2015-06-18 22:07:59
Nielsv , Hi there. Have a look at this Fiddle .
Does this help with what you are doing here.
I gave both address and numbers classes a set height. Also used row to help with the layout here too.
Your Vietnam title gave you a little issue in the stack, so I put each country within their own rows.
I resized the Belgium layout so they are two side by side. As it has it's own row.
I have just added the border top/bottom lines to help to get a better view here while laying this out. You can remove them.
When this is resized it looks ok, but you may want to tweek this.
With the content you have here I would probably add another smaller media breakpoint at 320px and set each to full width. Remember Bootstrap helps but generally adding some custom css like this helps too.
Hope this can get you on track here.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> <title>Starter Template for Bootstrap</title> <!-- Bootstrap core CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <style> body { padding-top: 50px; } .space { margin-top: 2%; margin-bottom: 2%; } .information { margin-bottom: 2%; } .contact { height: 190px; } .address { height: 104px; border-top: 1px solid #999; } .numbers{ height: 104px; border-bottom: 1px solid #999; } .direction{ line-height: 30px; border-bottom: 1px solid #999; } .bg-country { background-color: aliceblue; padding-left: 2% } </style> </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top "> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand " href="#">Project name</a> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </div><!--/.nav-collapse --> </div> </nav> <div class="container col-lg-12 space"></div> <div class="container"> <div class="row col-xs-12 col-md-5"> <div class="contacts"> <h2>Business Contacts</h2> <div class="infomation"> <div class="col-xs-6 col-md-6 contact"> <h3>Industry</h3> <div class="name">Joris<br> <span>Vuerstaek</span></div> <div class="mail"><a href="mailto:joris.v@vkgroup.be">joris.v@vkgroup.be</a></div> </div> <div class="col-xs-6 col-md-6 contact"> <h3>Public Space</h3> <div class="name">Wouter<br> <span>Verhaegen</span></div> <div class="mail"><a href="mailto:wouter.v@vkgroup.be">wouter.v@vkgroup.be</a></div> </div> <div class="col-xs-6 col-md-6"> <h3>Buildings</h3> <div class="name">Dirk<br> <span>Slabbinck</span></div> <div class="mail"><a href="mailto:dirk.s@vkgroup.be">dirk.s@vkgroup.be</a></div> </div> <div class="col-xs-6 col-md-6"> <h3>Healthcare</h3> <div class="name">Kenneth<br> <span>Groosman</span></div> <div class="mail"><a href="mailto:kenneth.g@vkgroup.be">kenneth.g@vkgroup.be</a></div> </div> </div> </div> </div> <!--end row Business Contacts--> <div class="row col-xs-12 col-md-7"> <div class="row addresses"> <h2 class="bg-country">Belgium</h2> <div class="col-xs-6 col-md-6"> <div class="information"> <div class="address"> Itech Incubator 2<br> rue Auguste Piccard 48<br> B - 6041 Charleroi </div> <div class="numbers"> <span>T</span> +32 71 15 91 30<br> <span>E</span> <a href="mailto:valerie.t@vkgroup.be">valerie.t@vkgroup.be</a> </div> <div class="direction text-center"> <a href="#" class="btn btn-xs btn-success">Directions</a> </div> </div> </div> <div class="col-xs-6 col-md-6"> <div class="information"> <div class="address"> Brugsesteenweg 210<br> B - 8800 Roeselare </div> <div class="numbers"> <span>T</span> +32 51 26 20 20<br> <span>F</span> +32 51 26 20 21<br> <span>E</span> <a href="mailto:roeselare@vkgroup.be">roeselare@vkgroup.be</a> </div> <div class="direction text-center"> <a href="#" class="btn btn-xs btn-success">Directions</a> </div> </div> </div> <div class="col-xs-6 col-md-6"> <div class="information"> <div class="address"> Europa Building<br> Avenue Clemenceau 87<br> B - 1070 Brussels </div> <div class="numbers"> <span>T</span> +32 2 414 07 77<br> <span>F</span> +32 2 414 04 98<br> <span>E</span> <a href="mailto:bxl@vkgroup.be">bxl@vkgroup.be</a> </div> <div class="direction text-center"> <a href="#" class="btn btn-xs btn-success">Directions</a> </div> </div> </div> <div class="col-xs-6 col-md-6"> <div class="information"> <div class="address"> Axxes Business Park<br> Guldensporenpark<br> Building A - n° 4<br> B - 9820 Merelbeke </div> <div class="numbers"> <span>T</span> +32 9 210 31 50<br> <span>F</span> +32 9 210 31 59<br> <span>E</span> <a href="mailto:gent@vkgroup.be">gent@vkgroup.be</a> </div> <div class="direction text-center"> <a href="#" class="btn btn-xs btn-success">Directions</a> </div> </div> </div> </div> </div> <!--end row Belgium--> <div class="row col-xs-12 col-md-12"> <div class=" row addresses"> <h2 class="bg-country">Vietnam</h2> <div class="col-xs-6 col-md-3"> <div class="information"> <div class="address"> Pullman Hanoi, C21, Level 5<br> 40 Cat Linh, Dong Da District<br> Hanoi </div> <div class="numbers"> <span>T</span> +84 4 3736 9097<br> <span>E</span> <a href="mailto:vietnam@vkgroup.be">vietnam@vkgroup.be</a> </div> <div class="direction text-center"> <a href="#" class="btn btn-xs btn-success">Directions</a> </div> </div> </div> <div class="col-xs-6 col-md-3"> <div class="information"> <div class="address"> Harbour View Tower, Level 13<br> 35 Nguyen Hue, District 1<br> Ho Chi Minh City </div> <div class="numbers"> <span>T</span> +84 8 3512 2051<br> <span>E</span> <a href="mailto:vietnam@vkgroup.be">vietnam@vkgroup.be</a> </div> <div class="direction text-center"> <a href="#" class="btn btn-xs btn-success">Directions</a> </div> </div> </div> </div> </div> <!--end row Vietnam --> </div> <!--end container--> <div class="container col-lg-12 space"></div> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Make columns the same height in bootstrap
css bootstrap 3 columns with same height
bootstrap row with columns and tables same row height
bootstrap: vertical align to bottom / same column height
Bootstrap 3 Grid how to make nested columns all the same height as the largest
Fixed height columns with Bootstrap
Bootstrap 2 col in same height
two column layout, both columns same height AND both fill full height of the screen
Bootstrap / Css - 2 DIV same height
Bootstrap Carousel same height items
Related Tags