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?

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.

For the first part - to get 3 columns you would just use col-lg-4 - it's a 12 col system so 12/4 = 3. For the second part - are you saying you don't know how many columns you have until you get the JSON? What does the JSON look like? Are you asking how to put the data in from the JSON, or how to split the columns based on how many items are in the JSON? It's not really clear. — ajmajmajma, Nov 10 '15 at 18:57
Sorry for not being clear. Edited my question now. For the first part, I want to know how can I actually handle unequal column amount? Second part, yes, how to split the columns so that it segregate accordingly based on how many items are in the JSON? — Ashwin, Nov 10 '15 at 19:04
Updated this all in an answer below. Hopefully this works for you :). — ajmajmajma, Nov 10 '15 at 19:23

score 1 · Answer 1 · edited May 23 '17 at 11:51

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.

score -1 · Answer 2 · answered Nov 10 '15 at 18:51

-1

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

answered Nov 10 '15 at 18:51

Anuj Rastogi

98
6

Bootstrap grid alignment with Angular JS

2 Answers2