<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js" integrity="sha384-LtrjvnR4Twt/qOuYxE721u19sVFLVSA4hf/rRt6PrZTmiPltdZcI7q7PXQBYTKyf" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-12">
<h2>Bootsprap 4.1 pure CSS custom radios and checkboxes</h2>
</div>
<div class="col-6">
<div class="card mb-3">
<div class="card-header small">
<i class="far fa-dot-circle fa-fw"></i>
Direction: column
</div>
<div class="card-body">
<div class="sweetbox-group sweetbox-group-column">
<div class="sweetbox sweetbox-md">
<input type="radio" name="radio_col" id="radio_col_1" value="1" />
<label for="radio_col_1">Lorem ipsum dolor sit amet</label>
</div>
<div class="sweetbox sweetbox-md">
<input type="radio" name="radio_col" id="radio_col_2" value="2" />
<label for="radio_col_2">Consectetur adipiscing elit</label>
</div>
<div class="sweetbox sweetbox-md">
<input type="radio" name="radio_col" id="radio_col_3" value="3" />
<label for="radio_col_3">Curabitur vitae laoreet orci</label>
</div>
<div class="sweetbox sweetbox-md">
<input type="radio" name="radio_col" id="radio_col_4" checked="checked" value="4" />
