"my Custom Radio Button with input side by side"
Bootstrap 4.0.0 Snippet by Glgcoder

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html> <body> <div class="col-md-12 row"> <div class="col-md-6"> <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></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="Website Address"> </div> </form> </div> </div> </div> </div> </body> </html>
/* The radio */ .radio { display: block; position: relative; padding-left: 30px; margin-bottom: 12px; 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: #fff ; 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); } .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; }
<p>Do you already have a domain name</p> <div class="row"> <div class="col"> <label class="radio-inline"> <input type="radio" name="optradio">Yes </label><label class="radio-inline"> <input type="radio" name="optradio">No </label><input type="text" class="form-control" placeholder="Domain Name"> </div><p>Do you already have a website </p> <div class="col"> <label class="radio-inline"> <input type="radio" name="optradio">Yes </label><label class="radio-inline"> <input type="radio" name="optradio">No <input type="text" class="form-control" placeholder="Website Address"> </div> </div>

Related: See More

Paper Kit 2 Angular
Animated Radio tab
plus minus counter input
Simple input spinner controls

Questions / Comments: