user123 user123 - 24 days ago 10
HTML Question

how to make text center and another text on right side of panel body

I have a panel body and in that I want a heading to be centered and a some more text to be right.

How can I do?



<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="panel panel-default">
<div class="panel-heading panel_bg text-center"><span>Interests</span> <div class="no_of_category_selected">02/18</div></div>
</div>





Any help would be great.

Thank you.

Answer

If I've understood your question correctly you can do it with some custom styling as there is no such styling exists in bootstrap.css for this:

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

.panel-heading {
  padding-right: 120px;
  padding-left: 120px;
  position: relative;
}
.more-text {
  transform: translateY(-50%);
  position: absolute;
  overflow: hidden;
  height: 20px;
  width: 100px;
  right: 15px;
  top: 50%;
}
<div class="panel panel-default">
  <div class="panel-heading panel_bg  text-center">
    <span>Interests</span>
    <span class="more-text text-right">02/18</span>
  </div>
</div>