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>
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/
how can I control size of inputs in Metro UI Framework? Bootstrap has class form-group-sm i guess, but have MetroUI something similar ?
MetroUI isn't as fully featured as Bootstrap but it has some simple options for inputs:
<!-- Checkbox -->
<label class="input-control checkbox">
<input type="checkbox" checked>
<span class="check"></span>
<span class="caption">Checkbox</span>
</label>
<!-- Small Checkbox -->
<label class="input-control checkbox small-check">
<input type="checkbox" checked>
<span class="check"></span>
<span class="caption">Checkbox</span>
</label>
<!-- Radio button -->
<label class="input-control radio">
<input type="radio">
<span class="check"></span>
<span class="caption">Radio</span>
</label>
<!-- Small radio button -->
<label class="input-control radio small-check">
<input type="radio">
<span class="check"></span>
<span class="caption">Small radio</span>
</label>
Text boxes can be default or big:
<div class="input-control text big-input">
<input type="text">
</div>
It also provides a couple of simple options for buttons:
<button class="button">Caption</button>
<button class="button mini-button">Caption</button>
<button class="button small-button">Caption</button>
<button class="button large-button">Caption</button>
I am using a Bootstrap Template (INSPINIA), and integrating it with PHP.
All of the sample data structures use buttons, but to make these interact with the server I need to change them to a submit and wrap them in a form.
Can I best retain the original bootstrap styling of a button, but gain the functionality of a form submit without having to amend bootstraps own CSS?
Original Bootstrap code:
<div class="input-group">
<input type="text" placeholder="Add new task. " class="input input-sm form-control">
<span class="input-group-btn">
<button type="button" class="btn btn-sm btn-white"> <i class="fa fa-plus"></i> Add task</button>
</span>
</div>
What I have ended up with:
<div class="input-group">
<form action="index.php" method="post">
<span class="input-group-btn">
<input type="text" placeholder="Add new task. " name="ToDo" class="input input-sm form-control">
<input type="submit" class="btn btn-sm btn-white" value="Add Task" name="addToDo" />
</span>
</form>
</div>
The above code doesn't look the same and shows some odd behaviour on smaller devices.
You can just change the type of the button to submit, and you're good to go:
<div class="input-group">
<input type="text" placeholder="Add new task. " class="input input-sm form-control">
<span class="input-group-btn">
<button type="submit" class="btn btn-sm btn-white"> <i class="fa fa-plus"></i> Add task</button>
</span>
</div>
You have to add the form tag outside input-group to keep the styling:
<form action="index.php" method="post">
<div class="input-group">
<input type="text" placeholder="Add new task. " class="input input-sm form-control">
<span class="input-group-btn">
<button type="submit" class="btn btn-sm btn-white"> <i class="fa fa-plus"></i> Add task</button>
</span>
</div>
</form>
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'm new to ASP programming and web development.
I'm using Twitter Bootstrap 3 on a new project.
Using the above html code:
<div class="btn-group btn-group-justified" data-toggle="buttons">
<label class="btn btn-default active">
<input type="radio" name="options" id="option1">
<i class="fa fa-user"></i>.Para mim
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option2" onclick="paraEmpresa()">
<i class="fa fa-briefcase"></i>.Para minha empresa
</label>
</div>
I got a two buttons to work like radio, like these:
The question is: how can I make the same using ASP.net elements?
Note: I don't know the terms to do the proper search. RADIO BUTTONS are rounded, but I can't figure how radio button REAL buttons are called. Appreciate the help.
I think this is what you need
<div class="btn-group btn-group-justified" data-toggle="buttons">
<label class="btn btn-default active">
<asp:RadioButton id="option1" runat="server" GroupName="options"></asp:RadioButton>
<i class="fa fa-user"></i>.Para mim
</label>
<label class="btn btn-default">
<asp:RadioButton id="option2" runat="server" GroupName="options" ></asp:RadioButton>
<i class="fa fa-briefcase"></i>.Para minha empresa
</label>
</div>