I am trying to use Bootstrap for my website. I have radio buttons and I am trying to use "Buttons" from bootstrap for the same.
<td style="margin-bottom:0px; padding-bottom: 0px;font-size=12px;vertical-align:bottom;">
<div class="btn-group" data-toggle="buttons" id="topButtonDiv" >
<button type="button" class="btn btn-primary">Home
<input type="radio" id="radio1" ></button>
<button type="button" class="btn btn-primary">Home1
<input type="radio" id="radio2" > </button>
<button type="button" class="btn btn-primary">Home2
<input type="radio" id="radio7"> </button>
</div>
</td>
The problem I am facing is that I still see the circles in the Radio button present, where as in the Bootstrap example, I see no such circles present.
http://getbootstrap.com/javascript/#buttons-usage
Can you let me know what I am missing here?
Another alternative if the css version update is not working is to manually hide the radio button using css
[type='radio'] {
display: none;
}
Check for the version of css you've added. The same btn-group class works fine here
Your markup for bootstrap radio buttons is wrong, you make it like this:
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that—be sure to include why it's great
</label>
</div>
Furthermore you can't put a input element within a button element. That's invalid html.
Related
I'd like to make bootstrap checkboxes that look like bootstrap badges, while retaining the checkbox functionality. I thought maybe I could simply style the checkbox label as a badge, but it didn't work.
<head>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css'>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js'></script>
</head>
<div class='form-check m-1' style='display:inline-block;'>
<input id='".$tagDAT[1]."' name='".$tagDAT[1]."' type='checkbox' class='form-check-input form-check-inline'>
<label class='tag form-check-label text-capitalize' for='".$tagDAT[1]."'>
<span class='badge badge-secondary'>".$tagDAT[1]."</span></label>
</div>
This code is being echoed from PHP. The checkboxes look like regular checkboxes. It's ignoring the 'badge' code. I thought maybe since it was being echoed via ajax, the bootstrap in the html page wasn't affecting the echoed code. That's why i added the 'head' tag with the bootstrap. Still didn't work.
Anybody have ideas? Or a better way of getting the same result?
Move the checkbox inside the label
Remove the nested <span>
Apply .badge .badge-secondary directly to the <label>
Apply .form-check-inline to the wrapper not the input
Click anywhere on the .badge to check/uncheck the box.
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css'>
<div class='form-check form-check-inline m-1'>
<label class='tag form-check-label text-capitalize badge badge-secondary' for='myTag'>
<input id='myTag' name='myTag' type='checkbox' class='form-check-input'>myTag
</label>
</div>
Bootstrap 5 has got Toggle Buttons
<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
<label class="btn btn-primary" for="btn-check">Single toggle</label>
<input type="checkbox" class="btn-check" id="btn-check-2" checked autocomplete="off">
<label class="btn btn-primary" for="btn-check-2">Checked</label>
Here is the code. There is a search bar where a user can put in a topic then select a button that shows different categories.
<form action="search.php" method="GET">
<i class="fas fa-search" aria-hidden="true"></i>
<input placeholder="Search" name="search" aria-label="Search">
<input type="submit" value="S" class="searchButton" name="submit-request"/>
<div class="buttons" style="text-align:center;">
<input type="button" class="spec" name="category1" value="category1">
<input type="button" class="spec" name="category2" value="category2">
<input type="button" class="spec" name="category3" value="category3">
<input type="button" class="spec" name="category4" value="category4">
<input type="button" class="spec" name="category5" value="category5">
</div>
</form>
This search form works perfectly fine with checkboxes. What should I do as an alternative? Is there a way I can style the checkboxes as buttons. If they are checkboxes how can I make it so that a user can only pick one category.
Use radio buttons.
Show name for radio with label.
To style a radio button, hide it, and add pseudo element.
<button> is it's own tag.
<button class="spec" name="category5">category5</button>
If you wanted to use CSS (you didn't tag it in your post), you can try this:
https://www.w3schools.com/css/tryit.asp?filename=trycss_form_button
<div class="navigation">
<input type="checkbox" class="navigation__checkbox" id="**navi-toggle**">
<label for="**navi-toggle**" class="navigation__button">
<span class="navigation__icon"> </span>
</label>
</div>
.navigation {
&__checkbox {
display: none;
}
&__button{
background-color: $color-white;
height: 7rem;
width: 7rem;
}
You say that you want to be able to still use checkbox as that is what functions... Well you could do so and use a label that is linked to that checkbox, and then simply style your label as your button.
I am using bootstrap 3.1.1.
I have two checkboxes and one button. What I am unable to do is have all three of them in one line - button is between check boxes. Is this possible to do without extra css classes? With pure bootstrap?
Here is example
And here is my code:
<div class="checkbox" style="display: block;"><label class="unselectable"><input id="chkAlreadyDelivered" type="checkbox" checked=""> Skrij že oddane količine</label></div>
<button class="btn btn-primary">Natisni</button>
<div class="checkbox"><label class="unselectable"><input id="chkAlreadyDelivered" type="checkbox" checked=""> Natisni artikle iz privzete ponudbe</label></div>
This should do it.
<div class="checkbox" style="display: inline-block;"><label class="unselectable"><input id="chkAlreadyDelivered" type="checkbox" checked=""> Skrij že oddane količine</label></div>
<button class="btn btn-primary" style="display: inline-block;">Natisni</button>
<div class="checkbox" style="display: inline-block;"><label class="unselectable"><input id="chkAlreadyDelivered" type="checkbox" checked=""> Natisni artikle iz privzete ponudbe</label></div>
Use grid in bootstrap.
Else use display: inline css
I have a group of radio buttons and a submit button. I wish to place them side by side, the group of radio buttons on the left, and the submit button aligned proportionately on the right. What is the right way to do this using twitter bootstrap?
Currently, no matter what I do, I am getting the button below the radio button group.
When you use form-horizontalyou can use radio-inline for the radio buttons..
<form class="form-horizontal">
<div class="form-group">
<label class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="">
Radio 1
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Radio 2
</label>
<label> </label>
<button type="submit" class="btn btn-default">Submit</button>
</div>
http://bootply.com/YEfKIS6Lqa
Assuming your radio buttons and submit button are enclosed in a form tag with proper bootstrap markup, bootstrap basically provides two different form layouts.
form-horizontal
form-inline
The form layout that's ideal for this behaviour is form-inline. All you have to do is change your form css class from the default value to form-inline and override the display attribute of the .form-inline .radio class.
Sample HTML
<form class="form-inline">
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
CSS
.form-inline .radio {
display: block;
}
Here's a working example
Using Bootstrap I want a button group but with one button preselected. If I use the html below then the first button gets preselected, but it remains active even when I click on one of the other buttons.
Using only html how can I define the button group with one button selected where that button will deselect when I click on one of the other buttons.
<div class="btn-group">
<button type="button" class="btn btn-default active">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
It's not completely possible to do this with HTML only - (as your title implies).
Really, the only thing you could do without JavaScript is add the attribute autofocus="autofocus" to the desired element like this:
<button type="button" class="btn btn-default" autofocus="autofocus">Left</button>
As the attribute implies, the button will automatically be focused in supported browsers. If another button is clicked, the focus of the first button will be removed.
EXAMPLE HERE
It's worth noting that the styling of .btn-default.active is the same as .btn-default:focus:
.btn-default:focus, .btn-default.active {
color: #333;
background-color: #ebebeb;
border-color: #adadad;
}
Unfortunately, the focus will also be removed when clicking anywhere else on the page too. If this is a problem, JavaScript would be needed to solve this. The solution would be to have the active class on the desired element and then remove it when clicking on any of the sibling button elements. The selection would be mutually exclusive like with radio elements.
Here is an example taken directly from the Bootstrap JS documentation. It's worth noting that the Bootstrap JS file/jQuery need to be included.
EXAMPLE HERE
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<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>