Bootstrap 4 removes CSS styling for small screens? - css

Question

I have been out of the web development scene for a number of years and am getting back into it and developing a website using Bootstrap 4.
This maybe a stupid question but I have some CSS styling for checkboxes for some form elements and when reducing the screen size < 768px the styling vanishes...
Is this something fundamental to Bootstrap (although have not had this happen with any other CSS styled elements?) or am I doing something very obviously wrong?
Here are some code segments:
.question input {
position: absolute;
left: -9999px;
}
.question label {
display: block;
position: relative;
margin: 5px;
padding: 15px 30px 15px 55px;
border: 3px solid #fff;
border-radius: 20px;
color: #fff;
background-color: #005552;
white-space: pre-wrap;
cursor: pointer;
user-select: none;
transition: background-color .2s, box-shadow .2s;
}
.question label::before {
content: '';
display: block;
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
width: 32px;
border: 3px solid #fff;
border-radius: 20px;
transition: background-color .2s;
}
.question input:checked + label {
background-color: #ab576c;
}
.question input:checked + label::before {
background-color: #fff;
}
<form target="nextQuestion.php" action="post" style="margin-bottom: 0px;">
<input type="hidden" name="percentage" id="percentage">
<input type="hidden" name="currentQuestion" id="currentQuestion" value="1">
<div class="container-fluid">
<div class="row">
<div class="col-12 my-auto toxic-red-background" align="center">
<h6 class="white-text">Your Progress Through Our Questionnaire: </h6>
<div class="progress">
<div class="progress-bar-animated bg-primary" role="progressbar" style="width: 5%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 toxic-teal-background questionnaire-left-section question">
<h3>Q1: Would you use out website again?</h3>
<p> </p>
<input type="hidden" value="Question2">
<input id="yes" type="checkbox" class="QuestionnaureInput">
<label for="yes" class="QuestionnaireLabel">Yes</label>
<input id="no" type="checkbox" class="QuestionnaureInput">
<label for="no" class="QuestionnaireLabel">No</label>
<input id="maybe" type="checkbox" class="QuestionnaureInput">
<label for="maybe" class="QuestionnaireLabel">Maybe</label>
</div>
</div>
<div class="row">
<div class="col-sm-12 clearfix">
<button class="btn btn-primary mb-2 float-left">Prev</button>
<button type="submit" class="btn btn-primary mb-2 float-right">Next</button>
</div>
</div>
</div>
</form>
Here are some screen grabs to illustrate what is happening:
On larger screen - All OK
Screen resized to < 768px and styling is removed
Any suggestions, answers or guidance gratefully received as I am pulling my hair out!!
Thanks in Advance!