CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Erik Thiart
Erik Thiart

Reputation: 391

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>
  </header>
  <div class="panel-body">
   <p>Panel content</p>
  </div>
</section>

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

Tl;Dr 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.

EDIT

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

enter image description here

Upvotes: 2

Views: 3646

Answers (2)

Jyoti Pathania
Jyoti Pathania

Reputation: 4989

Try this:

Demo here

HTML:

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

CSS:

.panel { 
  max-width: 500px;
  margin: auto;
}
.custom-separator {
  height: 5px;
  background-color: #428BCA;
  margin: -12px -15px 10px;
}

Upvotes: 4

Chris Yongchu
Chris Yongchu

Reputation: 789

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. http://codepen.io/yongchuc/pen/KgOGvq

Upvotes: 5

Related Questions