xxxxxxxxxx
<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 -->
Run code snippetHide results
xxxxxxxxxx
<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>
<span class="border-0"></span>
<span class="border-top-0"></span>
<span class="border-right-0"></span>
<span class="border-bottom-0"></span>
<span class="border-left-0"></span>
xxxxxxxxxx
<!-- Bootstrap@5 - Border Radius -->
<img src="..." alt="..." class="rounded">
<img src="..." alt="..." class="rounded-top">
<img src="..." alt="..." class="rounded-right">
<img src="..." alt="..." class="rounded-bottom">
<img src="..." alt="..." class="rounded-left">
<img src="..." alt="..." class="rounded-circle">
<img src="..." alt="..." class="rounded-0">
xxxxxxxxxx
<!-- bootstrap 5.2 -->
<!-- Additive -->
<span class="border"></span>
<!-- Border sizes - border-1 to border-5 -->
<span class="border border-1"></span>
<!-- Border sides -->
<span class="border-top"></span>
<!-- Change 'top' value to side what you need -->
<!-- end -> right, start -> left -->
<!-- Subtractive -->
<span class="border-0"></span>
<span class="border-top-0"></span>
<!-- Change 'top' value to side what you need -->
<!-- end -> right, start -> left -->
<!-- Border color -->
<span class="border border-primary"></span>
<!-- Change 'primary' value to color what you need -->
<!-- Border-radius -->
<img src="..." class="rounded" alt="..."> <!-- Rounded corners -->
<!-- Rounded corner sizes - rounded-1 to rounded-5 -->
<img src="..." class="rounded-1" alt="...">
<!-- Sides rounded corner -->
<img src="..." class="rounded-top" alt="...">
<img src="..." class="rounded-end" alt="..."> <!-- Right side shape -->
<img src="..." class="rounded-bottom" alt="...">
<img src="..." class="rounded-start" alt="..."> <!-- Left side shape -->
<img src="..." class="rounded-circle" alt="..."> <!-- Circle shape -->
<img src="..." class="rounded-pill" alt="..."> <!-- Pill shape-->
xxxxxxxxxx
<img src="..." alt="..." class="rounded">
<img src="..." alt="..." class="rounded-top">
<img src="..." alt="..." class="rounded-right">
<img src="..." alt="..." class="rounded-bottom">
<img src="..." alt="..." class="rounded-left">
<img src="..." alt="..." class="rounded-circle">
<img src="..." alt="..." class="rounded-4">
xxxxxxxxxx
<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>
<span class="border-0"></span>
<span class="border-top-0"></span>
<span class="border-right-0"></span>
<span class="border-bottom-0"></span>
<span class="border-left-0"></span>
xxxxxxxxxx
.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;
}
}
}