Bootstrap grid alignment with Angular JS

Question

I have been trying my hands with Bootstrap framework.

1.In the grid alignment when we have 4 columns to work with we use the below row as per w3 schools

<div class="row">
      <div class="col-lg-3">
      </div>
      <div class="col-lg-3">
      </div>
      <div class="col-lg-3">
       </div>
      <div class="col-lg-3">
      </div>
    </div> 

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?

2. 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,

    <section class="row">


        <ul>

            <li class="col-lg-6">

                <img class="profile-image img-circle av" width="70%" src="images/Crack.png" />
                <p>Some text</p>

            </li>

            <li class="col-lg-6">

                <img class="profile-image img-circle av" width="70%" src="images/Aad.png" />
               <p>Some text</p>

            </li>

            <li class="col-lg-6">

                <img class="profile-image img-circle av" width="70%" src="images/Aa.png" />
                <p>Some text</p>

            </li>


        </ul>


    </section>

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.

Answer 1

As for your first question, there are a handful of solutions - check out this SO question for details, Five equal columns in twitter bootstrap

For the second part, I might try something like this :

 <div class="row" ng-repeat="item in placeholders">
    <div ng-class="col-md-{{12 / placeholders.length | parseInt}}">col-md- {{12 / placeholders.length | parseInt}}</div>
 </div>

Placeholders would be you JSON - so it just looks at the length and then runs a simple parseInt filter over it. This is all happening in an ng-class. The filter looks like so -

  myApp.filter('parseInt', function () {
        return function (a, b) {
            return (parseInt(a))
        }
    });

A fiddle - http://jsfiddle.net/780gku24/

It's important to note though - this is assuming you aren't going to have more than 12 items in the JSON. If this does not work for you leave me a comment!

You can add or remove an item to the data to see it in action.

Answer 2

Please try col-lg-4. it would divide columns equally.