Custom CSS Overrides Bootstrap CSS? This May be the Problem

Occasionally, conflicts can result if you use Bootstrap to style your web application and create a custom style sheet to enhance the interface. For instance, you may have encountered a problem where you have a button styled using Bootstrap, and then your custom CSS style overrides or conflicts with the bootstrap button style. What could be the problem?

One issue may come from Bootstrap’s flexibility in applying its classes to elements for which the class was not intended. For instance, if you use the Bootstrap btn class on an anchor tag (hypertext link), it will look like a button.

                <div class="card-footer">
                    <a asp-action="Edit" asp-route-id="@item.Id" class="btn btn-sm btn-success">Edit</a>
                    <a asp-action="Details" asp-route-id="@item.Id" class="btn btn-sm btn-secondary">Details</a>
                    <a asp-action="Delete" asp-route-id="@item.Id" class="btn btn-sm btn-danger" onclick="return confirm('Are you sure you want to delete this item?');">Delete</a>
                </div>

Bootstrap btn class applied to an anchor tag.

The links above look good and may be what you intended. However, if you apply a global anchor class in your custom style sheet, the problem below could result.

/* unvisited link */
a:link {
    color: dimgrey;
    text-decoration: none;
}
/* visited link */
a:visited {
    color: dimgrey;
}
/* mouse over link */
a:hover {
    color: dimgrey;
    text-decoration: underline;
}
/* selected link */
a:active {
    color: dimgrey;
}

Bootstrap btn class applied to an anchor tag with a global anchor class set in a custom style sheet.

Here, the two classes are merging and create an undesired result. 

The Conclusion

When troubleshooting clashing problems between Bootstrap and custom style sheets, look for Bootstrap classes applied to the wrong elements or elements for which the class is not necessarily intended. Then, see if your custom classes are applied to those same elements.

---