Jimmy Wong Jimmy Wong - 1 year ago 113
CSS Question

Bootstrap: How can I add equal length lines between the columns?

I have successfully added a line between the columns, however, the length of the lines are not equal, making the page looks strange.

What I want is this, where I can also easily adjust the length of the line. Thanks!

enter image description here

border-right: 1px solid #ccc;

border-right: 1px solid #ccc;

#thirdPart {
border-right: 1px solid #ccc;

<!DOCTYPE html>
<title>Bo Kei Tuck Shop</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'> <!--Google Font API-->
<link rel="stylesheet" type="text/css" href="stylesheet.css"> <!--CSS-->
<script type='text/javascript' src='javascript/jquery-3.1.0.js'></script> <!--jQuery-->
<script type='text/javascript' src='javascript/jquery-ui.min.js'></script> <!--jQuery-->
<meta name="description" content="Free Web tutorials"> <!--meta description-->
<meta name="keywords" content="HTML,CSS,XML,JavaScript"> <!--meta keywords-->
<meta name="content-language" content="en-US">

<div id=footerNormal>
<div class="container">
<div class="row">
<div class="col-sm-3 text-center" id="firstPart">
<p><a href="navigation_bar/about_us.html">About Us</a></p>
<p><a href="navigation_bar/hot_food.html">Hot Food</a></p>
<p><a href="navigation_bar/cold_food.html">Cold Food</a></p>
<p><a href="navigation_bar/snacks.html">Snacks</a></p>
<p><a href="navigation_bar/drinks.html">Drinks</a></p>
<p><a href="navigation_bar/contact_us.html">Contact Us</a></p>
<div class="col-sm-3 text-center" id="secondPart">
<p>E1 AĆ©rogare fret de Rochambeau, Matoury 97351, French Guiana</p>
<p>Mon-Sat: 0700-1300, 1300-1800</p>
<p>Sun: 0700-1300</p>
<div class="col-sm-3" id="thirdPart">
<p class="text-center">JOIN OUR E-CLUB</p>
<p class="text-center">Receive exclusive special offers & discounts throughout the year and a special gift on your birthday.</p>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
<button type="submit" class="btn btn-default">Submit</button>
<div class="col-sm-3 text-center" id="fourthPart">
<p>Connect with us</p>
<p>Order Now</p>
<p>0594 28 02 94</p>

Answer Source

if you want the border's length to be equal, the height of the component must be equal as well.

You can either set a fixed height or use jQuery plugin like jQuery Match Height to make sure that the heights are always the same.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js"></script>

<script type="text/javascript">
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download