Bootstrap - Not Working on Angular Child Components

Question

I am using bootstrap via cdn on my angular project, bootstrap works on parent but not works on child child component width does not become col-12

Parent component width becomes 12 however child component width seems like becomes max-content. No .css file is applied.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
    crossorigin="anonymous"></script>


//parent
<div class="col-11 d-flex flex-row" id="section">
    <app-resume-section></app-resume-section>
</div>

//child
<div class="col-12 bg-secondary" id="resume-section">
    <div class="col-12 pt-4 d-flex flex-row flex-wrap gap-1">
        <button type="button" class="btn btn-primary col-12 col-xxl-4 col-md-4">NEW RESUME</button>
    </div>
</div>

Answer 1

When using angular components to split the bootstrap code, you need to note, that the component, might not have the expected width and height in your provided code, that will be <app-resume-section></app-resume-section> to fix this, we can use the below CSS to ensure, that the component selector always takes the width and height of the parent, which might get your code working

The :host css selector will style the angular component and make it take the height and width of the parent element!

resume-section.component.css

:host {
    display: block;
    width: 100%;
    height: 100%;
}

/*

:host {
    display: flex;
    width: 100%;
    height: 100%;
}

*/