I have 2 textboxes with combined width must be always 450px
The first one has dropdown menu and the second one doesnt have it
Both textboxes form input-group
The dropdown can switch between any of these 2 anytime
I want the first dropdown width to be same as first textbox width
So even if 450px is changed to 700px in future, the width of dropdown must adapt accordingly.
<!doctype html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<div class="dropdown selection-1d input-group" style="width:450px">
<input type="text" class=" form-control" data-bs-toggle="dropdown" value="All Fruits" aria-expanded="false" data-bs-auto-close="outside" readonly>
<input type="text" class=" form-control" value="All Fruits" aria-expanded="false">
<div class="dropdown-menu p-0">
<div class="list-group">
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value=""> Fruit1 </label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value=""> Fruit2 </label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value=""> Fruit3 </label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value=""> Fruit4 </label>
</div>
</div>
</div>
</body>
</html>
Here's a snippet using JS to set the width of the dropdown menu based on the data-bs-toggle sibling element.
I added a second set of drop downs with a larger width for proof of concept.
Code is commented.
// Get all dropdown menus on the page
let dropdown_menu = document.querySelectorAll('.dropdown-menu');
// foreach one
dropdown_menu.forEach(dd => {
// get the parent wrapping element
let parent = dd.parentElement;
// If that parent has the input-group class, we're in the right spot.
if (parent.classList.contains('input-group')) {
// Get the element with the data-bs-toggle attribute's width
let input_parent = parent.querySelector('[data-bs-toggle]').offsetWidth;
// set the width on the dropdown
dd.style.width = input_parent + 'px';
}
});
<!doctype html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<div class="dropdown selection-1d input-group" style="width:450px">
<input type="text" class=" form-control" data-bs-toggle="dropdown" value="All Fruits" aria-expanded="false" data-bs-auto-close="outside" readonly>
<input type="text" class=" form-control" value="All Fruits" aria-expanded="false">
<div class="dropdown-menu p-0">
<div class="list-group">
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value=""> Fruit1 </label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value=""> Fruit2 </label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value=""> Fruit3 </label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value=""> Fruit4 </label>
</div>
</div>
</div>
<div class="dropdown selection-1d input-group" style="width:700px">
<input type="text" class=" form-control" data-bs-toggle="dropdown" value="Value" aria-expanded="false" data-bs-auto-close="outside" readonly>
<input type="text" class=" form-control" value="Here is a long one" aria-expanded="false">
<div class="dropdown-menu p-0">
<div class="list-group">
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value=""> Fruit1 </label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value=""> Fruit2 </label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value=""> Fruit3 </label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value=""> Fruit4 </label>
</div>
</div>
</div>
</body>
</html>
EDIT
Using jQuery
$(document).ready(function() {
$('.dropdown-menu').each(function() {
$prev_sib_width = $(this).prevAll('[data-bs-toggle]').outerWidth();
if ($prev_sib_width) {
$(this).width($prev_sib_width);
}
});
});
<!doctype html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<div class="dropdown selection-1d input-group" style="width:450px">
<input type="text" class=" form-control" data-bs-toggle="dropdown" value="All Fruits" aria-expanded="false" data-bs-auto-close="outside" readonly>
<input type="text" class=" form-control" value="All Fruits" aria-expanded="false">
<div class="dropdown-menu p-0">
<div class="list-group">
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value=""> Fruit1 </label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value=""> Fruit2 </label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value=""> Fruit3 </label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value=""> Fruit4 </label>
</div>
</div>
</div>
<div class="dropdown selection-1d input-group" style="width:700px">
<input type="text" class=" form-control" data-bs-toggle="dropdown" value="Value" aria-expanded="false" data-bs-auto-close="outside" readonly>
<input type="text" class=" form-control" value="Here is a long one" aria-expanded="false">
<div class="dropdown-menu p-0">
<div class="list-group">
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value=""> Fruit1 </label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value=""> Fruit2 </label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value=""> Fruit3 </label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value=""> Fruit4 </label>
</div>
</div>
</div>
</body>
</html>
Related
I want to make dropdown width same as textbox width using bootstrap techniques.
NOTE: The size should be suto ajusted with respect to the width of the texbox and not relative to page width
<!doctype html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<div class="dropdown">
<input type="text" class="form-control dropdown-toggle" data-bs-toggle="dropdown" value="All Sheets" aria-expanded="false" data-bs-auto-close="outside" readonly>
<div class="dropdown-menu p-0">
<div class="list-group">
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value=""> Sheet1 </label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value=""> Sheet2 </label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value=""> Sheet3 </label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value=""> Sheet4 </label>
</div>
</div>
</div>
</body>
</html>
You can add the .w-100 class into the .dropdown-menu div.
Sizes documentation can be found on Bootstrap's webpage
<!doctype html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<div class="dropdown">
<input type="text" class="form-control dropdown-toggle" data-bs-toggle="dropdown" value="All Sheets" aria-expanded="false" data-bs-auto-close="outside" readonly>
<div class="dropdown-menu p-0 w-100">
<div class="list-group">
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value=""> Sheet1 </label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value=""> Sheet2 </label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value=""> Sheet3 </label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value=""> Sheet4 </label>
</div>
</div>
</div>
</body>
</html>
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 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>
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>
I'm struggling to set my checkboxes in the below form into 3 evenly spaced columns and centered perfectly within the form. It currently looks as below...
enter image description here
But, I want it to look like...
enter image description here
HTML:
`
<form action="/signup" method="POST">
<div class="form-group">
<input
type="text"
name="firstName"
id="first-name"
class="form-control"
placeholder="First Name"
/>
</div>
<div class="form-group">
<input
type="text"
name="surname"
id="surname"
class="form-control"
placeholder="Surname"
/>
</div>
<div class="form-group">
<input
type="email"
name="email"
id="email"
class="form-control"
placeholder="Email"
/>
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<fieldset class="form-group">
<legend>Pick your favourite 3 things</legend>
<div class="form-inline">
<label class="form-check-label">
<input class="form-check-input mr-2" type="checkbox" value="">
Option 1
</label>
</div>
<div class="form-inline">
<label class="form-check-label">
<input class="form-check-input mr-2" type="checkbox" value="">
Option 2
</label>
</div>
<div class="form-inline">
<label class="form-check-label">
<input class="form-check-input mr-2" type="checkbox" value="">
Option 3
</label>
</div>
<div class="form-inline">
<label class="form-check-label">
<input class="form-check-input mr-2" type="checkbox" value="">
Option 4
</label>
</div>
<div class="form-inline">
<label class="form-check-label">
<input class="form-check-input mr-2" type="checkbox" value="">
Option 5
</label>
</div>
<div class="form-inline">
<label class="form-check-label">
<input class="form-check-input mr-2" type="checkbox" value="">
Option 6
</label>
</div>
<div class="form-inline">
<label class="form-check-label">
<input class="form-check-input mr-2" type="checkbox" value="">
Option 7
</label>
</div>
<div class="form-inline">
<label class="form-check-label">
<input class="form-check-input mr-2" type="checkbox" value="">
Option 8
</label>
</div>
<div class="form-inline">
<label class="form-check-label">
<input class="form-check-input mr-2" type="checkbox" value="">
Option 9
</label>
</div>
</fieldset>
<button type="submit" class="btn btn-primary">Do it!</button>
</form>
...
<legend>Pick your 3 favourite things</legend>
<div class="row">
<div class="col-sm-4">
<div>
<label>
<input type="checkbox">
Option 1
</label>
</div>
<div>
<label>
<input type="checkbox">
Option 2
</label>
</div>
<div>
<label>
<input type="checkbox">
Option 3
</label>
</div>
</div>
<div class="col-sm-4">
<div>
<label>
<input type="checkbox">
Option 4
</label>
</div>
<div>
<label>
<input type="checkbox">
Option 5
</label>
</div>
<div>
<label>
<input type="checkbox">
Option 6
</label>
</div>
</div>
<div class="col-sm-4">
<div>
<label>
<input type="checkbox">
Option 7
</label>
</div>
<div>
<label>
<input type="checkbox">
Option 8
</label>
</div>
<div>
<label>
<input type="checkbox">
Option 9
</label>
</div>
</div>
</div>
See this JSFiddle: https://jsfiddle.net/bf4vtzry/1/
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>