<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <p>Do you have a domain name?</p> <div><p><form-1> <label class="radio-inline"> <input type="radio" name="optradio"> Yes </label> <label class="radio-inline"> <input type="radio" name="optradio"> No </label> </form-1></div> <div class="container"> <div class="row"> <form-2 role="form" class="col-md-6 go-right"> <div class="form-group"> <input type="text" class="form-control" placeholder="Enter domain name"> </div> </form-2> </div> </div> </div> <div class="container"> <p>Do you have a website?</p> <div><p><form-1> <label class="radio-inline"> <input type="radio" name="optradio"> Yes </label> <label class="radio-inline"> <input type="radio" name="optradio"> No </label> </form-1></div> <div class="container"> <div class="row"> <form-2 role="form" class="col-md-6 go-right"> <div class="form-group"> <input type="text" class="form-control" placeholder="Enter website address"> </div> </form-2 > </div> </div> </div>

form-1{ float:left; padding-left:20px; position: relative; margin-left: 9px; } form-2{ float:right; padding-left: 20px; position: relative; } label { margin-left: -3px; } #radio{ padding: 20px; margin-left: 30px; display: block; position: relative; margin-bottom: 12px; /* The radio */ .radio { padding-left: 30px; cursor: pointer; font-size: 20px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } /* Hide the browser's default radio button */ .radio input { position: absolute; opacity: 0; cursor: pointer; } /* Create a custom radio button */ .checkround { position: absolute; top: 6px; left: 0; height: 20px; width: 20px; background-color: #60dfe5; border-color:#f8204f; border-style:solid; border-width:2px; border-radius: 50%; } /* When the radio button is checked, add a blue background */ .radio input:checked ~ .checkround { background-color: #fff; } /* Create the indicator (the dot/circle - hidden when not checked) */ .checkround:after { content: ""; position: absolute; display: none; } /* Show the indicator (dot/circle) when checked */ .radio input:checked ~ .checkround:after { display: block; } /* Style the indicator (dot/circle) */ .radio .checkround:after { left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background:#f8204f; } /* The check */ .check { display: block; position: relative; padding-left: 25px; margin-bottom: 12px; padding-right: 15px; cursor: pointer; font-size: 18px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Hide the browser's default checkbox */ .check input { position: absolute; opacity: 0; cursor: pointer; } /* Create a custom checkbox */ .checkmark { position: absolute; top: 3px; left: 0; height: 18px; width: 18px; background-color: #fff ; border-color:#f8204f; border-style:solid; border-width:2px; } /* When the checkbox is checked, add a blue background */ .check input:checked ~ .checkmark { background-color: #fff ; } /* Create the checkmark/indicator (hidden when not checked) */ .checkmark:after { content: ""; position: absolute; display: none; } /* Show the checkmark when checked */ .check input:checked ~ .checkmark:after { display: block; } /* Style the checkmark/indicator */ .check .checkmark:after { left: 5px; top: 1px; width: 5px; height: 10px; border: solid ; border-color:#f8204f; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .text{ width: 35%; } .cust-btn{ margin-bottom: 10px; background-color: #f8204f; border-width: 2px; border-color: #f8204f; color: #fff; } .cust-btn:hover{ border-color: #f8204f; background-color: #fff; color: #f8204f; border-radius: 20px; transform-style: 2s; }