I'm having trouble aligning the cards using Bootstrap's row and col- classes. The first three are behaving as expected, but the fourth one isn't cooperating. Any idea why this might be happening and any solutions you can suggest?
This is the code snippet in question:
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="form">
<i class="fa fa-search"></i>
<input type="text" class="form-control form-input" placeholder="Search anything...">
<span class="left-pan"><i class="fa fa-microphone"></i></span>
</div>
</div>
<!-- Additional elements go here -->
<div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-3 col-xxl-3 boat" *ngFor="let boat of boats">
<div class="card">
<img src="/{{ boat.src }}" class="card-img-top" alt="{{ boat.name }}">
<div class="card-body">
<h5 class="card-title">{{ boat.name }}</h5>
<p class="card-text">{{ boat.description }}</p>
<p>{{ boat.city }}</p>
</div>
</div>
</div>
</div>
</div>
Here is the accompanying SCSS file:
.form {
position: relative;
}
.form .fa-search {
position: absolute;
top: 20px;
left: 20px;
color: #9ca3af;
}
/* More styles... */
.all help is greatly appreciated!</p>
.navbar-nav {
margin-left: 35%;
}
.nav-item {
padding-left: 20px;
}
If anyone has any insights or solutions, feel free to share them. Thank you!