After exploring numerous online discussions in search of a solution to my issue, I have come up short. Applying 'align-self: flex-end' to the .reveal-btn only moves the button to the right, whereas using 'margin-top: auto' has proven ineffective. Could Bootstrap be conflicting with the styles somewhere?
While Bootstrap provides the basic layout for my website, this particular section doesn't rely heavily on Bootstrap classes aside from utilizing the grid system for layout purposes. Is it possible that Bootstrap is causing some sort of style conflict?
Attached is an example of what I am aiming to achieve. Due to restrictions in the code snippet function, I couldn't include a script tag for the required bootstrap CDN links, resulting in the cards being displayed in a column layout instead of a row.
https://i.sstatic.net/yCxID.jpg
.service-card {
box-sizing: border-box;
min-width: 40%;
margin: 20px 10px;
background-color: #e0e0e0;
border: 2px solid rgba(0, 165, 227, 0);
border-radius: 5px;
transition: 0.5s;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.service-card:hover {
border: 2px solid rgba(0, 165, 227, 1);
}
.service-card-header {
border-bottom: 2px solid #00a5e3;
}
.service-card-header img {
border-radius: 5px 5px 0 0;
}
.service-card-body {
display: flex;
flex-direction: column;
padding: 10px 10px;
}
.service-card-heading {
font-size: 18px;
margin-bottom: 12px;
}
service-card-desc {
margin-bottom: 10px;
font-size: 12px;
}
.reveal-btn {
display: flex;
margin-top: auto;
border: 0;
outline: 0;
background: transparent;
overflow: hidden;
cursor: pointer;
}
(repeat of CSS code)
(repeat of HTML code)