<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> <!------ Include the above in your HEAD tag ----------> <div class="form-group form-check"> <input name="postby" value="admin1" type="radio" class="form-check-input" id="exampleCheck1"> <span class="checkmark"></span> <label class="form-check-label" for="exampleCheck1">Admin 1</label> </div> <div class="form-group form-check"> <input name="postby" value="admin2" type="radio" class="form-check-input" id="exampleCheck2"> <span class="checkmark"></span> <label class="form-check-label" for="exampleCheck2">Admin 2</label> </div> <div class="form-group form-check"> <input name="postby" value="admin3" type="radio" class="form-check-input" id="exampleCheck3"> <span class="checkmark"></span> <label class="form-check-label" for="exampleCheck3">Admin 3</label> </div> <div class="form-group form-check"> <input name="postby" value="admin4" type="radio" class="form-check-input" id="exampleCheck4"> <span class="checkmark"></span> <label class="form-check-label" for="exampleCheck4">Admin 4</label> </div>

* { margin: 0px; padding: 0px; box-sizing: border-box; font-family: 'Nunito', sans-serif; } html, body { overflow-x: hidden; } body { position: relative; width: 100%; min-height: 100vh; background-position: center; background-size: cover; min-height: 100vh; display: flex; justify-content: center; align-items: center; } body::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; min-height: 100vh; height: 100%; opacity: 0.9; z-index: 0; } label { display: inline-block; margin-bottom: .5rem; font-size: 16px; color: #333; } .form-group { position: relative; } /* Change Autocomplete styles in Chrome*/ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { background-color: #fff; transition: background-color 5000s ease-in-out 0s; } /* Hide the browser's default checkbox */ input[type="radio"] { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } /* Create a custom checkbox */ .checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: none; border: 1px solid #80808075; border-radius: 3px; } /* On mouse-over, add a grey background color */ /* When the checkbox is checked, add a blue background */ input[type="radio"]:checked ~ .checkmark { background-color: #28b661; } /* Create the checkmark/indicator (hidden when not checked) */ .checkmark:after { content: ""; position: absolute; display: none; } /* Show the checkmark when checked */ input[type="radio"]:checked ~ .checkmark:after { display: block; } /* Style the checkmark/indicator */ .checkmark:after { left: 4px; top: 6px; width: 15px; height: 9px; border: solid white; border-width: 0px 0px 3px 3px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(-45deg); } /* Responsive Queries start here */ @media only screen and (max-width: 575.98px) { label { font-size: 14px; } }