Utilizing the Bootstrap Carousel, I include it via:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
However, this causes conflicts with my CSS. To address this issue, I import my CSS code afterwards, but Bootstrap's CSS overrides default values like margin-block-start. How can I prevent Bootstrap from overriding these default CSS properties?
(Note: Only using the Carousel)
Edit:
- Excerpt of my HTML and CSS code:
* {
-webkit-tap-highlight-color: transparent;
}
body {
height: 100vh;
/*define the height*/
width: 100vw;
/*define the width*/
margin: 0;
/*remove the margin*/
background-color: #e0e2db;
/*define background-color #e0e2db*/
display: flex;
}
... (CSS Code Continued)
<title>Beatter</title>
<link rel="shortcut icon" href="resources/favicon.ico">
</head>
...