CODEWITHSUNDEEP
htmltwitter-bootstraptwitter-bootstrap-3
Master_T
Master_T

Reputation: 7913

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

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?

Upvotes: 24

Views: 44636

Answers (3)

Darko
Darko

Reputation: 930

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/

Upvotes: 49

Creaven
Creaven

Reputation: 319

use the following structure to position with bootstrap: 

<div class= 'container'>
<div class='row'>
<div class ='md-col-4'>
 <h1>Text on the left</h1>
</div>
<div class = 'md-col-4.col-md-offset-4'>
<h3 class='text-right'>This to the right but on the same line</h3>
</div>
</div>

Think of the row as a grid across of 12. So fist 4 left 3rd. 2nd div is the 3rd third with a 4 grid offset or gap.

http://getbootstrap.com/css/

Upvotes: 1

Alex Angelico
Alex Angelico

Reputation: 4035

if you are using Bootstrap, you should do something like

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

if you want to "stylize" the h1, h2, etc, change it to "display:block" and you'll have to add a "width" attribute anyway

Upvotes: 9

Related Questions