title: Making bootstrap cols play nice with angular ng-show
body: <p>I have three columns of equal width of col-md-4, however the middle one has an ng-show set on it and sometimes will not be displayed. Right now when friend requests come in and the right most col-md-4 comes up, it is showing up in the middle when the middle one is still hidden. How do I still have the middle col-md-4 chatWindow take up space even when it is hidden? </p>
  
  <pre><code>&lt;div class="row"&gt;
  
    &lt;div class="col-md-4 friendListWindow" ng-init="getFriends()"&gt;
      Friends List
      &lt;form ng-submit='addFriend(username)' name='addFriendForm'&gt;
        &lt;input type='text' name='username' ng-model='username' required/&gt;
        &lt;input type='submit' ng-disabled='!addFriendForm.$valid' value='Add Friend'&gt;
      &lt;/form&gt;
      Online Friends
      &lt;ul&gt;
        &lt;span ng-repeat='friend in friends track by $index | orderBy:"name"' ng-click='startChat(friend)'&gt;
          &lt;li ng-if='friend.online'&gt;
            &lt;span class='friendService'&gt;{{friend.service}}&lt;/span&gt;
            &lt;span class='friendName'&gt;{{friend.name}}&lt;/span&gt;
          &lt;/li&gt;
        &lt;/span&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  
  
    &lt;div class="col-md-4 chatWindow" ng-show="activeFriend"&gt;
      &lt;div class="activeFriendBox"&gt;Chat with {{activeFriend.name}}&lt;/div&gt;
  
      &lt;div class="messages"&gt;
        &lt;div ng-repeat='message in activeFriend.messages track by $index | orderBy:"timeStamp"'&gt;
          &lt;span&gt;{{message.from}}&lt;/span&gt;
          &lt;span&gt;{{message.message}}&lt;/span&gt;
          &lt;span&gt;{{message.timestamp}}&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="sendMessage"&gt;
        &lt;form ng-submit='sendMessage(messageText)' name='messageForm'&gt;
          &lt;input type='text' name='message' ng-model='messageText' required/&gt;
          &lt;input ng-disabled='!messageForm.$valid' type='submit' value='send'/&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="col-md-4 friendRequestsWindow"&gt;
      &lt;div class="friendRequests"&gt;
        &lt;ul&gt;
          &lt;li ng-repeat='friend in friendRequests track by $index'&gt;
            &lt;span&gt;New friend Request from: {{friend}}&lt;/span&gt;
            &lt;button ng-click='acceptFriendRequest(friend)'&gt;Accept&lt;/button&gt;
            &lt;button ng-click='ignoreFriendRequest(friend)'&gt;Ignore&lt;/button&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;div class="acceptedFriendRequests"&gt;
        &lt;ul&gt;
          &lt;li ng-repeat='friend in acceptedfriendRequests track by $index'&gt;
            &lt;span&gt;{{friend}} accepted your friend request&lt;/span&gt;
            &lt;button ng-click='acknowledgeFriendRequest($index)'&gt;Acknowledge&lt;/button&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>