I've been working on implementing this unique header design using Bootstrap.
https://i.sstatic.net/1zFCw.jpg
Even though I tried utilizing the grid system, it doesn't seem like the ideal approach. The code I currently have doesn't position the two buttons correctly in the lower right corner.
Here is the HTML code snippet:
<div class="row">
<div class="col-sm-12 mb-3">
<div class="line"></div>
<div class="row">
<div class="col-sm-3 pt-4 pl-5">
<img src="logo.png" class="logo" />
</div>
<div class="col-sm-5"></div>
<div class="col-sm-4">
<a class="btn btn-primary" href="#" role="button">choice 1</a>
<a class="btn btn-primary" href="#" role="button">choice 2</a>
</div>
</div>
</div>
</div>
And here is the corresponding CSS code:
.line {
position: relative;
}
.line::after {
content: "";
background-color: #ed1e79;
position: absolute;
width: 100%;
height: 20px;
top: 90px;
left: 0px;
z-index: -1;
}
.btn {
border-radius: 0 !important;
}