https://i.sstatic.net/FqwJf.png
<button type="button" class="btn btn-info">Info</button>https://i.sstatic.net/WzcIL.png
<a id="manage" class="btn btn-info" style="margin:2px;" asp-area="Identity" asp-page="/Account/Manage/Index" title="Manage">@UserManager.GetUserName(User)!</a>Greetings, I seem to be facing an issue here with the button styling using Bootstrap, specifically when using the btn-info class resulting in different outputs as shown above.
Interestingly, everything was working perfectly just a week ago. Upon revisiting my project today, I noticed a slight change in the button color.
I tried going back through previous revisions, but the button color remained consistent, appearing slightly brighter than before.
I tested the application on both Chrome and Edge browsers, yet there was no noticeable difference.
Has anyone encountered a similar experience before?
====================
(Update1 09 Jul 2021)
<link rel="stylesheet" type="text/css" href="~/css/site.css" />
<link rel="stylesheet" type="text/css" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="~/lib/datatables/DataTables-1.10.25/css/dataTables.bootstrap5.min.css" />
<script src="~/js/site.js" asp-append-version="true"></script>
<script type="text/javascript" src="~/lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="~/lib/datatables/DataTables-1.10.25/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="~/lib/datatables/DataTables-1.10.25/js/dataTables.bootstrap5.min.js"></script>
The Bootstrap version utilized is downloaded, and the script code above reflects this setup.
<button class="btn btn-outline-primary btn-sm" style="margin:3px;" data-toggle="collapse" data-target="#row_op" onclick="c => this.Collapsed = !this.Collapsed">
Detail Expand/Collapse
</button>
<div id="row_op" class="collapse">
<div class="row">
During troubleshooting yesterday, I determined that the unusual color may indicate an underlying issue with functionality. The use of data-target and collapse poses challenges currently.
What perplexes me is that even after completely removing the current version of the project and reverting to one from a month ago (five revisions prior), the abnormal color persisted along with non-functional collapsing elements.
This peculiar behavior initially suggested a browser-related complication, which prompted immediate testing on both Chrome and Edge browsers.
====================
(Update2 09 Jul 2021)
Recalling a published copy residing on my laptop for server analysis, launching it revealed nothing amiss – the colors, spacing, and collapsible features exhibited normalcy.
Subsequently transferring the entire folder to my desktop exposed ongoing Bootstrap discrepancies. Notably, both computers ran Chrome version 91.0.4472.124 indistinguishable from each other.
This confirms that the code is not faulty, unveiling further mystery as the site produces divergent outcomes on distinct devices without apparent reason.