Struggling to incorporate a progress bar into my JSP page to track order status, I'm facing issues with applying custom CSS. Despite using !important to override conflicting styles, it seems like other frameworks (such as Bootstrap) might be taking precedence over my CSS. Even after adding !important to counteract Bootstrap styles, the custom CSS still fails to take effect. I have meticulously checked the HTML and confirmed that the classes are being rendered correctly.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/common/taglib.jsp"%>
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trạng thái đơn hàng</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<style>
/* Custom CSS for step progress bar */
.order-status-container {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
}
/* Other CSS styles */
</style>
</head>
<body>
<div class="container">
<h2 class="text-center mt-5" style="padding-top: 60px;">Trạng thái đơn hàng</h2>
<!-- Order status steps -->
</div>
//library
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</body>
</html>
Despite clearing browser cache and refreshing the page multiple times, the issue persists.