Create a border around div with top-border going through header and bottom-border going through button-Twitter bootstrap

raney24
May 14, 2019
108 views
0 votes
2 Answers

I want to create what is shown in this mockup:

Here is what I currently have: https://codepen.io/raney24/pen/VOmjBY

.header-border {
  width: 100%;
  margin-bottom: 10px;
  border-left: red solid 1px;
  border-right: red solid 1px;
  border-bottom: red solid 1px;
  .heading, .heading-subtitle {
    text-align: center;
  }
  .heading > span, .heading-subtitle > span {
    background-color: white;
    box-shadow: white 11px 0px 0px,
                white -13px 0px 0px;
    &:after {
      content: '';
      border-top: 1px solid red;
      height: 1px;
      width: 100%;
      display: block;
      position: relative;
      top: -20px;
      z-index: -1;
    }
  }
  .heading-subtitle > span {
    &:after {
      top: -13px;
    }
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="header-border">
      <h2 class="heading"><span>Learn More About What We Do</span></h2>
      <div class="col-sm-4">
        <div class="header-border">
          <h4 class="heading-subtitle"><span>Coding School</span></h4>
          <p>Awesome Inc U is our coding school. It is for both adults and children. We have taught over 1500 people to code with us.</p>
           <div class="text-center">
             <a class="btn btn-sm btn-primary" href="#">Read More</a>
          </div>
        </div>
      </div>
    </div>
  </div> <!-- row-->
</div><!-- container -->

I’m not sure how to move the borders down so that they don’t go above my header borders. Maybe I’m going at it from the wrong approach, if so let me know what your thoughts are.

I’m open to using JavaScript/JQuery, but would like to avoid it if possible.

Answers

removed :after css and used margin: -20px to move the header on top
check below link

https://codepen.io/Xenio/pen/EzNgaB

.header-border {
  width: 100%;
  margin-bottom: 10px;
  border: red solid 1px;
  
  .heading, .heading-subtitle {
    text-align: center;
    margin-top: -20px
  }
 
 .heading > span, .heading-subtitle > span {
    background-color: white;
    box-shadow: white 11px 0px 0px,
                white -13px 0px 0px;
  }
  .heading-subtitle > span {
    &:after {
      top: -13px;
    }
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="header-border mt-4">
      <h2 class="heading"><span>Learn More About What We Do</span></h2>
      <div class="col-sm-4 mt-5">
        <div class="header-border">
          <h4 class="heading-subtitle"><span>Coding School</span></h4>
          <p>Awesome Inc U is our coding school. It is for both adults and children. We have taught over 1500 people to code with us.</p>
           <div class="text-center">
             <a class="btn btn-sm btn-primary" href="#">Read More</a>
          </div>
        </div>
      </div>
    </div>
  </div> <!-- row-->
</div><!-- container -->

fieldset {
 position: relative; 
padding: 35px 25px 75px;
 }
fieldset legend
 {
 	left:50%;
 } 
.legend2 
{ position: absolute; 
bottom: -1.4ex; 
left: 50%; 
background: white 
 }
caption, .legend2 
{ padding: 0 2px 
}

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
</head>
<body>


<fieldset><legend align="center">Caption <span class=legend2><button>click</button></span></legend>
  Put fields here.
</fieldset>
</body>
</html>

Please signup or login to give your own answer.

Click here to cancel reply.