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>
Related
Is there a standardized way of graying (greying) out text that is meant to be ignored, either in HTML, or bootstrap?
I tried looking at both how Slack styles the "(edited)" text, and how Twitter itself (twitter.com) styles timestamps, and it seems they just change the font color. It just seems strange to me that an arbitrary font color is chosen without any semantic information is attached to it, or even a standardized shade of gray.
The bootstrap documentation mentions some semantic colors, but gray isn't included in them - gray is only mentioned in grayscale.
There is actually a standard way to do it, in bootstrap, which is to use to use text-muted.
In fact, there is a list of standard text shades and colors that are applied directly.
http://www.w3schools.com/bootstrap/bootstrap_ref_css_helpers.asp
As for HTML, having a CSS with a disabled class and applying that to any of your text would be a better option.
Standard HTML Input Forms
An example of this is disabling HTML input elements, though there's not a standard display of that across browsers.
http://codepen.io/anthonyastige/pen/dXNEmx
<input type=button value="I can do all the things">
<input type=button value="I'm disabled" disabled>
Bootstrap Input Forms
There's also the concept of disabling input elements here with the .disabled class
https://getbootstrap.com/css/#checkboxes-and-radios
Bootstrap text
The .text-muted class implies disabled, though the specs don't say exactly what it means.
https://getbootstrap.com/css/#helper-classes
See samples below:
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<fieldset disabled>
<div class="form-group">
<label for="inputText">Disabled input</label>
<input class="form-control" id="inputText" type="text" placeholder="Disabled Input" disabled>
<p class="help-block">Example block-level help-block class text here.</p>
<p class="text-muted">Example block-level with text-muted class.</p>
</div>
<div class="form-group">
<label for="optionSelect">Disabled select menu</label>
<select id="optionSelect" class="form-control">
<option>Select Value</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox">Disabled Checkbox
</label>
</div>
<button type="submit" class="btn btn-primary">Disabled Button</button>
</fieldset>
I use the codes same as the bootstrap3 sample as below:
<div class="checkbox">
<label>
<input ng-model="user.rememberMe" type="checkbox"> Remember Me
</label>
</div>
and got the style like:
not like its style in bootstrap sample
Bootstrap adds no special styles to a checkbox. We can easily verify this with a live example:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
</form>
You probably found a theme, fork or non-official example that adds special styles to the checkbox.
I am trying to combine input-group-addon with radio elements. Example code is below.
http://www.bootply.com/1M34c3sy29
But the radio image is not centered for Price radio section.
Is it possible to center the image for the Price section? Or do you recommend another solution for such kind of presentation.
Bootstrap is adding some styling that will not allow the vertical align to function as you need. The elements are absolutely positioned. I'd try positioning the radio button another way, using the top css property:
.input-group { display:inline-block;}
#inlineradio2{ top: 13px; }
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<form class="form-horizontal">
<fieldset>
<div class="form-group">
<div class="col-lg-12">
<div class="radio">
<label>
<input id="inlineradio1" name="sampleinlineradio" value="option1" type="radio">
Automatic. Price will be set by the system!</label>
</div>
<div class="radio">
<label>
<input id="inlineradio2" name="sampleinlineradio" value="option2" type="radio">
<div class="input-group">
<span class="input-group-addon">Price</span>
<input type="text" class="form-control" placeholder="" id="price-box" aria-describedby="Price">
</div><!-- /input-group -->
</label>
</div>
</div>
</div>
</fieldset>
</form>
I've also changed the name of the HTML id attribute on the radio button in question as the id should be unique.
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.
I'm making a form that has a checkbox that is inline with a text input. Here's what I did to make it look nice with bootstrap:
<label class="checkbox">
<input type="checkbox" name="keywords" value="__option__">
<input type="text" name="keywords_other_option" value="" placeholder="Other">
</label>
It looks good, but it doesn't function well. In firefox, the user can't type in the textbox. Is there a good bootstrap way to put the checkbox and the text input inline with each other?
Don't put two input elements inside one label element.
And here is Twitter Bootstrap way to solve this:
<form class="form-inline">
<label class="checkbox">
<input type="checkbox" name="keywords" value="__option__">
</label>
<input type="text" name="keywords_other_option" value="" placeholder="Other">
</form>
Here is DEMO.
Look more examples from official documentation.