Search code examples
twitter-bootstraptimeline

Image next to text


I've this code and I need to have the picture on the same line as Timeline headline.

<div class="container">
<div class="page-header">
    <img src="https://lh3.googleusercontent.com/J1d-4ze1atTh6BbMXh34eK_4fEttHBlztlWcgjKbzzd79zQYCqkLxw07Gh7oRdJrZAybyTG3acXKn7QHh3S54bgZ7awV5YQm6XZiTp_OHJq1f3a0aoOHusbbWq2kc6oAmg" width="100px" height="124px" class="img-thumbnail">
    <h1 id="timeline">Timeline</h1>
</div>
....
</div>

Solution

  • Here is a possible solution: http://codepen.io/anon/pen/RPgbYZ

    HTML

     <div class="page-header">
            <img src="https://lh3.googleusercontent.com/J1d-4ze1atTh6BbMXh34eK_4fEttHBlztlWcgjKbzzd79zQYCqkLxw07Gh7oRdJrZAybyTG3acXKn7QHh3S54bgZ7awV5YQm6XZiTp_OHJq1f3a0aoOHusbbWq2kc6oAmg" width="100px" height="124px" class="img-thumbnail">
            <span id="timeline" class="heading-text">Timeline</span>
        </div>
    

    CSS: (added)

    .heading-text{
      margin-left:10px;
      font-size:38px;
      vertical-align:bottom;
    }