I have implemented Bootstrap in my Angular application. The stylesheet link is included in my Index.html file as follows:
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
In addition to that, I have listed Bootstrap as a dependency in my Package.json file:
"private": true,
"dependencies": {
"@angular/animations": "^9.1.2",
"@angular/cdk": "^9.2.1",
"@angular/common": "~9.1.2",
"@angular/compiler": "~9.1.2",
"@angular/core": "~9.1.2",
"@angular/forms": "~9.1.2",
"@angular/material": "^9.2.1",
"@angular/platform-browser": "~9.1.2",
"@angular/platform-browser-dynamic": "~9.1.2",
"@angular/router": "~9.1.2",
"bootstrap": "^4.4.1",
"rxjs": "~6.5.5",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"
},
However, despite having the necessary setup, the columns are not aligning properly on the same row as expected when utilizing the following code snippet within my application:
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
I have attached a screenshot showing the current layout of my application for reference:
https://i.sstatic.net/szXFq.png
Any assistance in resolving this issue would be highly appreciated.