I've been attempting to achieve a specific design using bootstrap and html, but I've hit a roadblock. No matter what I try, the design doesn't seem to work. Here's the code I've been working with. Can you please offer some guidance? I initially attempted with bootstrap, but then switched to HTML and CSS:
body {
font-size:1.5em;
color: #2b2b2b;
background:white;
}
.label-check input { display:none; }
.label-check label::before {
width: 1.4em;
text-align: center;
display: inline-block;
cursor: pointer;
color: black;
transition: color .3s ease;
text-shadow: 0px 0px 1px #cccccc;
}
.label-check label:hover::before {
text-shadow: 0px 0px 1px #6286d0;
}
.label-check [type='checkbox']:checked + label::before,
.label-check [type='radio']:checked + label::before{
color: #056dce;
}<div class="label-check">
<p class="m3">File Type</p>
<div>
<input type="checkbox" name="checkGrp1" id="check1_Opt1">
<label for="check1_Opt1">jpg</label>
<label for="check1_Opt1">2</label>
</div>
<div>
<input type="checkbox" name="checkGrp1" id="check1_Opt2" checked>
<label for="check1_Opt2">pdf</label>
<label for="check1_Opt1">4</label>
</div>
<div>
<input type="checkbox" name="checkGrp1" id="check1_Opt2" checked>
<label for="check1_Opt2">mp4</label>
<label for="check1_Opt1">6</label>
</div>
</div>
<hr>
<p class="m3">Orientation</p>
Horizontal ⧈ <br/>
Vertical ⧈ <br/>
Square ⧈ <br/>
<br/>