Boostrap Grid not aligned

Question

I installed a bootstrap theme for Wordpress but I'm experiencing an issue with grid alignment.

See: Click Here in Products&Services.

'Seed' should be on the left and 'Other Products' on the right aligned with the second element 'LeafLine'.

What could that be?

Answer 1

This is an easy fix. You just need to put the content into either two rows, or two columns. Because there is more text on the first left-side block, the Seed block is getting pushed out. You will just need to increase padding below the rows.

Example with rows: http://www.bootply.com/PjWnLEAOMT

<div class="row">
              <div class="col-sm-6">
          <div class="media services">
                        <div class="media-body">
              <h3 class="media-heading">Primo</h3>
              This is Leaf Space main project. A super lightweight two-stage launch vehicle able to bring up to 50 kg to Low Earth Orbit. The use of composite materials and hybrid proprulsive technology make Primo extremely safe, reliable and enviromental friendly, ensuring precise orbit inserction and extremely low risk of failure. All the components are designed with reusability in mind for future implementation of a reusable launch vehicle.            </div>
          </div>
        </div>
                <div class="col-sm-6">
          <div class="media services">
                        <div class="media-body">
              <h3 class="media-heading">LeafLine</h3>
              A ground stations network exclusively dedicated to nano, micro and smallsats is under development. LeafLine can support several orbits and different transmission protocols. A direct encrypted online link ensures simple and safe data collection and control transmissions to satellite operators.            </div>
          </div>
        </div>
</div>
  <div class="row">
                <div class="col-sm-6">
          <div class="media services">
                        <div class="media-body">
              <h3 class="media-heading">Seed</h3>
              Thanks to its great versatility and reliability, hybrid propulsion can be used for several applications. Leaf Space is developing Seed, a next generation hybrid rocket motor designed for in space applications such as:
<ul>
    <li>orbital maneuvers</li>
    <li>re-orbiting</li>
    <li>de-orbiting</li>
</ul>
The first design is dedicated to nano and microsats, other future improved versions will serve also heavier satellites.            </div>
          </div>
        </div>
                <div class="col-sm-6">
          <div class="media services">
                        <div class="media-body">
              <h3 class="media-heading">Other Services</h3>
              Other Services
To complete the offer of Leaf Space, a series of services dedicated to nano and microsatellites will be available, also in collaboration with other companies. Among them:
<ul>
    <li>transportations</li>
    <li>technical advice</li>
    <li>satellite integration in the payload vain</li>
    <li>safety and law issues</li>
</ul>            </div>
          </div>
        </div>
              </div>

Example with two columns: http://www.bootply.com/bms2sLZ1ZJ

<div class="row">
              <div class="col-sm-6">
          <div class="media services">
                        <div class="media-body">
              <h3 class="media-heading">Primo</h3>
              This is Leaf Space main project. A super lightweight two-stage launch vehicle able to bring up to 50 kg to Low Earth Orbit. The use of composite materials and hybrid proprulsive technology make Primo extremely safe, reliable and enviromental friendly, ensuring precise orbit inserction and extremely low risk of failure. All the components are designed with reusability in mind for future implementation of a reusable launch vehicle.            </div>
          </div>
        <div class="media services">
                        <div class="media-body">
              <h3 class="media-heading">Seed</h3>
              Thanks to its great versatility and reliability, hybrid propulsion can be used for several applications. Leaf Space is developing Seed, a next generation hybrid rocket motor designed for in space applications such as:
<ul>
    <li>orbital maneuvers</li>
    <li>re-orbiting</li>
    <li>de-orbiting</li>
</ul>
The first design is dedicated to nano and microsats, other future improved versions will serve also heavier satellites.            </div>
          </div></div>
                <div class="col-sm-6">

        <div class="media services">
                        <div class="media-body">
              <h3 class="media-heading">LeafLine</h3>
              A ground stations network exclusively dedicated to nano, micro and smallsats is under development. LeafLine can support several orbits and different transmission protocols. A direct encrypted online link ensures simple and safe data collection and control transmissions to satellite operators.            </div>
          </div><div class="media services">
                        <div class="media-body">
              <h3 class="media-heading">Other Services</h3>
              Other Services
To complete the offer of Leaf Space, a series of services dedicated to nano and microsatellites will be available, also in collaboration with other companies. Among them:
<ul>
    <li>transportations</li>
    <li>technical advice</li>
    <li>satellite integration in the payload vain</li>
    <li>safety and law issues</li>
</ul>            </div>
          </div></div>
</div>

Obviously the second produces a cleaner result as far as padding goes.

Answer 2

You can also just add a clearfix element after the leafline div to fix this layout.

<div class="clearfix"></div>

More information can be found here: http://getbootstrap.com/css/#grid-responsive-resets