CODEWITHSUNDEEP
angularbootstrap-4
Oscar
Oscar

Reputation: 43

Bootstrap styles (row and col) between components

I'm using Angular and Bootstrap and I have this component which outputs correctly:

<div class="container">
    <div class="row">
        <div class="col">
            <h2>Hello</h2>
        </div>
        <div class="col">
            <h2>Hello</h2>
        </div>
    </div>
</div>

Then, I create a new component which contains:

<div class="col">
    <h2>Hello</h2>
</div>

And I put in into my parent component like this:

<div class="container">
    <div class="row">
        <app-my-component></app-my-component>
        <app-my-component></app-my-component>
    </div>
</div>

And the Bootstrap styles seems not to work. It is like the col style in the app-my-component doesn't know the row of the parent component.

How can I get those styles get working properly?

Upvotes: 1

Views: 81

Answers (1)

Barnee
Barnee

Reputation: 3389

Put only the h2 in the component.
The col classes work only if their direct parent is a row.

You may try mast3rd3mon's tip:

remove the <div class="row"></div> from the parent component and put it in the new component

Upvotes: 2

Related Questions