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.
Related
This question already has answers here:
How to align the checkbox and label in same line in html?
(13 answers)
Closed 1 year ago.
Goal:
I want text to come after my checkbox
Problem:
My p tag comes directly after my check box input, but I can't get them on the same line and Next to each other.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col">
<input type="checkbox">
</div>
<div class="col">
<p> Save My card for future payment</p>
</div><br>
</div>
</div>
Edit:
The best way to put Text after a checkbox or other user input button is to use a LABEL not a p tag.
<label for="check">text goes here</label>
<input type="checkbox" id="check">
If you're using Bootstrap as your class names suggest, this is the right way:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
Save my card for future payment
</label>
</div>
</div>
</div>
See the docs at https://getbootstrap.com/docs/4.6/components/forms/#checkboxes-and-radios.
If not, use standard checkbox markup so your form is accessible to those using assistive technology (and more standard):
<label>
<input type="checkbox">
Save my card for future payment
</label>
Notice that in both cases the label is clickable.
I assume that your code look like that.
.checkbox_div {
display: flex;
align-items: center;
}
.checkbox_div p {
display: inline-block;
}
<div class="checkbox_div">
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<p>Paragraph text </p>
</div>
If not then format your code look like that. Take checkbox input and p tag inside a div.
And then add some css which is given below.
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>
I am trying to display a label above a custom file input field and another label inside it with bootstrap 4. I tried the following, but the label 1 is not shown.
<label class="w-100">label 1
<input type="file" class="custom-file-input">
<label class="custom-file-label">label 2</label>
</label>
When I label a normal input field this way, label 3 is shown as expected.
<label class="w-100">label 3
<input type="text" class="form-control">
</label>
Does anybody know why label 1 is not shown and what I should do to display label 1 and label 2? Many thanks in advance.
What actually does work is this:
<label for="some-id" class="w-100">label 1</label>
<div class="custom-file" style="margin-top:-1.5em" id="some-id">
<input type="file" class="custom-file-input">
<label class="custom-file-label">label 2</label>
</div>
but the negative margin seems to be a bad solution. Without it, the label is displayed to high.
Just run this:
$(".custom-file-input").on("change", function() {
var fileName = $(this).val().split("\\").pop();
$(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
</form>
If you need to support multiple file selection (using the multiple attribute) here is the code for that.
$('.custom-file-input').on('change', function () {
let fileName = Array.from(this.files).map(x => x.name).join(', ')
$(this).siblings('.custom-file-label').addClass("selected").html(fileName);
});
I just write a basic bootstrap 4 custom file label code, I hope it'll help you out. Thanks
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<label class="w-100">label 1
<div class="custom-file">
<input type="file" class="custom-file-input">
<label class="custom-file-label">label 2</label>
</div>
</label>
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 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.