Bootstrap CSS Style Issue

Question

I am trying figure out how to adjust some of the bootstrap CSS styling to fix an issue I am running into.

I am using the page header class to create my title which is consistent across all my pages.

On the page I am working on, there is some more information I would like to add to the right side of the page within the header.

Anytime I try to get it to appear above the line, it just goes below or in the middle and the line doesnt seem to move.

Fiddle: http://jsfiddle.net/rka18Lze/

<div class="container">
  <div class="page-header">
    <h3 class="text-info">A page header here</h3>
  </div>
  <div class="row">
    <div class="col-md-4 col-md-offset-8 text-right">
      <h5 class="text-info">Owner: <a href="#" target="_blank">Bob Smith</a></h5>
      <h5 class="text-info">Type: Desktop</h5>
      <h5 class="text-info">Status: Active</h5>
    </div>
  </div>
</div>

Here is an example of what I am trying to accomplish:

Is there a way I can move the line down under this text; or maybe a special class to help in this one situation if needed?

Answer 1

This would be a Bootstrap-only solution: ( Example )

<div class="container">
    <div class="page-header row">
      <div class="col-xs-6 col-sm-6 col-sm-6 col-md-8">
        <h3 class="text-info">A page header here</h3>
      </div>
      <div class="col-xs-6 col-sm-6 col-sm-6 col-md-4 text-right">
          <h5 class="text-info">Owner: <a href="#" target="_blank">Bob Smith</a></h5>
          <h5 class="text-info">Type: Desktop</h5>
          <h5 class="text-info">Status: Active</h5>
      </div>
  </div>
</div>

Creates:

Answer 2

You should use the same row for both elements. Take a look:

<div class="container">
  <div class="row">
      <div class="col-xs-8">
        <div class="page-header">
        <h3 class="text-info">A page header here</h3>
       </div>
  </div>
  <div class="col-xs-4 text-right">
  <h5 class="text-info">Owner: <a href="#" target="_blank">Bob Smith</a></h5>
  <h5 class="text-info">Type: Desktop</h5>
  <h5 class="text-info">Status: Active</h5>
</div>

http://jsfiddle.net/jozreLj2/

Answer 3

You will need to position the <div> with the information first before the <div> with the page header. Then apply the class .pull-right on the <div> with the information.

Here is a jsfiddle

<div class="container">

    <div class="row pull-right">
        <div class="col-md-4 col-md-offset-8 text-right">
            <h5 class="text-info">Owner: <a href="#" target="_blank">Bob Smith</a></h5>
            <h5 class="text-info">Type: Desktop</h5>
            <h5 class="text-info">Status: Active</h5>
        </div>
    </div>

    <div class="page-header">
        <h3 class="text-info">A page header here</h3>
    </div>

</div>