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?

enter image description here

Would this work for you? jsfiddle.net/gwpsv9y6/1

Amir
– Amir

2015-04-22 17:10:26 +00:00
Commented Apr 22, 2015 at 17:10 — Amir
– Amir, Commented Apr 22, 2015 at 17:10

codyogden · Accepted Answer · 2015-04-30 04:26:27Z

2

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:

enter image description here

edited Apr 30, 2015 at 4:26

answered Apr 22, 2015 at 17:11

codyogden

7491 gold badge8 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SBB Over a year ago

This is very close to what I need but the content on the right is starting after the page header (its pushed below it). Is it possible to only have that header go so far so that the content on the right will not be pushed down?

codyogden Over a year ago

@SBB I added the responsive classes in order to prevent the right content from popping underneath the heading at any screen size.

Dagriel · Accepted Answer · 2015-04-22 17:15:10Z

0

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/

answered Apr 22, 2015 at 17:15

Dagriel

5742 silver badges12 bronze badges

2 Comments

SBB Over a year ago

While this works, my end goal is that the HR under the header runs all the way across and doesn't cut off

Dagriel Over a year ago

In that case, I suggest you don't use the page-header class and add the line in another row.

Chuks · Accepted Answer · 2015-04-22 17:30:36Z

0

You will need to position the <div>with the information first before the <div> with the page header. Then apply the class .pull-righton 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>

answered Apr 22, 2015 at 17:30

Chuks

1,17411 silver badges21 bronze badges

Collectives™ on Stack Overflow

Bootstrap CSS Style Issue

3 Answers 3

Creates:

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Creates:

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related