Clever Geek Handbook

How do I get two h4 tags on one line?

I would like the tags to <h4>

be on the same line in bootstrap, but I can't seem to get it to work.

I would like one to <h4>

align with the left side and the other with the right.

I have tried swimming to the left and swimming straight, 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;
}
+3


source to share


3 answers 


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

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

It works. It just floats the first to the left and the second to the right. http://jsfiddle.net/x8eszw59/

EDIT

Er, I think you'll have to change that to "h4" instead of "h1", but you get the idea. I just got away with the "h1" you have in your code.

also



It seems that you are missing your div column inside 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 only want to use Bootstrap, just make 2 columns out of 6 and put one heading tag in one and the other in the second.

http://getbootstrap.com/

+4


source


The easiest way is to convert them from block

to inline

s .:

h1 {display:inline;}


However, this might break if they go to the next line. To make sure they stay, you can make them css table-cell

s:

h1 {display:table-cell;}
+4


source 


.container {
    margin-top: 10px;
}
#v {
float:left;
    border: 6px solid #bbb;
}
#vk
{
float:right;
border: 6px solid #bbb;
}

</style>  


  <div class="container">
    <div class="row">
        <div id="v"><h1>Bootstrap jsFiddle Skeleton</h1></div>
        <div id="vk"><h1>Bootstrap jsFiddle Skeleton</h1></div>

    </div>
</div>
0


source






More articles:


All Articles