https://i.sstatic.net/IdhlD.png
Are you struggling with changing the color of the borders around Bootstrap tabs from light gray to dark blue? You're not alone. It can be tricky to find the right class or element to style for this specific change. Here's how you can style all tab borders:
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
$('#myTable').on('click', '.clickable-row', function(event) {
$(this).addClass('active').siblings().removeClass('active');
});
</script>
</head>
<body>
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#invoice_selection">Invoice Selection</a></li>
<li><a data-toggle="tab" href="#order_summary">Order Summary</a></li>
</ul>
<div class="tab-content">
<div id="invoice_selection" class="tab-pane fade in active">
<div class="table-responsive">
<table class="table" id="myTable">
<thead>
<tr class="clickable-row">
<th>Select</th>
<th>Invoice Number</th>
<th>Due Date</th>
<th>Proce</th>
<th>Due in Days</th>
</tr>
</thead>
<tbody>
<tr class="clickable-row">
<td>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1" unchecked>
</div>
</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="order_summary" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</body>
</html>