Upon initially installing bootstrap version "bootstrap": "^3.3.7",, everything was functioning properly, except for the inability to utilize a card component.
For example:
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Despite attempting to switch to Bootstrap 4 version "bootstrap": "4.1.1",, no changes were observed. The style configuration in my angular-cli.json includes:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
It should be noted that I am using ngx-bootstrap for popups, which is currently functional as expected. Here is an excerpt from my package.json:
{
"name": "ui",
"version": "0.0.0",
"license": "MIT",
// Other dependencies listed here...
}
In an attempt to resolve the card display issue, I added a link to Bootstrap in my index.html. Following this adjustment, the card displayed correctly, but the popup functionality ceased to work.
Bootstrap link:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
Is there anyone who can spot where I may have gone wrong in this setup?