How to ensure custom css file called within WHMCS bootstrap? - html

Question

I am using a free WHMCS template and customising it to match the rest of my site. In the head.tpl file of my template i have included my additional stylesheets as per the standard procedure, and whereby the are showing in the source code, the styles are not being applied. I am guessing this is due to bootstrap being used? I have been hunting around for a while and cannot seem to pinpoint how i can include these external styles within bootstrap? Please can any one advise me how i may achieve this? Is there a file within the bootstrap framework i need to edit?
Best Regards
Donna
I have added the stylesheets into the head.tpl file in WHMCS as below:
<!-- Bootstrap -->
<link href="{$BASE_PATH_CSS}/bootstrap.min.css" rel="stylesheet">
<link href="{$BASE_PATH_CSS}/font-awesome.min.css" rel="stylesheet">
<!-- Styling -->
<link href="{$WEB_ROOT}/templates/{$template}/css/overrides.css" rel="stylesheet">
<link href="{$WEB_ROOT}/templates/{$template}/css/styles.css" rel="stylesheet">
<link href="{$WEB_ROOT}/templates/{$template}/css/style.css" rel="stylesheet" type="text/css" />
<link href="{$WEB_ROOT}/templates/{$template}/css/slicknav.css" rel="stylesheet" type="text/css" />
<link href="{$WEB_ROOT}/templates/{$template}/css/mobile.css" rel="stylesheet" type="text/css">
<!--External Stylesheets-->
<link rel="stylesheet" href="https://www.mydomain.co.uk/templates/gk_simplicity/css/small.desktop.css" media="(max-width: 1150px)">
<link rel="stylesheet" href="https://www.mydomain.co.uk/templates/gk_simplicity/css/tablet.css" media="(max-width: 1030px)">
<link rel="stylesheet" href="https://www.mydomain.co.uk/templates/gk_simplicity/css/small.tablet.css" media="(max-width: 820px)">
<link rel="stylesheet" href="https://www.mydomain.co.uk/templates/gk_simplicity/css/mobile.css" media="(max-width: 580px)">
<link rel="stylesheet" href="https://www.mydomain.co.uk/templates/gk_simplicity/css/override.css">
<link rel="stylesheet" href="https://www.mydomain.co.uk/templates/gk_simplicity/style1.css">
<!-- jQuery -->
<script src="{$BASE_PATH_JS}/jquery.min.js"></script>
<!-- Custom Styling -->
<link rel="stylesheet" href="{$WEB_ROOT}/templates/{$template}/css/custom.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
As i said they are included in the source code of the page, but the syle is not being applied?