Currently enhancing my Bootstrap skills and seeking assistance with a card and form alignment issue.
Struggling to properly place a form within a card. Any suggestions or insights on resolving this?
<div class="row row-content col-sm-8">
<div class="card">
<h3 class="card-header card-warning" style="width: 100%">Featured</h3>
<form class="form-group col-sm-12 row">
<div class="col col-md-3 col-sm-3">
<label><strong>Number of Guests</strong></label>
</div>
<div class="col col-md-9 col-sm-9 align-items-center">
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
</div>
<div class="col-xs-12 col-sm-3 align-items-center">
<p style="padding: 10px"></p>
<p><strong>Date and Time</strong></p>
</div>
<div class="col-sm-9 col-md-9 form-inline">
<label class="sr-only" for="inlineFormInput">Date</label>
<input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInput" placeholder="Date">
<label class="sr-only" for="inlineFormInputGroup">Time</label>
<div class="input-group mb-2 mr-sm-2 mb-sm-0">
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Time">
</div>
</div>
<div class="col-sm-3">
</div>
<div class="col col-offset">
<a class="btn btn-primary" href="#">Reserve</a>
</div>
</form>
</div>
</div>
The "Reserve" button is outside of the card, how do I make the form fit inside the card? https://i.sstatic.net/QpIqK.png
The button should also be within the card..