Hiding Display of the actual radio button using Bootstrap - html

Question

I am trying to get on a form displayed using a modal class.
this radio toggle button output:
However, I am ending up getting instead where the radio button is displayed on the top and the alignment gets disturbed.
This undesirable output:
Here is my code:
<div class = "modal-body">
<form>
<div class = "row form-group">
<label class = "col-sm-2 form-check-label" for = "guestoptions"> Number of Guests</label>
<div class="form-check form-check-inline ">
<input class="form-check-input ml-3" type="radio" name="guestoptions" id="guest1" value="option1">
<label class="form-check-label" for="guest1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="guestoptions" id="guest2" value="option2">
<label class="form-check-label" for="guest2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="guestoptions" id="guest3" value="option3">
<label class="form-check-label" for="guest3">3</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="guestoptions" id="guest4" value="option4">
<label class="form-check-label" for="guest4">4</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="guestoptions" id="guest5" value="option5">
<label class="form-check-label" for="guest5">5</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="guestoptions" id="guest6" value="option6">
<label class="form-check-label" for="guest6">6</label>
</div>
</div>
<div class = "row form-group">
<label class = "col-sm-2 form-check-label" for = "section">Section</label>
<input type="radio" class="btn-check" name="section" id="option1" autocomplete="off" checked>
<label class="btn btn-success" for="option1">Non-smoking</label>
<input type="radio" class="btn-check" name="section" id="option2" autocomplete="off">
<label class="btn btn-danger" for="option2">Smoking</label>
</div>
<div class=" row form-group">
<label class = "col-sm-2" for="dateandtime">Date and Time</label>
<div class = "col"><input type="date" class="form-control" id="dateandtime" name = "Date" placeholder="Enter Date"></div>
<div class = "col"><input type="time" class="form-control" id="dateandtime" name = "Time" placeholder="Enter Time"></div>
</div>
<button class = "btn btn-secondary offset-sm-2" style = "position: relative" data-dismiss="modal">Cancel</button>
<button class = "btn btn-primary offset-sm-2 " style = "position: relative">Reserve</button>
</form>

Answer 1

Bootstrap v4
You can add data-toggle="buttons" to a .btn-group element and add .btn-group-toggle to style the radio inputs. Check the docs for more information.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-outline-success active">
<input
type="radio"
class="btn-check"
name="section"
id="option1"
autocomplete="off"
checked
/>
Non-smoking
</label>
<label class="btn btn-outline-danger">
<input
type="radio"
class="btn-check"
name="section"
id="option2"
autocomplete="off"
/>
Smoking
</label>
</div>
Bootstrap v5
You can use radio button groups.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group" role="group" aria-label="section preference">
<input
type="radio"
class="btn-check"
name="section"
id="option1"
autocomplete="off"
checked
/>
<label class="btn btn-outline-success" for="option1">
Non-smoking
</label>
<input
type="radio"
class="btn-check"
name="section"
id="option2"
autocomplete="off"
/>
<label class="btn btn-outline-danger" for="option2">
Smoking
</label>
</div>