I have a form - part of which is creating radio buttons to select from a group of choices called "tool_loc". The Javascript and bootstrap CSS are being loaded properly (per Chrome anyway).
Here is the snippet for the template:
{{form.tool_loc.errors}}
<label for="{{form.tool_loc.id_for_label}}">Tool Location:</label>
<div class="btn-group" data-toggle="buttons">
{% for field in form.tool_loc %}
<label class="btn btn-primary">
{{field.choice_label}}
{{field.tag}}
</label>
{% endfor %}
</div>
The end HTML result is here:
https://jsfiddle.net/6o84xLx2/2/
Issue
Once a button is clicked it doesn't stay highlighted
(as it does here: http://v4-alpha.getbootstrap.com/components/buttons/#checkbox-and-radio-buttons)
Not sure what I'm doing wrong!
Your problem is the boostrap libraries: here you can find your updated jsfiddle.
The snippet:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="btn-group" data-toggle="buttons">
<label for="id_tool_loc_0" class="btn btn-primary">---------
<input checked="checked" id="id_tool_loc_0" name="tool_loc" type="radio" value="">
</label>
<label for="id_tool_loc_1" class="btn btn-primary">T01
<input id="id_tool_loc_1" name="tool_loc" type="radio" value="1">
</label>
<label for="id_tool_loc_2" class="btn btn-primary">T02
<input id="id_tool_loc_2" name="tool_loc" type="radio" value="2">
</label>
</div>
Related
here i am trying to toogle radio button
here it is i want answer like this
i tried for this like
<label class=" btn-lg btn-primary btn-block">
<input type="radio" :id="choice.id" >Answer {{choiceKey+1}} {{ choice.choice }}
</label>
but it get all color like this
You don't necessarily need JS for this, you can do it CSS-only with the adjacent sibling selector (+). Rough example below:
input[type=radio] {
display: none;
}
input[type=radio]:not(:checked) + label {
background-color: gray;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<input type="radio" name="something" id="radio_1">
<label for="radio_1" class="btn-lg btn-primary btn-block">Answer 1</label>
<input type="radio" name="something" id="radio_2" checked>
<label for="radio_2" class="btn-lg btn-primary btn-block">Answer 2</label>
<input type="radio" name="something" id="radio_3">
<label for="radio_3" class="btn-lg btn-primary btn-block">Answer 3</label>
<input type="radio" name="something" id="radio_4">
<label for="radio_4" class="btn-lg btn-primary btn-block">Answer 4</label>
Edited. I think it's more what you're looking for.
Starting point, in the Bootstrap docs, see here. For this approach you will need jQuery.
Also note that each radio button needs the same name attribute so they all work together; when you click one, the others turn off.
$("input[type=radio]").change(function() {
// remove the background color from all labels.
$("label").removeClass("btn-primary");
// add the background only to the parent-label of the clicked button.
$(this).parent().addClass("btn-primary");
});
label {
border: 1px solid #204d74 !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary btn-block active">
<input type="radio" name="options" id="option1" checked> Radio 1 (preselected)
</label>
<label class="btn btn-block">
<input type="radio" name="options" id="option2"> Radio 2
</label>
<label class="btn btn-block">
<input type="radio" name="options" id="option3"> Radio 3
</label>
</div>
Not really sure what's going on. As I decrease the width of the browser, the columns are supposed to go to the next line, but instead, they're going over top of each other, why?
Does it have to do with the way I'm naming the column classes? There's three so I put col-4 for each of them. Why don't they go to the next line when the width of the browser gets smaller?
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" type='text/css'>
</head>
<body>
<div class="row">
<div class="col-4">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Test
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" autocomplete="off"> Test
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3" autocomplete="off"> Test
</label>
<label class="btn btn-primary">
<input class="btn-light" type="radio" name="options" id="option4" autocomplete="off"> Test
</label>
</div>
</div>
<div class="col-4">
<span class="main">Date</label>
<input id="dashboardDatePick" type="date" name="date">
</div>
<div class="col-4">
<span class="main">Date 2</label>
<input id="dashboardTimePick" type="date" name="time">
</div>
</div>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="js/main.js"></script>
</body>
</html>
Bootstrap's built in class to be used here should be:
.col-md-4
and not
.col-4
Please change all occurrences of .col-4 to .col-md-4 to get your desired result.
Edit: This will set medium screen sizes as a break point below which the div will occupy 100% of the width of the screen, hence the three divs will be stacked one below each other.
If you want them to break line you have to define from what size of screen they take other width
You set col-4 what means that all sizes of screen it sets col-4(width:33.33%)
As you said you want them to brake line that the reason you need to declare size;
for example:
col-md-4
→ from md and up it sets width:33.33% (12/4=3 => 100%:3=33.33%) and down from md (means sm and xs) it sets width:100%
Learn more here: https://getbootstrap.com/docs/4.0/layout/grid/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Test
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" autocomplete="off"> Test
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3" autocomplete="off"> Test
</label>
<label class="btn btn-primary">
<input class="btn-light" type="radio" name="options" id="option4" autocomplete="off"> Test
</label>
</div>
</div>
<div class="col-md-4">
<span class="main">Date</label>
<input id="dashboardDatePick" type="date" name="date">
</div>
<div class="col-md-4">
<span class="main">Date 2</label>
<input id="dashboardTimePick" type="date" name="time">
</div>
</div>
</div>
Note!
bootstrap 4 removed xs size whats mean col-* is from xs and up
In latest Bootstrap 4 version, col-4 stands the width is 33.33% for all device. Instead of using col-4 you can use col-lg-4 or col-md-4 for getting your desire result in responsive design.
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" type='text/css'>
</head>
<body>
<div class="row">
<div class="col-lg-4">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Test
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" autocomplete="off"> Test
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3" autocomplete="off"> Test
</label>
<label class="btn btn-primary">
<input class="btn-light" type="radio" name="options" id="option4" autocomplete="off"> Test
</label>
</div>
</div>
<div class="col-lg-4">
<span class="main">Date</label>
<input id="dashboardDatePick" type="date" name="date">
</div>
<div class="col-lg-4">
<span class="main">Date 2</label>
<input id="dashboardTimePick" type="date" name="time">
</div>
</div>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="js/main.js"></script>
</body>
</html>
i am new to web design and i am working on some projects out of a book. i have one where i am supposed to use a element and a element. in the book i read that the reset button should reset all elements to the values that they had when the page was initially loaded, but that never happens. i have also tried looking at the event listener break points in chrome dev tools for a submit event when the submit button is clicked. this also seems not to work. am i missing something here? i am going to post my html and hope that you can help me see what my mistake is.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>coffeerun</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body class="container">
<header>
<h1>CoffeeRun</h1>
</header>
<section>
<div class="panel panel-default">
<div class="panel-body">
<form data-coffee-order="form">
<div class="form-group">
<label for="coffeeOrder">Coffee Order</label>
<input class="form-control" name="coffee" value="" id="coffeeOrder">
</div>
<div class="form-group">
<label for="emailInput">Email</label>
<input class="form-control" type="email" name="emailAddress" value="" id="emailInput">
</div>
<div class="radio">
<label>
<input type="radio" name="size" value="short">
Short
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="size" value="tall" checked>
Tall
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="size" value="grande">
Grande
</label>
</div>
<div class="form-group">
<label for="flavorShot">Flavor Shot</label>
<select id="flavorShot" class="form-control" name="flavor">
<option value="">None</option>
<option value="caramel">Caramel</option>
<option value="almond">Almond</option>
<option value="mocha">Mocha</option>
</select>
</div>
<div class="form-group">
<label for="strengthLevel">Caffeine Rating</label>
<input id="strengthLevel" type="range" name="strength" value="30">
</div>
</form>
</div>
</div>
<button type="submit" class="btn btn-default">Submit</button>
<button type="reset" class="btn btn-default">Reset</button>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js" charset="utf-8"></script>
<script src="scripts/datastore.js" charset="utf-8"></script>
<script src="scripts/formHandler.js" charset="utf-8"></script>
<script src="scripts/truck.js" charset="utf-8"></script>
<script src="scripts/main.js" charset="utf-8"></script>
</body>
You should put it in the 'form' tag ;)
You have to have the inputs and buttons inside a form tag:
<form>
<section>
<div class="panel panel-default">
...
</section>
</form>
The input elements need to be contained within the <form>.
For example:
<form>
<button type="submit" class="btn btn-default">Submit</button>
<button type="reset" class="btn btn-default">Reset</button>
</form>
The reason for this is obvious when you are dealing with multiple forms. How would the submit and reset input buttons now which form they were dealing with if not contained within the form?? For Example:
<form>
...
</form>
...
<form>
...
</form>
<button type="submit" class="btn btn-default">Submit</button>
<button type="reset" class="btn btn-default">Reset</button>
The correct implementation:
<form>
<button type="submit" class="btn btn-default">Submit</button>
<button type="reset" class="btn btn-default">Reset</button>
</form>
<form>
<button type="submit" class="btn btn-default">Submit</button>
<button type="reset" class="btn btn-default">Reset</button>
</form>
I am using bootstrap 3.3.6 and I am trying to disable this type of radio btn-group. I've tried placing the disabled on both the label and input, but it doesn't seem to work. The buttons would appear as disabled but still clickable. Whenever I click the buttons, an active class will be added.
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default disabled">
<input type="radio" class="toggle" value="0" disabled="disabled">NO
</label>
<label class="btn btn-default disabled">
<input type="radio" class="toggle" value="1" disabled="disabled">YES
</label>
</div>
What am I doing wrong? Is it possible to disable the buttons?
For demo find below link of jsfiddle
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary disabled">
<input type="radio" autocomplete="off"> Radio 1 (pre-checked)
</label>
<label class="btn btn-primary active disabled">
<input type="radio" autocomplete="off"> Radio 2
</label>
<label class="btn btn-primary disabled">
<input type="radio" autocomplete="off"> Radio 3
</label>
</div>
Demo
The disabled attribute on the input will disable it, as in, you cannot change the value of the input while it's disabled. What you're seeing are the CSS stypes added by bootstrap that make it sorta look like something changed when you remove your mouse from the input.
You can prevent these styles with a little bit of jQuery:
$(".btn.disabled").mouseout(function(){
$(this).removeClass("active");
$(this).addClass("disabled");
});
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<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"/>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default disabled">
<input type="radio" class="toggle" value="0" disabled>NO
</label>
<label class="btn btn-default disabled">
<input type="radio" class="toggle" value="1" disabled>YES
</label>
</div>
My form currently contains this code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<label for="opt-0"><input type="radio" name="opt" id="opt-0" checked>Option 0</label>
<label for="opt-1"><input type="radio" name="opt" id="opt-1">Option 1</label>
<label for="opt-2"><input type="radio" name="opt" id="opt-2">Option 2</label>
Instead of showing the radio buttons as radio buttons, I'd like to make them look like regular buttons, like this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<button class="btn btn-primary">Option 0</button>
<button class="btn btn-default">Option 1</button>
<button class="btn btn-default">Option 2</button>
I have radios and I want to make them look like toggleable buttons. How am I supposed to do that with Bootstrap?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="options" id="option1"> Option 1
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"> Option 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3"> Option 3
</label>
</div>
Bootstrap 4 now offers a toggleable button group that manages the active state for you on click.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-outline-primary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Active
</label>
<label class="btn btn-outline-primary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio
</label>
<label class="btn btn-outline-primary">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio
</label>
</div>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"> Checkbox 2
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"> Checkbox 3
</label>
</div>
jsfiddle-link
getbootstrap
You could try looking at button groups, this is a goup of - well- buttons... which is toggleable like a radiobutton.
JSFiddle
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/js/bootstrap.min.js"></script>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
Hope this helps!