CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user2936008
user2936008

Reputation: 1347

Bootstrap css horizontal align elements not working properly

I was trying to make to the two adjacent div horizontal to each other properly, But failed because it doesn't fit in properly.

<div class="container">
  <div class="row">
    <div>
      <div class="offer-horizontal">
        <div class="col-xs-12 col-sm-3 col-md-3" style="text-align:center;">
          <img src="https://icon.uiowa.edu/help/wp-content/uploads/2014/07/ICON_logo_only.png" alt="nothing" style="height:20px;width:50px;">
        </div>
        <div class="col-xs-12 col-sm-3 col-md-3">
          <span class="offer-description-horizontal" ng-bind-html="offer.description | words:15"></span>
          <p>Some really large label that will wrap to multiple lines in small screens</p>
          <div>
            <button>
              shop now
            </button>
          </div>
        </div>
      </div>
      <div class="offer-horizontal">
        <div class="col-sm-3 col-md-3" style="text-align:center;">
          <img src="http://www.iconplc.com/icon-files/images/image-bank-component/other/icon-logo.jpg" style="height:20px;width:50px;">
        </div>
        <div class="col-sm-3 col-md-3">
          <span class="offer-description-horizontal" ng-bind-html="offer.description | words:15"></span>
          <p>Some really large label that wil</p>
          <div>
            <button>
              shop now
            </button>
          </div>
        </div>
      </div>
      <div class="offer-horizontal">
        <div class="col-sm-3 col-md-3" style="text-align:center;">
          <img src="https://upload.wikimedia.org/wikipedia/commons/9/9e/Icons_logo_normal.jpg" alt="nothing" style="height:20px;width:50px;">
        </div>
        <div class="col-sm-3 col-md-3">
          <span class="offer-description-horizontal" ng-bind-html="offer.description | words:15"></span>
          <p>Some really large label that will wrap to multiple lines in small screens</p>
          <div>
            <button>
              shop now
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

1st component : div with black icon

2nd component : div with green icon (less description)

3rd component : div with blue icon

Icon and Description are one component and 2 components should be side by side with same height (in desktop and tablet. In this example I have created both the components are side by side, but due to height problem of second component with green icon has less height then the third component instead of being below of 1st component it is below second component.

Basically my question is: how to adjust 2nd component with green icon such that the third component is just below the 1st component

Any help is appreciated.

JSFiddle :

JSfiddle

Upvotes: 0

Views: 146

Answers (1)

T.Okahara
T.Okahara

Reputation: 1234

I updated your JSFiddle.

Updated: http://jsfiddle.net/okahara/hoekuw3v/1/

It will work for small and medium sized screens. I reorganized your classes in the html and added a min-height to offer-horizontal.

Let me know if you have any questions.

Upvotes: 1

Related Questions