I am trying to display 3 divs (a radio button, a button group and a select) inside a form on the same line and in that order, but I still keep failing.
I have tried this solution but didn't helped me. I really don't know if this is a common problem or I am missing something.
PICTURE
HTML
<form>
<div class="form-group row">
<div class="col-sm-2">
<label for="f-option1">
<input onClick="doSomething()" type="radio" id="f-option1" name="selector" checked>
My radio button</label>
</div>
<div class="btn-toolbar">
<label for="inputEmail3" class="col-sm-1 control-label">My group button:</label>
<div class="col-sm-2 btn-group" data-toggle="buttons">
<label class="btn btn-default"><input type="radio" name="options" id="option5">10</label>
<label class="btn btn-default"><input type="radio" name="options" id="option6">30</label>
<label class="btn btn-default"><input type="radio" name="options" id="option7">60</label>
<label class="btn btn-default"><input type="radio" name="options" id="option8">90</label>
</div>
</div>
<label for="inputEmail2" class="col-sm-1 col-form-label">My select:</label>
<div class="col-sm-2">
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
</select>
</div>
</div>
</form>
Try This.
<div class="form-group row">
<div class="col-sm-2">
<label for="f-option1">
<input onclick="doSomething()" type="radio" id="f-option1" name="selector" checked="">
My radio button</label>
</div>
<div class="btn-toolbar" "="">
<label for="inputEmail3" class="col-sm-1 control-label">My group button:</label>
<div class="col-sm-2 btn-group" data-toggle="buttons">
<label class="btn btn-default"><input type="radio" name="options" id="option5">10</label>
<label class="btn btn-default"><input type="radio" name="options" id="option6">30</label>
<label class="btn btn-default"><input type="radio" name="options" id="option7">60</label>
<label class="btn btn-default"><input type="radio" name="options" id="option8">90</label>
</div>
<label for="inputEmail2" class="col-sm-1 col-form-label">My select:</label>
<div class="col-sm-2">
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
</select>
</div>
</div>
</div>
Here is one variant of solution. You need just do inline label and dropdown list. Open full page to see result.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<form>
<div class="col-lg-4">
<label for="f-option1">
<input onClick="doSomething()" type="radio" id="f-option1" name="selector" checked>My radio button
</label>
</div>
<div class="col-lg-4">
<div class="input-group">
<label for="inputEmail3" class="control-label">My group button:</label>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="options" id="option5">10</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option6">30</label>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="input-group">
<label for="inputEmail2" class="control-label">My select:</label>
<select class="form-control" id="inputEmail2">
<option>1</option>
<option>2</option>
</select>
</div>
</div>
</form>
</div>
</div>
Related
How can I align the Section and Date and Time to be below the Number of Guests? And how can I move the buttons to be below the Date and Time text fields?
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div id="reserveTable" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg" role="content">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Reserve a Table </h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form>
<div class="form-row">
<legend class="col-form-label col-12 col-md-4">Number of Guests</legend>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="numberGuests" id="guests1" value="1">
<label class="form-check-label" for="guests1">1 </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="numberGuests" id="guests2" value="2">
<label class="form-check-label" for="guests2">2 </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="numberGuests" id="guests3" value="3">
<label class="form-check-label" for="guests3">3 </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="numberGuests" id="guests4" value="4">
<label class="form-check-label" for="guests4">4 </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="numberGuests" id="guests5" value="5">
<label class="form-check-label" for="guests5">5 </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="numberGuests" id="guests6" value="6">
<label class="form-check-label" for="guests6">6 </label>
</div>
</div>
</div>
<div class="form-row">
<legend class="col-form-label col-12 col-md-4">Section</legend>
<div class="form-check form-check-inline">
<input type="radio" class="btn-check" name="options-outlined" id="success-outlined" autocomplete="off" checked>
<label class="btn btn-outline-success" for="success-outlined">Non-Smoking</label>
<input type="radio" class="btn-check" name="options-outlined" id="danger-outlined" autocomplete="off">
<label class="btn btn-outline-danger" for="danger-outlined">Smoking</label>
</div>
</div>
<div class="form-row">
<legend class="col-form-label col-12 col-md-4">Date and Time</legend>
<div class="form-check form-check-inline">
<div class="col-4 col-md-3">
<input class="form-control" type="datetext" placeholder="Date" id="reservationDate">
</div>
<div class="col-4 col-md-3">
<input class="form-control" type="timetext" value="Time" id="reservationTime">
</div>
</div>
</div>
<div class="form-row">
<button type="button" class="btn btn-secondary btn-sm ml-auto" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary btn-sm ml-1">Reserve</button>
</div>
</form>
</div>
</form>
</div>
</div>
</div>
</div>
Here is one way you could handle a bootstrap 4 form within a modal.
It sometimes works to convert the div.modal-content to a form.modal-content element so you can utilise bootstraps modal child .modal-header, .modal-body and .modal-footer framework div elements.
There is no html 5 validation markup rules against this method (I think)... the output result is much cooler than oppose to writing the form purely inside the .modal-body div.
As long as you can handle the validation OK this way then worth playing around with this.
I have included html comments on the key opening and closing points, see comments in working demo below...
Here is fiddle version too... https://jsfiddle.net/joshmoto/2svz7u5o/
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#reserveTable">
Launch reserve table modal
</button>
<div id="reserveTable" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg" role="content">
<!-- convert modal-content div into form element -->
<form class="modal-content">
<!-- then our modal-header div -->
<div class="modal-header">
<h4 class="modal-title">Reserve a Table </h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- then our modal-body div -->
<div class="modal-body">
<!-- then our number of guests form-group -->
<div class="form-group">
<label>Number of Guests</label>
<div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="numberGuests" id="guests1" value="1">
<label class="form-check-label" for="guests1">1 </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="numberGuests" id="guests2" value="2">
<label class="form-check-label" for="guests2">2 </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="numberGuests" id="guests3" value="3">
<label class="form-check-label" for="guests3">3 </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="numberGuests" id="guests4" value="4">
<label class="form-check-label" for="guests4">4 </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="numberGuests" id="guests5" value="5">
<label class="form-check-label" for="guests5">5 </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="numberGuests" id="guests6" value="6">
<label class="form-check-label" for="guests6">6 </label>
</div>
</div>
</div>
<!-- then our section form-group -->
<div class="form-group">
<label>Section</label>
<div class="btn-toolbar">
<div class="btn-group btn-group-toggle btn-block" data-toggle="buttons">
<label class="btn btn-outline-success w-50">
<input type="radio" name="tableSection"> Non-Smoking
</label>
<label class="btn btn-outline-danger w-50">
<input type="radio" name="tableSection"> Smoking
</label>
</div>
</div>
</div>
<!-- then our date and time form-group -->
<div class="form-group">
<!-- form-row div for tighter gutters with multi column form fields -->
<div class="form-row">
<!-- mobile first full width then 50% on sm col width -->
<div class="col-12 col-sm-6 mb-3 mb-sm-0">
<label for="reservationDate">Date</label>
<input class="form-control" type="date" value="" id="reservationDate">
</div>
<!-- mobile first full width then 50% on sm col width -->
<div class="col-12 col-sm-6">
<label for="reservationTime">Time</label>
<input class="form-control" type="time" value="" id="reservationTime">
</div>
</div>
</div>
<!-- closing modal-body div elem -->
</div>
<!-- then our modal-footer div containing the dismiss and submit buttons -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary ml-auto" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary ml-1">Reserve</button>
</div>
<!-- closing form element for our modal-content div -->
</form>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.min.js"></script>
In response to your last comment, IDE recommendations from me is a biased one because I have only used one in the last 8 years or more, and that is PhpStorm. It all depends on what language you are working with, I predominately use PHP so this is my IDE of choice.
I cant speak for Visual Studio or version of VS you use, tho surprising no flags (warnings, errors, etc) appear in your editor. You should not have to find an option for this, it should make you aware of any invalid html markup as you work..
..one would hope 🙏
I want to redirect to the online payment page or wallet payment page by selecting the radio button and then clicking Buy Now Button. the form will also submit when I click the buy now button.
<form name="game-form" action="submit" method="POST">
#csrf
<div class="timeline-wrapper">
<ul class="StepProgress">
<li class="StepProgress-item is-done">
<div class="bold time">STEP 1</div>
<div class="bold"><h5>Account Login</h5></div>
<div class="form-group account-type">
<select class="form-control " style="width: 100%">
<option>Default select</option>
<option value="">Gmail</option>
<option value="">Facebook</option>
</select>
<label for="exampleInputEmail1">Email Address / Facebook Number</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email/number">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
</li>
<li class="StepProgress-item is-done">
<div class="bold time">Step 2</div>
<div class="bold">
<h5>Select Recharge</h5>
</div>
<div class="form-group recharge-type">
#foreach ($games as $row)
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
<div class="btn-inner">
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio1">Weekly <sup>BDT {{$row['g1']}}</sup> </label>
</div>
<div class="btn-inner">
<input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio2">Monthly <sup>BDT {{$row['g2']}}</sup></label>
</div>
<div class="btn-inner">
<input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio3">100 Diamond <sup>BDT {{$row['g3']}}</sup></label>
</div>
<div class="btn-inner">
<input type="radio" class="btn-check" name="btnradio" id="btnradio4" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio4">200 Diamond <sup>BDT {{$row['g4']}}</sup></label>
</div>
<div class="btn-inner">
<input type="radio" class="btn-check" name="btnradio" id="btnradio5" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio5">310 Diamond <sup>BDT {{$row['g5']}}</sup> </label>
</div>
<div class="btn-inner">
<input type="radio" class="btn-check" name="btnradio" id="btnradio6" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio6">520 Diamond <sup>BDT {{$row['g6']}}</sup></label>
</div>
<div class="btn-inner">
<input type="radio" class="btn-check" name="btnradio" id="btnradio7" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio7">620 Diamond <sup>BDT {{$row['g7']}}</sup></label>
</div>
<div class="btn-inner">
<input type="radio" class="btn-check" name="btnradio" id="btnradio8" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio8">830 Diamond <sup>BDT {{$row['g8']}}</sup></label>
</div>
<div class="btn-inner">
<input type="radio" class="btn-check" name="btnradio" id="btnradio9" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio9">1060 Diamond <sup>BDT {{$row['g9']}}</sup></label>
</div>
<div class="btn-inner">
<input type="radio" class="btn-check" name="btnradio" id="btnradio10" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio10">2180 Diamond <sup>BDT {{$row['g10']}}</sup></label>
</div>
<div class="btn-inner">
<input type="radio" class="btn-check" name="btnradio" id="btnradio11" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio11">5600 Diamond <sup>BDT {{$row['g11']}}</sup></label>
</div>
<div class="btn-inner">
<input type="radio" class="btn-check" name="btnradio" id="btnradio12" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio12">$0.99 Aidrop <sup>BDT {{$row['g12']}}</sup></label>
</div>
<div class="btn-inner">
<input type="radio" class="btn-check" name="btnradio" id="btnradio13" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio13">$1.99 Airdrop <sup>BDT {{$row['g13']}}</sup></label>
</div>
<div class="btn-inner">
<input type="radio" class="btn-check" name="btnradio" id="btnradio14" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio14">$2.99 Airdrop <sup>BDT {{$row['g14']}}</sup></label>
</div>
<div class="btn-inner">
<input type="radio" class="btn-check" name="btnradio" id="btnradio15" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio15">Level Up Pass <sup>BDT {{$row['g15']}}</sup></label>
</div>
<div class="btn-inner">
<input type="radio" class="btn-check" name="btnradio" id="btnradio16" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio16">Bundle Pass <sup>BDT {{$row['g16']}}</sup></label>
</div>
#endforeach
</div>
</div>
</li>
<li class="StepProgress-item is-done">
<div class="bold time">Step 3</div>
<div class="bold">
<h5>Payment Methods</h5>
</div>
<div class="form-group payment-type">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<i class="fas fa-wallet fa-3x"></i>
<label class="form-check-label" for="inlineRadio1">GAMERSHOBBD</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<i class="fas fa-money-check-alt fa-3x"></i>
<label class="form-check-label" for="inlineRadio2">OtherPayment</label>
</div>
</div>
</li>
</ul>
</div>
<div class="buy-btn">
<button id="top-account-submit" type="submit" class="btn btn-primary btn-lg">Buy Now</button>
</div>
</form>
This is an order page, where people will fillup the form then select the product then select the payment type.
This page will take data to the database then show those data to the next page, which will be wallet payment or online payment. I am new to Laravel. it will very helpful if anyone can give the solution.
You can do with inline js as :
<select class="form-control " style="width: 100%" onchange="this.form.submit()">
...
</select>
Or with JQuery :
$('form select').on('change', function(){
$(this).closest('form').submit();
});
I have long web form to collect data, I am sharing example but actual form may be even long.
I need to know how can i print the form data in the similar format as user sees it, Simply as if user filled the PDF form and Printed it same so that printed version look as he sees it.
Code pen link https://codepen.io/anon/pen/ewYrwv
I am not sure how to make it work with A4 Page as if data was being printed from PDF form. It doesnt need to be responsive as form will be printed from desktop only..
I put container with at 800 pixel and it still prints out side of page margin.
I tried to play around with CSS http://www.tutorialspoint.com/css/css_paged_media.htm
but this doesnt make help much
.container{max-width:800px;}
#page {
size: 8.5in 11in; /* width height */
margin: 2cm; /* All margins set to 2cm */
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<form>
<div class="form-row">
<h1 class="text-center">Form</h1>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">First Name</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="First Name">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Last Name</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="Last Name">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Email</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Email">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Password</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="Password">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Mobile</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Mobile">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Landline</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="Landline">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Start Date</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Start Date">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">End Date</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="End Date">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputPassword4">Time</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="Time">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Venue</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputPassword4">Trainer</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Court</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">
Recurring
</label>
</div>
</div>
<div class="form-group">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="1" disabled>
<label class="form-check-label" for="inlineCheckbox1">Sun</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="2" disabled>
<label class="form-check-label" for="inlineCheckbox2">Mon</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="3" disabled>
<label class="form-check-label" for="inlineCheckbox3">Tue</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="4" disabled>
<label class="form-check-label" for="inlineCheckbox3">Wed</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="5" disabled>
<label class="form-check-label" for="inlineCheckbox3">Thu</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="6" disabled>
<label class="form-check-label" for="inlineCheckbox3">Fri</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="7" disabled>
<label class="form-check-label" for="inlineCheckbox3">Sat</label>
</div>
</div>
<div class="form-group">
<label for="inputAddress">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<label for="inputAddress2">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="form-group col-md-4">
<label for="inputState">State</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="inputZip">Zip</label>
<input type="text" class="form-control" id="inputZip">
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">
Check me out
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Save</button> <button type="submit" class="btn btn-primary">PRINT</button>
</form>
</div>
I have a div which is "col-xs-8 col-xs-offset 2" that centers a form in the middle of the screen. Within this form I have two text areas and 4 radio buttons with corresponding text inputs for each. My problem is that while the text areas span the width of the container and resize appropriately when the window is resized, the inputs beside the radio button remain the same size until the browser is resized below their original length at which point they resize smaller. I would like these radio button text inputs to span in the same manner that the text areas do.
I hope this is clear enough.
<link rel="stylesheet" href="style.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<body class="container-fluid">
<div class="row">
<ol class="breadcrumb">
<li><span class="glyphicon glyphicon-home"</span></li>
<li>Create Quiz</li>
</ol>
<form method ="POST">
<div class="col-xs-8 col-xs-offset-2">
<fieldset class="form-group">
<legend class="text-center">
<label for="quiz_title" >Quiz Title:
</label>
</legend>
<div class="form-group">
<label for="question_text">Question</label>
<textarea class="form-control" id="explanation_text" rows="2"></textarea>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" name="answer" id="option1" value="radio_option1" required="required">
<label for="option1" class="form-check-label"> Answers: <a><span class="glyphicon glyphicon-pencil"></span></a>
<input class="form-control" type="text" id="option1" required="required">
</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" name="answer" id="option2" value="radio_option2" >
<label for="option2" class="form-check-label">
<input class="form-control" type="text" id="option2" required="required">
</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" name="answer" id="option3" value="radio_option3">
<label for="option3" class="form-check-label">
<input class="form-control" type="text" id="option3" required="required">
</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" name="answer" id="option4" value="radio_option4">
<label for="option4" class="form-check-label">
<input class="form-control" type="text" maxlength="5" id="option4" required="required">
</label>
</div>
<div class="form-group">
<label for="explanation_text">Explanation</label>
<textarea class="form-control" id="explanation_text" rows="2" placeholder="Optional..."></textarea>
</div>
</fieldset>
</div>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-6">
<button type="submit" class="btn btn-primary center-block pull-right" name="question_submit"> Save Question </button>
</div>
<div class="col-xs-6">
<button type="submit" class="btn btn-primary center-block pull-left" name="quiz_submit"> Save Quiz </button>
</div>
</div>
</div>
</form>
</div>
</body>
Resizing Process:
Bootstrap has something called "Input Groups" that you might want to try. You can put the radio button next to a text input in an input group and the text input will fill up the remaining space. Look at some examples here: https://getbootstrap.com/components/#input-groups-checkboxes-radios
Here is something I put together using your code. Click on "Run code snippet" and then click "Full page" to see it in full page mode. Then you can resize the window to see how it will scale.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<ol class="breadcrumb">
<li><span class="glyphicon glyphicon-home"</span></li>
<li>Create Quiz</li>
</ol>
<form method ="POST">
<div class="col-xs-8 col-xs-offset-2">
<fieldset class="form-group">
<legend class="text-center">
<label for="quiz_title">Quiz Title:</label>
</legend>
<div class="form-group">
<label for="question_text">Question</label>
<textarea class="form-control" id="explanation_text" rows="2"></textarea>
</div>
<label for="option1">Answers: <a><span class="glyphicon glyphicon-pencil"></span></a></label>
<div class="input-group" style="margin-bottom:10px;">
<span class="input-group-addon">
<input type="radio" name="answer" id="option1" value="radio_option1" required="required">
</span>
<input type="text" class="form-control" id="option1" required="required">
</div>
<div class="input-group" style="margin-bottom:10px;">
<span class="input-group-addon">
<input type="radio" name="answer" id="option2" value="radio_option2" required="required">
</span>
<input type="text" class="form-control" id="option2" required="required">
</div>
<div class="input-group" style="margin-bottom:10px;">
<span class="input-group-addon">
<input type="radio" name="answer" id="option3" value="radio_option3" required="required">
</span>
<input type="text" class="form-control" id="option3" required="required">
</div>
<div class="input-group" style="margin-bottom:10px;">
<span class="input-group-addon">
<input type="radio" name="answer" id="option4" value="radio_option4" required="required">
</span>
<input type="text" class="form-control" id="option4" required="required">
</div>
<div class="form-group">
<label for="explanation_text">Explanation</label>
<textarea class="form-control" id="explanation_text" rows="2" placeholder="Optional..."></textarea>
</div>
</fieldset>
</div>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-6">
<button type="submit" class="btn btn-primary center-block pull-right" name="question_submit"> Save Question </button>
</div>
<div class="col-xs-6">
<button type="submit" class="btn btn-primary center-block pull-left" name="quiz_submit"> Save Quiz </button>
</div>
</div>
</div>
</form>
</div>
</div>
I am using bootstrap btn-group class for radio buttons.They are not working on live server.My site is under development example.com .Although they work on a separate html page.
<div class="row">
<section class="col-lg-2 col-xs-3">
<label>Gender:</label></section>
<section class="col-lg-4 col-xs-8">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary control-label input-group">
<input type="radio" name="gender" id="option2" autocomplete="off" value="male">Male
</label>
<label class="btn btn-primary ">
<input type="radio" name="gender" id="option3" autocomplete="off" value="female" checked> Female
</label>
</div>
</section>
</div>
$(document).ready(function(){
$('.gender').on('click', function() {
$('.checked').removeClass('checked');
$(this).addClass('checked');
});
});
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.checked {
background-color: #286090;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<section class="col-lg-2 col-xs-3">
<label>Gender:</label>
</section>
<section class="col-lg-4 col-xs-8">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary control-label input-group gender">
<input type="radio" name="gender" id="option2" autocomplete="off" value="male">Male
</label>
<label class="btn btn-primary gender">
<input type="radio" name="gender" id="option3" autocomplete="off" value="female" checked> Female
</label>
</div>
</section>
</div>
.btn > input[type="radio"] {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
<section class="col-lg-2 col-xs-3">
<label>Gender:</label></section>
<section class="col-lg-4 col-xs-8">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary control-label input-group">
<input type="radio" name="gender" id="option2" autocomplete="off" value="male">Male
</label>
<label class="btn btn-primary ">
<input type="radio" name="gender" id="option3" autocomplete="off" value="female" checked> Female
</label>
</div>
</section>
</div>
Add
.btn > input[type="radio"] {
display: none;
}
in your css