<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="container py-5"> <div class="row"> <div class="col-lg-6"> <div class="row"> <div class="col-12"> <h3>Project Type*</h3> </div> </div> <ul> <li> <input type="radio" id="new-Website" name="ProjectType"> <label for="new-Website">New Website</label> <div class="check"></div> </li> <li> <input type="radio" id="wr-wcs" name="ProjectType"> <label for="wr-wcs">Website Redesign</label> <div class="check"></div> </li> <li> <input type="radio" id="g-wcs" value="Graphic Design & Branding" name="ProjectType"> <label for="g-wcs">Graphic Design & Branding</label> <div class="check"></div> </li> <li> <input type="radio" id="e-wcs" value="E-Commerce" name="ProjectType"> <label for="e-wcs">E-Commerce</label> <div class="check"></div> </li> <li> <input type="radio" id="wm-wcs" value="Website Maintenance" name="ProjectType"> <label for="wm-wcs">Website Maintenance</label> <div class="check"></div> </li> </ul> </div> <div class="col-lg-6"> <div class="row"> <div class="col-12"> <h3>Project Budget*</h3> </div> </div> <ul> <li> <input type="radio" id="pb-wcs" name="ProjectBudget"> <label for="pb-wcs">$1000 to $1500</label> <div class="check"></div> </li> <li> <input type="radio" id="pb0-wcs" name="ProjectBudget"> <label for="pb0-wcs">$1500 to $2000</label> <div class="check"></div> </li> <li> <input type="radio" id="pb1-wcs" name="ProjectBudget"> <label for="pb1-wcs">$2000 to $2500</label> <div class="check"></div> </li> <li> <input type="radio" id="pb2-wcs" name="ProjectBudget"> <label for="pb2-wcs">$2500 - $5000</label> <div class="check"></div> </li> <li> <input type="radio" id="pb3-wcs" value="$5000 - $10000" name="ProjectBudget"> <label for="pb3-wcs">$5000 - $70000</label> <div class="check"></div> </li> </ul> </div> </div> </div>

body, html{ height: auto; background: #f84034; background: -moz-linear-gradient(-45deg,#f84034 0,#f3167b 100%); background: -webkit-linear-gradient(-45deg,#f84034 0,#f3167b 100%); background: linear-gradient(135deg,#f84034 0,#f3167b 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f84034', endColorstr='#f3167b', GradientType=1); } h3{ color:#fff; padding:10px; border:5px solid #fff; margin-bottom:0; } .container ul{ border:5px solid #fff; position:relative; list-style: none; margin: 0; padding: 0; overflow: auto; } ul li{ color: #fff; display: block; position: relative; float: left; width: 100%; height: auto; border-bottom: 1px solid #fff; } ul li input[type=radio]{ position: absolute; visibility: hidden; } ul li label{ display: block; position: relative; font-weight: 300; font-size: 1.35em; padding: 15px 25px 15px 80px; margin: 10px auto; z-index: 9; cursor: pointer; -webkit-transition: all 0.25s linear; } ul li:hover label{ color: #FFFFFF; } ul li .check{ display: block; position: absolute; border: 5px solid #fff; border-radius: 50%; height: 25px; width: 25px; top: 30px; left: 20px; z-index: 5; transition: border .25s linear; -webkit-transition: border .25s linear; } ul li:hover .check { border: 3px solid #FFFFFF; } ul li .check::before { display: block; position: absolute; content: ''; border-radius: 50%; height: 15px; width: 15px; top: 2px; left: 2px; margin: auto; transition: background 0.25s linear; -webkit-transition: background 0.25s linear; } input[type=radio]:checked ~ .check { border: 3px solid #000; } input[type=radio]:checked ~ .check::before{ background: #000; } input[type=radio]:checked ~ label{ color: #000; }