How to make horizontal lines between two div

BHAS 0
Viewed 56

I'm trying to accomplish the below using CSS:

Required Output Image

I have tried to place horizontal line and content in between those div, but I am not getting that.

I tried below code

HTML code:

<div class="col-12">
    <div class="row mt-3 mb-3">
        <div class="col-md-2 offset-md-1  text-center">
            <div class="d-flex flex-column" style="font: normal normal 600 12px/24px Gellix Semi Bold; color: #000048;">
                <div class="align-self-center ExcelBox d-flex justify-content-center align-items-center">
                    <div class="d-flex justify-content-center align-items-center">
                        <!-- Excel images comes -->
                    </div>
                </div>
                <div class="mt-2" style="font: normal normal normal 12px/24px Gellix Regular; color: #53565A;">
                    Application / Ticket Download</div>
                <div class="mt-2">
                    <button class="upload-Downloadbtn">
                        Download
                    </button>
                </div>
            </div>
        </div>
        <div class="col-md-5 ">
             <!-- Horizontal Line need come here as like in image -->
        </div>
        <div class="col-md-2 offset-md-1  text-center">
            <div class="d-flex flex-column" style="font: normal normal 600 12px/24px Gellix Semi Bold; color: #000048;">
                <div class="align-self-center ExcelBox d-flex justify-content-center align-items-center">
                    <div class="d-flex justify-content-center align-items-center">
                         <!-- Excel images comes -->
                    </div>
                </div>
                <div class="mt-2" style="font: normal normal normal 12px/24px Gellix Regular; color: #53565A;">
                    Application / Ticket Upload</div>
                <div class="mt-2">
                    <button class="upload-btn">
                        Upload
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

I Have tried and the output image I share it below: enter image description here

I am unable to share the CSS its showing error.

CSS code:

.upload-btn {
  width: 121px;
  height: 32px;
  background: #FFFFFF  0% 0% no-repeat padding-box;
  border-radius: 4px;
  color: #2F78C4;
  font: normal normal 600 14px/13px Gellix Semi Bold;
  border: 1px solid #2F78C4;
  }

  .upload-btn img{
      width: 18px;
      height: 15px;
      display: inline-block;
      margin-right: 5px;
      margin-top: -3px;
      vertical-align: middle;
  }

.upload-Downloadbtn {
    width: 140px;
    height: 32px;
    background: #26EFE9  0% 0% no-repeat padding-box;
    border-radius: 4px;
    color: #000048;
    font:  normal normal 600 14px/13px Gellix Semi Bold;
    border: none;
    }

.upload-Downloadbtn img {
    width: 18px;
    height: 15px;
    display: inline-block;
    margin-right: 5px;
    margin-top: -3px;
    vertical-align: middle;
}

.TicketHorLine 
    {
         border-bottom:2px solid black;
         padding-bottom:15px;
         position:relative;
    }
    .TicketHorLine:before, .TicketHorLine:after 
    { 
         position:absolute;
         bottom:-6px; left:0; 
         height:10px;
         width:10px;
         background:black;
         content:""; 
         border-radius:5px;
    }
    .TicketHorLine:after
    {
    right:0; 
    left:auto;
    }
  
  .ExcelBox {
    background-color: #FFFFFF;
    border-radius: 50%;
    height: 74px;
    width: 74px;
    border: 1px solid #059F4C;
  }
css html
2 Answers

section+section { border-top-style: solid; border-top-width: .1em; }

vignesh rajamani0

Created a sample, similar to image in your question

<!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.0">
  <title>Document</title>
  <style>
    .hr{
  display: flex;
  width:100%;
  align-items: center;
}
.hr__dot{
  height:10px;
  width:10px;
  background-color: black;
  border-radius: 5px;
}
.hr__line{
  border-top:2px solid black;
  min-width: 500px;
  width: max-content;
}
  </style>
</head>
  
<body>
  
  <div>One</div>
  <div class="hr">
    <div class="hr__dot"></div>
    <div class="hr__line"></div>
    <div  class="hr__dot"></div>
  </div>
  <div>Two</div>
  
</body>
</html>

Output:

enter image description here

Vivek kushwaha0
Related