I'm trying to use the toggle feature in Bootstrap, but would like to replace the default buttons with an image. The image has text that reads "This week". The button right next to it will be an image that reads "All Time". Any ideas on how to do this?
You can see the webpage laid out here:
http://matthewtbrown.com/test/imageasbutton/
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active thisweek">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
</label>
</div>
rightcolumn .btn-group .btn .btn-primary .active .thisweek {
background-image: url(../images/callout.png);
background-color: transparent;
}
you means you want images as a radio buttons yes?
hope, this helps:
<style>
/*input[type=radio] {
display: none;
}*/
</style>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active thisweek">
<input type="radio" name="options" id="option1" autocomplete="off" checked><img src="https://placehold.it/200x200">
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" autocomplete="off"><img src="https://placehold.it/150x150">
</label>
Uncomment style to hide radio buttons graphics :)
Related
I have a btn-group which I'd like to separate while maintaining the same group. Currently, although initially the group displays as expected, once I select the button from the other side ('Exclude'), I can't deselect it - the two halves seem to be behaving as two groups.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<link href="https://bootswatch.com/3/cerulean/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-9 btn-toolbar" role="toolbar">
<div class="btn-group" data-toggle="buttons" role="group">
<label class="btn btn-warning">
<input type="radio" class="reason" name="reason" id="off" value="None" autocomplete="off"> Exclude
</label>
</div>
<div class="btn-group" data-toggle="buttons" role="group">
<label class="btn btn-default">
<input type="radio" class="reason" name="reason" id="war" value="War" autocomplete="off"> War
</label>
<label class="btn btn-default">
<input type="radio" class="reason" name="reason" id="peace" value="Peace" autocomplete="off"> Peace
</label>
<label class="btn btn-default active">
<input type="radio" class="reason" name="reason" id="both" value="Both" autocomplete="off" checked> Both
</label>
<label class="btn btn-default">
<input type="radio" class="reason" name="reason" id="total" value="Total" autocomplete="off"> Total
</label>
</div>
</div>
JSFiddle
I don't think you can separate the divs like that. I think the easiest solution is just to add a bit of margin on the "special" button:
<link href="https://bootswatch.com/3/cerulean/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<div class="col-md-9 btn-toolbar" role="toolbar">
<div class="btn-group" data-toggle="buttons" role="group">
<label class="btn btn-warning" style="margin-right: 10pt;">
<input type="radio" class="reason" name="reason" id="off" value="None" autocomplete="off">
Exclude
</label>
<label class="btn btn-default">
<input type="radio" class="reason" name="reason" id="used" value="War" autocomplete="off">
War
</label>
<label class="btn btn-default">
<input type="radio" class="reason" name="reason" id="off" value="Peace" autocomplete="off">
Peace
</label>
<label class="btn btn-default active">
<input type="radio" class="reason" name="reason" id="both" value="Both" autocomplete="off" checked>
Both
</label>
<label class="btn btn-default">
<input type="radio" class="reason" name="reason" id="total" value="Total" autocomplete="off" >
Total
</label>
</div>
</div>
The issue here is that bootstrap applies the styling to the buttons based on the active class, which is applied to the label via Javascript. So the radio buttons are actually selected and unselected correctly, it's just hidden by the styling.
Here's two ways of working around this:
Using HTML & CSS:
Combine the buttons into a single button-group with an id of custom-group and add the following css.
#custom-group label:first-child {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
margin-right: 10px;
}
#custom-group label:nth-of-type(2) {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
Similar to the answer by kabanus, this will make the single button group look like two.
Using Javascript
Leave the HTML as is and add the following javascript:
var labels = document.querySelectorAll('label');
labels.forEach(function(label) {
label.addEventListener('click',function() {
labels.forEach(function(l) {
l.classList.remove('active');
});
label.classList.add('active');
});
})
This will 'manually' remove the active class from all the buttons and just add it to the one you just clicked. Make sure to tweak the selector for the labels so it doesn't affect other code on your page.
Here's a fiddle: https://jsfiddle.net/22et5z3h/4/
My goal is to set a background color on a label whose radio is checked
label + input[type="radio"]:checked{
background-color:red;
}
<label class="btn btn-default ">
<input type="radio" data-username="" name="options" id="radioPerformer" checked>All
</label>
<label class="btn btn-default hidden" >
<input type="radio" name="options" id="radioDJ"> DJ <span id="spanDJ"></span>
</label>
<label class="btn btn-default hidden">
<input type="radio" name="options" id="radioManager"> Manager <span id="spanAdmin"></span>
</label>
I tried with:
label + input[type="radio"]:checked {
background-color:red;
}
with no sucess.
Any clue ?
try this:
input[type="radio"]:checked + label{
background-color:red;
}
<input type="radio" data-username="" name="options" id="radioPerformer" checked><label class="btn btn-default ">
All
</label>
<input type="radio" name="options" id="radioDJ"><label class="btn btn-default hidden" >
DJ <span id="spanDJ"></span>
</label>
<input type="radio" name="options" id="radioManager"><label class="btn btn-default hidden">
Manager <span id="spanAdmin"></span>
</label>
CSS selectors (at least up to level 3) can only affect things in tree order, either descendants, siblings or descendants of siblings. There is no "parent node" combinator.
Level 4 may eventually have what you need, but browsers don't implement that right now.
So to achieve what you want you will have to place the labels after their corresponding inputs and use sibling selectors to achieve your goal.
I am using the bootstrap kit for altering the style of the radio buttons along with AngularJS however I am running into an issue where colors are concerned. The problem I am facing is the following:
I found this code snippet to alter the color of the chosen (active) radio button
.btn.active, .btn:active {
background-color: #XXXXXX;
}
However, I believe due to posting the style of the active button is not being persisted. The code used for the button group is the following:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="options" id="opt_ord" ng-model="content" value="1">Ord
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="opt_int1" ng-model="content" value="2">Int (1)
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="opt_int2" ng-model="content" value="3">Int (2)
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="opt_adv1" ng-model="content" value="4">Adv (1)
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="opt_adv2" ng-model="content" value="5">Adv (2)
</label>
</div>
Any input on how I can keep the button active (even when the post occurs) would be greatly appreciated.By persisting the color I mean that the button behaves like a toggle button, "feels pressed down/stands out from the rest". Thanks!
I want to add a clickable current location button after (or in if possible) a the first input box. I'm having trouble appending it after the input box and not having a line break before the next input box. I've seen examples for input boxes but not forms.
<form class="form-inline" id="get-directions-form">
<input class="form-control" type="text" id="start">
<span class="input-group-btn"><img class="current-location-marker" src="http://imgur.com/pGM46FY.png"></span>
<label> End </label>
<input class="form-control" type="text" id="end">
<input class="btn btn-primary" id="submit-button" type='submit'></input>
</form>
How about this?
<form class="form-inline" id="get-directions-form">
<span class="textbox" style="border: 1px solid black; padding: 5px;">
<input class="form-control" type="text" id="start" style="border: none; padding-bottom: 5px;">
<img class="current-location-marker" src="http://imgur.com/pGM46FY.png" style="height: 32px;">
</span>
<label> End </label>
<input class="form-control" type="text" id="end">
<input class="btn btn-primary" id="submit-button" type='submit'></input>
</form>
I put the textbox and the image inside a span that was styled to look like a textbox.
I'm using Bootstrap 3 and I want to make two buttons work as Radio Buttons, but I can't figure out how. Here goes my code
<div class="btn-group" >
<div class="btn-group">
<button type="button" class="btn btn-default">
PERSONAL
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">
COMPANY
</button>
</div>
</div>
When I select PERSONAL, the other one is deselected (as it should), but the problem is:
None of them are active when the form is started
I can deselect both clicking out of the form
<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>
And initialize with js after:
Enable buttons via JavaScript:
$('.btn').button()
You can make one of it active adding "active" class to label - "btn btn-primary active" and "checked" to input radio.
I think that there is a better solution nowadays, according to the Bootstrap docs:
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
</div>