Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to get two h4 tags on the same line?

I'd like to get 2 <h4> tags to be on the same row in bootstrap however I can't get it to work.

I'd like to have one <h4> aligned with the left side, and one with the right side.

I've tried floating left and floating right but to no avail.

http://jsfiddle.net/v8ufbbdL/2/

<div class="container">
    <div class="row">
        <div class="coolContainer">
        <h1>Bootstrap jsFiddle Skeleton</h1>
        <h1>Bootstrap jsFiddle Skeleton</h1>
        </div>
    </div>
</div>

css

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.container {
    margin-top: 10px;
}
.coolContainer {
    border: 3px solid #bbb;
}
like image 873
CodyBugstein Avatar asked Oct 23 '14 02:10

CodyBugstein


1 Answers

.coolContainer h1:first-of-type {
    float: left;
}

.coolContainer h1:last-of-type {
    float: right;
}

This works. Just floats the first one left and the second one right. http://jsfiddle.net/x8eszw59/

EDIT

Er, I guess you'd have to change this to "h4" instead of "h1", but you get the idea. I was just going off the "h1"'s you have in your code.

ALSO

It seems like you are missing your column div's inside of your row. For example:

<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>

If you wanted to only use Bootstrap, just make 2 columns of 6, and put one header tag in one and the other in the second.

http://getbootstrap.com/

like image 177
James Avatar answered Nov 16 '22 09:11

James