title: Bootstrap grid alignment with Angular JS
body: <p>I have been trying my hands with Bootstrap framework. </p>
  
  <p>1.In the grid alignment when we have 4 columns to work with we use the below row as per w3 schools</p>
  
  <pre><code>&lt;div class="row"&gt;
        &lt;div class="col-lg-3"&gt;
        &lt;/div&gt;
        &lt;div class="col-lg-3"&gt;
        &lt;/div&gt;
        &lt;div class="col-lg-3"&gt;
         &lt;/div&gt;
        &lt;div class="col-lg-3"&gt;
        &lt;/div&gt;
      &lt;/div&gt; 
  </code></pre>
  
  <p>or two columns we divide the same by  col-lg-6 and col-lg-6. What if,if I have some 5 column that I want to align? What value should I set to col-lg-* in 3 coloumns?</p>
  
  <ol start="2">
  <li>Also, What if, if I have a json file where I get the data from and I create columns run time? How do I handle that scenario here? For example I use Angular js to get the data and generate some list like the one in the example below,</li>
  </ol>
  
  <p></p>
  
  <pre><code>    &lt;section class="row"&gt;
  
  
          &lt;ul&gt;
  
              &lt;li class="col-lg-6"&gt;
  
                  &lt;img class="profile-image img-circle av" width="70%" src="images/Crack.png" /&gt;
                  &lt;p&gt;Some text&lt;/p&gt;
  
              &lt;/li&gt;
  
              &lt;li class="col-lg-6"&gt;
  
                  &lt;img class="profile-image img-circle av" width="70%" src="images/Aad.png" /&gt;
                 &lt;p&gt;Some text&lt;/p&gt;
  
              &lt;/li&gt;
  
              &lt;li class="col-lg-6"&gt;
  
                  &lt;img class="profile-image img-circle av" width="70%" src="images/Aa.png" /&gt;
                  &lt;p&gt;Some text&lt;/p&gt;
  
              &lt;/li&gt;
  
  
          &lt;/ul&gt;
  
  
      &lt;/section&gt;
  </code></pre>
  
  <p>How do you think i can use ng-repeat and segregate the columns accordingly? I really hope I am clear in my question. Please help.</p>