Erik Thiart Erik Thiart - 10 months ago 74
CSS Question

Add underline to Bootstrap's Panel

I have made a design in inkscape which I now want to start building in HTML using the bootstrap framework.

However, I am finding it a bit frustrating/lost trying to add a underline to the panel heading.

The code in bootstrap is this particular bit just to show what panel component I am referring to:

<section class="panel panel-primary">
<header class="panel-heading">
<h5 class="panel-title">Panel title</h5>
<div class="panel-body">
<p>Panel content</p>

This displays the default bootstrap panel like so:

enter image description here

What I want to achieve is the following: (please note I am only referring to the underline in the image below to style the panel to match the styling below I can do so don't worry about the full CSS I am fairly comfortable with it, it's just for the life of me I can't seem to figure out how to add the underline to the default bootstrap panel component.)

enter image description here

Just to be super clear ignore the different styling I can manage that just help me understand how to add the underline to the panel heading.


Thank you so much guys this means the world to me.
It works! See below:

enter image description here

Answer Source

One way to accomplish this is add a custom style for .panel-body to have a top margin and a top border.

.panel-body {
  border-top: 2px solid #337ab7;
  margin-top: 3px;

Here's a working codepen for you to review.