title: Bootstrap timeline picture alignment
body: <p>I want to integrate a timeline on a website and used this code as a basis for the timeline: <a href="http://bootsnipp.com/snippets/featured/timeline-responsive" rel="nofollow noreferrer">http://bootsnipp.com/snippets/featured/timeline-responsive</a></p>
  
  <p>I further expanded the snippet by adding pictures. In the beginning everything worked great with two pictures (in the first row), three were also okay(below the first two), but as soon as a forth came, latter suddenly appeared one row below instead of next to the third under the second. </p>
  
  <p>html: </p>
  
  <pre><code>&lt;head&gt;
   &lt;meta charset="utf-8"&gt;
   &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
   &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
   &lt;title&gt;&lt;/title&gt;
   &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
   &lt;link rel="stylesheet" href="css/styles.css"&gt;
  &lt;/head&gt;
  
  
  &lt;li class="timeline-inverted"&gt;
              &lt;div class="timeline-panel"&gt;
                  &lt;div class="timeline-heading"&gt;
                      &lt;h4 class="timeline-title"&gt;1981-1990&lt;/h4&gt;
                  &lt;/div&gt;
                  &lt;div class="timeline-body"&gt;
                      &lt;p&gt;Some text&lt;/p&gt;
                      &lt;p&gt;Some more text&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;&lt;div class="timeline-picture-body"&gt;
                  &lt;img class="timeline-images-left padding-bottom" src="http://placehold.it/250x250"&gt;
                  &lt;img class="timeline-images-left padding-bottom" src="http://placehold.it/250x250"&gt;
                  &lt;img class="timeline-images-left align" src="http://placehold.it/250x250"&gt;
                  &lt;img class="timeline-images-left align" src="http://placehold.it/250x250"&gt;
              &lt;/div&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>/*body*/
  body {
   background-color: white;
  }
  .panel {
   background-color: white;
   color: black;
   border-radius: 0;
   text-align: justify;
   font-size: 1.3em;
  }
  .panel-extra {
   padding: 10px 0;
   margin-top: 25px;
   background-color: lightgrey;
   border-radius: 0;
   text-align: center;
   font-size: 1.3em;
   font-weight: bold;
  }
  .box {
   padding-top: 30px;
   padding-bottom: 30px;
   border-bottom-width: 3px;
   border-bottom-color: lightgrey;
   border-bottom-style: solid; 
  }
  /*Timeline*/
  
  .timeline {
  list-style: none;
  padding: 20px 0 20px;
  position: relative;
  }
  
  .timeline:before {
      top: 0;
      bottom: 0;
      position: absolute;
      content: " ";
      width: 3px;
      background-color: #eeeeee;
      left: 50%;
      margin-left: -1.5px;
  }
  
  .timeline &gt; li {
      margin-bottom: 20px;
      position: relative;
  }
  .timeline &gt; li:before,
  .timeline &gt; li:after {
      content: " ";
      display: table;
      }
  
  .timeline &gt; li:after {
      clear: both;
      }
  
  .timeline &gt; li &gt; .timeline-panel {
      width: 46%;
      float: left;
      border: 1px solid #d4d4d4;
      border-radius: 2px;
      padding: 20px;
      position: relative;
      -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
      box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
      margin-bottom: 40px;
  }
  .timeline &gt; li.timeline-inverted &gt; .timeline-panel {
          float: right;
      }
  
      .timeline &gt; li.timeline-inverted &gt; .timeline-panel:before {
          border-left-width: 0;
          border-right-width: 15px;
          left: -15px;
          right: auto;
      }
  
      .timeline &gt; li.timeline-inverted &gt; .timeline-panel:after {
          border-left-width: 0;
          border-right-width: 14px;
          left: -14px;
          right: auto;
      }
  .timeline &gt; li.timeline-inverted &gt; .timeline-picture-body: before {
          position: absolute;
          top: 26px;
          right: -15px;
          display: inline-block;
          border-top: 15px solid transparent;
          border-left: 15px solid #ccc;
          border-right: 0 solid #ccc;
          border-bottom: 15px solid transparent;
          content: " ";
      }
      .timeline &gt; li.timeline-inverted &gt; .timeline-picture-body: after {
          position: absolute;
          top: 27px;
          right: -14px;
          display: inline-block;
          border-top: 14px solid transparent;
          border-left: 14px solid #fff;
          border-right: 0 solid #fff;
          border-bottom: 14px solid transparent;
          content: " ";
      }
      .timeline &gt; li.timeline-inverted &gt; .timeline-picture-body {
          float: left;
      }
  .timeline-title {
   margin-top: 0;
   color: inherit;
  }
  
  .timeline-body &gt; p,
  .timeline-body &gt; ul {
   margin-bottom: 0;
  }
  
  .timeline-body &gt; p + p {
   margin-top: 5px;
  }
  .timeline-images-right {
   display: inline-block;
   vertical-align: top;
   width: 40%;
   float: left;
   padding: 0 10px;
  }
  .timeline-images-left {
   display: inline-block;
   vertical-align: top;
   width: 40%;
   float: right;
   padding: 0 10px;
  }
  .padding-bottom {
   padding-bottom: 10px;
  }
  .align {
   display: block;
  }
  
  /*fonts*/
  h1 {
   text-align: center;
   font-size: 3em;
   color: black;
   padding-top: 220px;
   margin-top: 0;
  }
  .box h1 {
   text-align: center;
   font-size: 3em;
   color: black;
   padding-top: 30px;
   margin-top: 0;
  }
  h2{
   text-align: center;
   font-size: 2.3em;
   color: black;
  }
  p {
   text-align: justify;
   font-size: 1.3em;
  }
  </code></pre>
  
  <p>I already tried deleting any <code>padding</code> and changing the <code>display</code> and <code>vertical-alignment</code> property.</p>
  
  <p>For clarification, the problem looks like this: <a href="https://i.stack.imgur.com/JukH9.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JukH9.jpg" alt="problem"></a></p>
  
  <p>If you need further parts of the code, please tell me, I am happy to upload them as well.</p>
  
  <p>I appreciate any help, thank you in advance!</p>