d.d. d.d. - 4 months ago 25
CSS Question

How to create a vertical line between icons (while using bootstrap column class with the html element)

I am trying to get border line between two icons as shown in the below image.enter image description here

I am using bootstrap framework and have written the following code to implement the same.



<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head
content must come *after* these tags -->
<title>Border</title>
<!-- Bootstrap -->
<link href="./bootstrap.min.css" rel="stylesheet">
<link href="./bootstrap-theme.min.css" rel="stylesheet">
<link href="./font-awesome.min.css" rel="stylesheet">
<link href="./bootstrap-social.css" rel="stylesheet">
<style>

body{
background-color:lightgrey;
}

#div1{
background-color:white;
}

.timeline {
position: relative;
margin: 10px 0;
padding: 0;
list-style: none;
counter-reset: section;
}
.timeline:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 3px;
background: #fdb839;
left: 32px;
margin: 0;
border-radius: 2px;
}
.timeline > div {
position: relative;
margin-right: 10px;
margin-bottom: 50px;
padding-top: 18px;
box-sizing: border-box;
padding-left: 90px;
}
.timeline > div:before,
.timeline > div:after {
display: block;
}

.timeline > div:before {
counter-increment: section;
content: counter(section);
background: #fdb839;
width: 70px;
height: 70px;
position: absolute;
top: 0;
border-radius: 50%;
left: -1px;
display: flex;
justify-content: center;
align-items: center;
color: #Fff;
font-size: 22px;
font-weight: bold;
border: 15px solid #fff;
box-sizing: border-box;
}
.timeline > div:after {
clear: both;
}


</style>
</head>

<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-11 col-sm-offset-1">
<form class="form-horizontal" role="form" id="form1">

<div id="div1" class="form-group">
<div class="timeline">
<div class="col-xs-12 col-sm-9 col-sm-offset-2">
<br>
<p>
A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
</p>
<br>
</div>
<div class="col-xs-12 col-sm-9 col-sm-offset-2">
<br>
<p>
A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
</p>
<br>
</div>
<div class="col-xs-12 col-sm-9 col-sm-offset-2">
<br>
<p>
A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
</p>
<br>
</div>
<div class="col-xs-12 col-sm-9 col-sm-offset-2">
<br>
<p>
A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
</p>
<br>
</div>
<div class="col-xs-12 col-sm-9 col-sm-offset-2">
<br>
<p>
A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
</p>
<br>
</div>
<div class="col-xs-12 col-sm-9 col-sm-offset-2">
<br>
<p>
A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
</p>
<br>
</div>
</div>
</div>

<!--</div>-->
</form>
</div>
</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="./bootstrap.min.js"></script>
</body>
</html>





I am not able to get the line between two icons. But, when I am using div elements without column classes it is working perfectly fine.But, I am recommended to use the column classes with bootstrap framework. How will I achieve the same?

Answer

I've used simple Bootstrap layout with colored left border and pseudo-elements.

Please check the result. Is it what you want to achieve?

https://jsfiddle.net/glebkema/kez0L8qd/

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

body {
  background: lightgrey; 
}

.timeline {
  background: white; 
  counter-reset: section;
  margin: 20px auto;
  padding-left: 70px;
  padding-top: 50px;
}

.timeline .col-xs-12 {
  border-left: solid 4px orange;
  padding-bottom: 80px;
  padding-left: 40px;
  padding-right: 60px;
}

.timeline .col-xs-12:before {
  /* counter */
  counter-increment: section;
  content: counter(section);
  /* position */
  position: absolute;
  left: -22px; /* = (width + border-left) / 2 */
  top: -30px;
  /* form & size */
  border-radius: 50%;
  height: 40px;
  width: 40px;
  /* colors & text */
  background: orange;
  color: white;
  font-size: 22px;
  font-weight: bold;
  line-height: 40px;
  text-align: center;
}
<div class="container timeline">
  <div class="row">
    <div class="col-xs-12">
      A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
      A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
    </div>
    <div class="col-xs-12">
      A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
      A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
    </div>
    <div class="col-xs-12">
      A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
      A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
    </div>
    <div class="col-xs-12">
      A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
      A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
    </div>
    <div class="col-xs-12">
      A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
      A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
    </div>
  </div>
</div>

Comments