I am facing a challenge in aligning 3 elements using bootstrap while working with Angular 8. To include only the necessary CSS from Bootstrap (such as col-md and col classes), I have added the following to my styles array:
"styles": [
"src/styles.sass",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
In my style.sass file, I import Bootstrap like this:
@import "~bootstrap/dist/css/bootstrap.css";
Within my header component, I have structured the elements like so:
<div id="test" class="container">
<div class="row">
<div class="col-12">
<div class="col-3">
<img id="iconn" src="assets/img/iconf.png" />
</div>
<div class="col-5">
<h1 id="home">HOME</h1>
</div>
<div class="col-3 offset-2">
<img id="log" src="assets/img/logo_f.png" class="img-responsive" />
</div>
</div>
</div>
</div>
I'm encountering an issue where the two images and text are appearing in different rows instead of being in the same row. Can someone offer assistance on how to fix this?