what class use to make vertical line using glyphicon [Resolved]

Posted by Atmansangeetha under Bootstrap on 10/18/2016 | Points: 10 | Views : 301 | Status : [Member] | Replies : 2
in single row,how to make layout like

left side should be   center     right side should be
John Doe johndoe@gmail.com
john1234 8000000000


Note center column - should have vertical stright line
how to make this layout using bootstrap.could please help me out. below mentioned my code.



<div class="row">
<span class="text-left">
<div class="col-md-4">
John Doe</div>
<div class="col-md-4">
john1234</div>
</span>
<span class="text-center">
<span class="col-md-2">
<span class="glyphicon glyphicon-ok"></span>
</span>
</span>
<span class="text-right">
<span class="col-md-6">
<label>sangeethamani@gmail.com</label>
<label>9884329553</label>
</span>
</span>
</div>
</div>





Responses

Posted by: Rajnilari2015 on: 10/18/2016 [Member] [Microsoft_MVP] [MVP] Platinum | Points: 50

Up
0
Down

Resolved
Try this

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">

<style type="text/css">
.separator:after {
content: ' ';
display: block;
float: left;
background: #ADADAD;
margin: 0 10px;
height: 34px;
width: 1px;
}
div {
float: left;
}
</style>
</head>

<body>
<div class="row">
<span class="text-left">
<div>John Doe</div>
</div>
</span>

<span class="separator"></span>

<span class="text-center">
<span class="col-md-2">
<span class="glyphicon glyphicon-ok"></span>
</span>
</span>

<span class="text-right">
<span class="col-md-6">
<label>sangeethamani@gmail.com</label>
</span>
</span>
</div>

</body>

</html>








--
Thanks & Regards,
RNA Team

Atmansangeetha, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Atmansangeetha on: 10/19/2016 [Member] Starter | Points: 25

Up
0
Down
Thanks for your coding. Its very helpful to my way of thinking even I also tried that code as
.seprator{

width: 28px;
border-left: 2px groove rgb(255, 153, 0);
height: 106px;
position: relative;
left: 31px;
}


Atmansangeetha, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response