Angular JS integration for optimal Bootstrap grid alignment

Recently, I have been exploring the Bootstrap framework and experimenting with grid alignment.

When working with 4 columns, W3 schools recommends using the following row setup:

<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>

For two columns, it's suggested to divide them using col-lg-6 and col-lg-6. But what if you have 5 columns to align? What values should be set for col-lg-* in a 3-column layout?

  1. Additionally, how would one handle a scenario where data is fetched from a JSON file dynamically to create columns at runtime? Consider an example like the one below that utilizes AngularJS:

    <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>

I am curious about how one could use ng-repeat to segregate columns accordingly based on dynamic JSON data. Any insights or suggestions would be greatly appreciated. Thank you for your help!

javascripthtmlcssangularjstwitter-bootstrap

Answer №1

If you're wondering about the first inquiry, there are several solutions available. Check out this Stack Overflow thread for more information: Getting five equal columns in Twitter Bootstrap

Regarding the second question, here's a potential solution:

<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>

The placeholders represent your JSON data, where the code calculates the length and applies a parseInt filter within an ng-class directive. The custom filter is defined as follows:

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

You can view a demo on JSFiddle here: http://jsfiddle.net/780gku24/

Note that this approach assumes the JSON won't exceed 12 items. If you encounter any issues or limitations, feel free to reach out!

Feel free to manipulate the data by adding or removing items to see how it operates.

Answer №2

Could you explore using the col-lg-4 class? This may help in dividing columns evenly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Scan across a lineup of pictures

I am looking to showcase a series of images in a horizontal alignment, but I want to avoid overloading the screen width. My goal is to allow users to navigate through the images using their mouse - when they move right within the image container, I want t ...

javascripthtmlcss

Select the small image to reveal the larger overlay image

I have a grid of images and I want each image to expand into fullscreen when clicked. However, the JavaScript I am using is causing only the last image in the grid to overlay. How can I resolve this issue? Here is the code I am currently using: http://js ...

javascriptjqueryhtmlcssimage

Is the routing style in Angular determined by the version being used?

Just a couple of months ago, I was using AngularJS v1.0.7. The routing was set up in the app.js file like this: angular.module('newdev', ['newdev.filters', 'newdev.services', 'newdev.directives', 'newdev.contr ...

angularjs

HTML 5 functions properly when loaded directly as a .html file, but encounters issues when hosted on either a Django or Node

I'm having trouble getting a video to play on a webpage. Initially, I followed a standard example I found online by using the following code: <video src='video.mp4' controls></video> When I open the .html file in Safari and dou ...

djangonode.jshtmlvideo

Avoiding duplicate clicks in Onsen UI Navigator.Avoid duplicate clicks in

When a user clicks on an item in my list, they are taken to a details page. However, if the user clicks too quickly, two click events may be fired, leading them to navigate to two different pages consecutively. Is there a way to prevent this issue? Can we ...

javascriptjqueryonsen-uimonaca

Display a progress bar in Bootstrap with a labeled indicator positioned above the bar and background to the

Is there a way to create a progress bar with a label positioned to the right using Bootstrap v5.2 Progress Bar? https://i.sstatic.net/gOWie.png I attempted to use negative margins to achieve this layout but faced issues when the label expanded due to lon ...

c#cssrazorprogress-barbootstrap-5

Simple steps to correct the npm installation of the React list filter

I encountered an issue while trying to install react-list-filter using npm (npm install react-list-filter). The error messages displayed in my console are as follows: npm ERR! code ETARGET npm ERR! notarget No matching version found for <a href="/cdn-c ...

javascriptnode.jsreactjsnpm

jQuery UI Drag and Drop problem with mouse positioning

I am currently working on a website that allows users to drag different "modules" (squares with information) from one location to another on the page using jQuery UI. However, I am facing an issue where when a module is dragged to a droppable zone, the sc ...

javascriptjqueryjquery-uidrag-and-drop

Using Thymeleaf to display <TR> elements according to specific conditions

Is there a cleaner way to show content only if one object is not null? No annotations found in this block of code. Here is the template: <div th:if="${currentSkills != null}"> <tr ><!-- Data File --> <td class="col_id"> ...

htmlthymeleaf

The NextJs router encountered an unknown key passed through the urlObject during the push operation

I have a Next.js/React application where I am utilizing the Next Router to include some queries in my URL. However, when using the following function, the Chrome Dev Console displays numerous warnings: const putTargetsToQueryParams = (targets: IFragrance ...

javascriptnext.jsnext-router

AngularJS: Refresh array following the addition of a new item

After saving an object, I am looking to update an array by replacing the conventional push method with a custom function. However, my attempts have not been successful so far. Are there any suggestions on how to rectify this issue? app.controller("produ ...

javascriptangularjs

Which option offers superior performance: using attributes through HTML or jQuery?

At times, I find myself needing to include special classes, divs, and attributes in my HTML code for jQuery scripts to function properly (the site's "no-JavaScript" version doesn't require these elements). You probably understand what I mean. I& ...

javascriptjqueryhtmlperformance

Navigate from the upper left corner to the lower right corner while hovering

Can you animate the movement of an element from the top-left to the bottom-right using CSS transitions like this? #example { width: 40px; height: 40px; background: red; position: absolute; top: 0; left: 0; transition: all 300ms ea ...

htmlcss

Is it appropriate for HTML5 Web Workers to utilize CORS for cross-origin requests?

As I was creating a hosted API that relies on web workers, I encountered an intriguing issue. I am looking for feedback from the community to help me with this. Even though my server has the necessary CORS headers in place to serve the worker JS files and ...

javascripthtmlcorsweb-worker

What is the best way to draw a rectangle outline in Vue.js without the need for any additional packages?

I have been attempting to craft a rectangle outline using vueJS, but so far I have not had much success. I am hoping to achieve this using only CSS, but despite my efforts, I have not been able to find a solution. My goal is to create something similar to ...

javascriptcssvue.jsbootstrap-vue

Performing condition checks within the foreach loop and displaying numerous results in a single row

I have a list of results from searching certain parameters and I need to print them out. When using a foreach loop to print the results, I want to ensure that if the purchase dates are the same, they should be printed in the same row. How can I achieve thi ...

phphtmlhtml-table

Issues encountered with java applet functionality when incorporated into an HTML document

I'm facing a simple issue with my "Hello World" applet not converting into HTML as expected. Even though I have provided the necessary code and base to upload the file, the HTML is showing an error that resembles commands from an operating system ter ...

javahtmlswingapplet

Encountering a Cypress testing issue linked to webpack. Feeling unsure about the next steps to address it

https://i.sstatic.net/z6bmW.png I encountered an error while attempting to run a test file that I created. The default tests run smoothly, but the error only occurs with the file I created. import {cypress as cy} from "cypress" describe('T ...

javascriptnpmcypress

Error in Function Due to Undefined jQuery DataTable Parameters

In the jQuery datatable column, the below JavaScript code will display either a green checkmark button or a red X button: { data: "HasPayment", render: function (data, type, row, meta) { if (data) { return '<bu ...

javascriptjqueryajaxdatatables

Adjusting the size of images to seamlessly fit within a card in Bootstrap 5 without changing the dimensions of the card

I am facing an issue with a Bootstrap 5 card split into 2 columns. First Column Second column Image1 Text Image2 Text The challenge arises because not all images are the same size, impacting the overall card size. I recently discovered a soluti ...

htmlcssbootstrap-4bootstrap-5