4

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?

d.d.
  • 129
  • 1
  • 2
  • 7
  • In snippet line is show.What you want to change? – ankit Jul 17 '16 at 10:59
  • The snippet is displaying the border lines because it is not accepting the bootstrap files.If you store bootstrap files in your computer and try to run the above snippet it won't work. – d.d. Jul 17 '16 at 11:14
  • This might even be a duplicate of this post: http://stackoverflow.com/questions/12783064/why-does-overflow-hidden-have-the-unexpected-side-effect-of-growing-in-height-t ... let me know if it is and I'll vote to close as such – Asons Jul 17 '16 at 12:02

1 Answers1

0

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

  2. You can add nested columns and images.

two columns with images

One column with images

Images are placed under each other when the screen width is 767px or less.

jsfiddle

@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;
}


/* images */
.timeline img {
  margin-top: 20px;
  width: 100%;
}
<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.
      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.
      <div class="row">
        <div class="col-sm-6"><img src="https://via.placeholder.com/900x300/c69/f9c/?text=First" alt=""></div>
        <div class="col-sm-6"><img src="https://via.placeholder.com/900x300/9c6/cf9/?text=Second" alt=""></div>
      </div>
    </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.
      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.
    </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.
      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>

Two columns with images

Images are placed under each other when the screen width is:

  • 480px or less
  • from 768px to 991px

jsfiddle  •  codepen

@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;
}

/* images */
.timeline img {
  margin-top: 20px;
  width: 100%;
}
@media (max-width: 480px) {
  .col-xs-6 {
    width: 100% !important;
  }
}
<div class="container timeline">
  <div class="row">
    <div class="col-sm-6">
      <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.
          <div class="row">
            <div class="col-xs-6 col-sm-12 col-md-6"><img src="https://via.placeholder.com/900x300/c69/f9c/?text=First" alt=""></div>
            <div class="col-xs-6 col-sm-12 col-md-6"><img src="https://via.placeholder.com/900x300/9c6/cf9/?text=Second" alt=""></div>
          </div>
        </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.
          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.
        </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.
          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>
      
    <div class="col-sm-6">
      <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.
          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.
          <div class="row">
            <div class="col-xs-6 col-sm-12 col-md-6"><img src="https://via.placeholder.com/900x300/69c/9cf/?text=Three" alt=""></div>
            <div class="col-xs-6 col-sm-12 col-md-6"><img src="https://via.placeholder.com/900x300/96c/c9f/?text=Four" alt=""></div>
          </div>
        </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.
          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.
        </div>
      </div>
    </div>
  </div>
</div>
Gleb Kemarsky
  • 10,160
  • 7
  • 43
  • 68
  • Thanks for the answer.Now it's working fine for the above html code.but I have two images in a row of the form each of which is using col-sm-6.Hence I am not getting the desired result.How will I solve this problem? – d.d. Jul 17 '16 at 20:26
  • @d.d. You can add nested columns and images. I've updated my answer. – Gleb Kemarsky Jul 18 '16 at 05:14