Bootstrap 3: text on the left and right in the page header

Question

I'm trying to make a simple page header with bootstrap 3. Here's the code:

<div class="page-header">     <h1>Text on the left</h1>     <h3 class="text-right">This to the right but on the same line</h3> </div> 

Here's a jsfiddle to try: http://jsfiddle.net/DTcHh/2450/

Basically I just want to have text on the left and right inside the page-header, but on the same line.

The usual tricks of using float:left and float:right as with normal html "break" the page-header, meaning the text is properly aligned but is displayed outside (under) the page-header, which remains empty.

Any clues?

Answer 1

you can use "pull-right" and "pull-left" classes, with "clearfix" class after.

(Bootstrap 3)

<div class="page-header">   <div class="pull-left">   <h1>Text on the left</h1>   </div>   <div class="pull-right">   <h3 class="text-right">This to the right but on the same line</h3>   </div>   <div class="clearfix"></div> </div> 

also you can adjust line height on the h3 tag in the right, if you want to match with h1

Fiddle for Bootstrap 3: https://jsfiddle.net/darkosss/dy9wjk2q/

(as of Bootstrap 4.1)

use float-left and float-right instead. You still need the clearfix.

<div class="page-header">   <div class="float-left">   <h1>Text on the left</h1>   </div>   <div class="float-right">   <h3 class="text-right">This to the right but on the same line</h3>   </div>   <div class="clearfix"></div> </div> 

Fiddle for Bootstrap 4: https://jsfiddle.net/darkosss/eozs65qb/