Bootstrap Grid System not working in Angular (Solved)

Okay, let’s get straight to the point. I made a course on Angular, and I have more than a thousand students enrolled in it, and most of them have faced the issue “Bootstrap Grid System not working in Angular“. Well here’s a simple solution for this.

Let’s assume you have a Angular component app.component.html and inside that you have a sub component, that looks like this:

<div class="row justify-content-center">
    <app-new-comp></app-new-comp>
    <app-new-comp></app-new-comp>
    <app-new-comp></app-new-comp>
</div>
<router-outlet></router-outlet>

And, your app-new-comp.component.html looks like this:

<div class="col-md-4">
    <div class="card mb-3">
        <div class="card-body">
            <h4>Sample Heading</h4>
            <p>Some paragraph for example</p>
        </div>
        <div class="card-footer">
            <a href="#" class="btn btn-sm btn-success">Click here</a>
        </div>
    </div>
</div>

The output you are getting on the browser looks like this:

Now, what you want is to Fix the Grid system, so that it will show up in row format as it is supposed to. Let’s try fixing this.

The first thing we have to do is, modify your existing app.component.html to this:

<div class="row justify-content-center">
    <app-new-comp class="col-md-4"></app-new-comp>
    <app-new-comp class="col-md-4"></app-new-comp>
    <app-new-comp class="col-md-4"></app-new-comp>
</div>
<router-outlet></router-outlet>

Then we need to head back to the new-comp.component.html and remove the div tags, that are wrapping the card. Then make them just simple card. Like this:

<div class="card mb-3">
    <div class="card-body">
        <h4>Sample Heading</h4>
        <p>Some paragraph for example</p>
    </div>
    <div class="card-footer">
        <a href="#" class="btn btn-sm btn-success">Click here</a>
    </div>
</div>

Problem Solved. Now you can check back your project, you should be able to see something like this:

I hope this solution helped you, as it has helped me and my students. Happy coding.