I would like to display all the check boxes on the same horizontal row as described here.
My attempt so far has resulted in vertical stacking:
http://jsfiddle.net/x1hphsvb/5536/
<form>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
<label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
</form>
If you're using Bootstrap (as seen in your screenshot) then the class "form-check-inline" should work. If not, you're missing some bootstrap styles.
If bootstrap is not what you're using, you could simply do it this way:
.form-check {
display: inline-block;
}
I've updated your Fiddle: http://jsfiddle.net/2svpjc5b/
Add styling to all your div tags. <div class="form-check form-check-inline" style="display:inline">
Related
I want to apply class form-check-inline when the displays reach sm and further displays width. How can i do it?
<div class="radio-container mb-3 container">
<fieldset class="container">
<legend>
<h4>Destino</h4>
</legend>
<div class="input-radio">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="opcao" value="cidade" id="opcao-1">
<label class="form-check-label" for="opcao-1">Cidade</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="opcao" value="campo" id="opcao-2">
<label class="form-check-label" for="opcao-2">Campo</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="opcao" value="praia" id="opcao-3">
<label class="form-check-label" for="opcao-3">Praia</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="opcao" value="montanha" id="opcao-4">
<label class="form-check-label" for="opcao-4">Montanhas</label>
</div>
</div>
</fieldset>
</div>
The correct way would be to edit the source scss files and compile them. In case you just need a quick css for that, this should work:
#media (min-width: 768px) {
.form-check-inline {
display: block;
}
}
This question already has answers here:
Vertical Align Center in Bootstrap 4 [duplicate]
(20 answers)
Closed 4 years ago.
I'm using Bootstrap 4 and I'm trying to add three radio buttons as a list, I created this HTML structure:
<div class="mt-3 text-center">
<div class="custom-control custom-radio">
<input type="radio" id="manualLoading" name="loadingType" checked="" class="custom-control-input">
<label class="custom-control-label" for="manualLoading">Foooooo1</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="dateLoading" name="loadingType" class="custom-control-input">
<label class="custom-control-label" for="dateLoading">Foo2</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="periodLoading" name="loadingType" class="custom-control-input">
<label class="custom-control-label" for="periodLoading">Fooooo3</label>
</div>
</div>
The problem is that I get this:
This is a JSFIDDLE, how can I fix that?
A possible solution for your problem is using display:grid in the new class content-checkbox and eliminating the class custom-control-label
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.content-checkbox {
display: grid;
justify-content: center;
}
</style>
</head>
<body>
<div class="mt-3 text-center content-checkbox">
<div class="custom-control custom-radio">
<input type="radio" id="manualLoading" name="loadingType" checked="" class="custom-control-input">
<label class="custom-control-label" for="manualLoading">Foooooo1</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="dateLoading" name="loadingType" class="custom-control-input">
<label class="custom-control-label" for="dateLoading">Foo2</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="periodLoading" name="loadingType" class="custom-control-input">
<label class="custom-control-label" for="periodLoading">Fooooo3</label>
</div>
</div>
</body>
</html>
UPDATE:
Add a new class called content-checkbox
I would suggest using default Bootstrap 4 classes for this purpose. Try the code below:
Default radio
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
<label class="form-check-label" for="exampleRadios2">
Second default radio
</label>
</div>
<div class="form-check disabled">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
<label class="form-check-label" for="exampleRadios3">
Disabled radio
</label>
</div>
I am trying to show validation message below horizontally aligned radio buttons in Bootstrap 4.1.3. Below is the default render:
<hr>
<div class="">
<div class="col-sm text-center">
Please confirm that your eye color is:<br>
<span class="response" id="eye_color"></span>
</div>
<div class="col-sm text-center">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="eye_color_yes" value="yes" name="eye_color" required>
<label class="form-check-label" for="eye_color_yes">Yes</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="eye_color_no" value="no" name="eye_color" required>
<label class="form-check-label" for="eye_color_no">No</label>
<div class="invalid-feedback">
Please select an option.
</div>
</div>
</div>
</div>
<hr>
I tried adding a break <br> and got this:
<hr>
<div class="">
<div class="col-sm text-center">
Please confirm that your eye color is:<br>
<span class="response" id="eye_color"></span>
</div>
<div class="col-sm text-center">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="eye_color_yes" value="yes" name="eye_color" required>
<label class="form-check-label" for="eye_color_yes">Yes</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="eye_color_no" value="no" name="eye_color" required>
<label class="form-check-label" for="eye_color_no">No</label>
<div class="invalid-feedback">
<br>Please select an option.
</div>
</div>
</div>
</div>
<hr>
But what I would really like is for the validation message to appear directly under the two horizontal radio buttons. I am using Bootstrap 4.1.3's validation for ease but for some reason can't figure this part out. Thanks!
I was just struggling with the same thing. This answer is probably too late for you, but hopefully it helps someone else. The validation message is displaying where it is because Bootstrap adds display: inline-flex; on a parent element when displaying horizontal forms, preventing it from dropping down to the next line.
I was able to relocate the invalid-feedback validation message outside the flex layout element, and have it continue to react to the validation (without any extra javascript) by placing a dummy radio button with the same name before it and hiding it with CSS. A bit hacky, but it works.
<div class="col-sm text-center">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="eye_color_yes" value="yes" name="eye_color" required>
<label class="form-check-label" for="eye_color_yes">Yes</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="eye_color_no" value="no" name="eye_color" required>
<label class="form-check-label" for="eye_color_no">No</label>
</div>
<input type="radio" name="eye_color" style="display:none;" required>
<div class="invalid-feedback">
Please select an option.
</div>
</div>
I created a form only using Bootstrap 4 class. You can use this snippet for your desired result.
<div class="container">
<form >
<div class="col-sm-6">
Please confirm that your eye color is:
</div>
<div class="form-check-inline">
<label class="form-check-label" for="radio1">
<input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked>Blue
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label" for="radio2">
<input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">Black
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input">Grey
</label>
</div>
<div class="text-danger">
Please select color.
</div>
</form>
</div>
On the place of below code:
<div class="text-danger">
Please select color.
</div>
You can use below snippet it will look better for showing error messages:
<div class="alert alert-danger">
<strong>Warning!</strong> Please select color.
</div>
I'm trying to make a bootstrap form page but I suck at frontend.
My question is really simple: how can I space those checkboxes?
<div class="form-group">
<label for="">Repetir?</label>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="segunda">
<label class="form-check-label">Segunda</label>
<input type="checkbox" class="form-check-input" id="segunda">
<label class="form-check-label">Terça</label>
<input type="checkbox" class="form-check-input" id="segunda">
<label class="form-check-label">Quarta</label>
<input type="checkbox" class="form-check-input" id="segunda">
<label class="form-check-label">Quinta</label>
<input type="checkbox" class="form-check-input" id="segunda">
<label class="form-check-label">Sexta</label>
<input type="checkbox" class="form-check-input" id="segunda">
<label class="form-check-label">Sábado</label>
<input type="checkbox" class="form-check-input" id="segunda">
<label class="form-check-label">Domingo</label>
</div>
</div>
Here is an image of the result:
They are very close together. thank you
You can use margin left (ml-x), margin right (mr-x) or padding left (pl-x), padding right (pr-x) classes of bootstrap-4 or alpha. Where x is any number (1, 2, 3 etc).
e.g. pl-1, or pr-2
Refer here
With bootstrap-3, you can write your own simple class:
.ml-1 {
margin-left: 4px !important;
}
In case you'd like a custom layout, using grid system should be an option.
Just use .form-row as a replacement of .form-check and wrap your checkboxes into the .
<div class="form-group container">
<div class="form-row">
<div class="col-3">
<input type="checkbox" class="form-check-input" id="segunda1">
<label class="form-check-label">Segunda</label>
</div>
<div class="col-3">
<input type="checkbox" class="form-check-input" id="segunda2">
<label class="form-check-label">Terça</label>
</div>
<div class="col-3">
<input type="checkbox" class="form-check-input" id="segunda3">
<label class="form-check-label">Quarta</label>
</div>
<div class="col-3">
<input type="checkbox" class="form-check-input" id="segunda4">
<label class="-form-check-label">Quinta</label>
</div>
<div class="col-3">
<input type="checkbox" class="form-check-input" id="segunda5">
<label class="form-check-label" style="border:1px">Sexta</label>
</div>
<div class="col-3">
<input type="checkbox" class="form-check-input" id="segunda6">
<label class="form-check-label">Sábado</label>
</div>
<div class="col-3">
<input type="checkbox" class="form-check-input" id="segunda7">
<label class="form-check-label">Domingo</label>
</div>
</div>
</div>
Here's a fiddle: https://jsfiddle.net/5wgyjd9n/
you can simply add a m tag and add it in your code after every input type checkbox tag
.css:
m { margin:20px }
and your rest of the code goes like this:
.html:
<div class="form-group container">
<label for="">Repetir?</label>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="segunda">
<label class="form-check-label">Segunda</label>
<m></m>
<input type="checkbox" class="form-check-input" id="segunda">
<label class="form-check-label">Terça</label>
<m></m>
<input type="checkbox" class="form-check-input" id="segunda">
<label class="form-check-label">Quarta</label>
<m></m>
<input type="checkbox" class="form-check-input" id="segunda">
<label class="form-check-label">Quinta</label>
<m></m>
<input type="checkbox" class="form-check-input" id="segunda">
<label class="form-check-label">Sexta</label>
<m></m>
<input type="checkbox" class="form-check-input" id="segunda">
<label class="form-check-label">Sábado</label>
<m></m>
<input type="checkbox" class="form-check-input" id="segunda">
<label class="form-check-label">Domingo</label>
<m></m>
</div>
</div>
hope this answers your question.
It seems you are trying to keep them horizontally. You can simply add a right margin to .form-check-label like bellow:
.form-group .form-check .form-check-label{
margin-right: 25px;
}
.form-group .form-check .form-check-label:last-child{
margin-right: 0;
}
Here is the codepen
I'm trying to get the inline radio in bootstrap with the label up or down the radio.
If you take the official example, you have:
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>
</div>
What can I do to align the label up or down?
Edit: A failed attempt (not aligned and the checkbox doesn't display a clickable pointer)
what importance or significance does the form-check-input hold in your page? Is there a script that uses this class to do some actions?
I noticed that "form-check-input" is having a negative margin of -1.25rem defined, if you remove the class or replace it with form-check-label it aligns just fine.
<div class="container">
<div class="form-check form-check-inline">
<label class="form-check-label">
1 <br /><input class="form-check-label" type="checkbox" id="inlineCheckbox1" value="option1">
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
2 <br /><input class="form-check-label" type="checkbox" id="inlineCheckbox2" value="option2">
</label>
</div>
<div class="form-check form-check-inline disabled">
<label class="form-check-label">
3 <br /><input class="form-check-label" type="checkbox" id="inlineCheckbox3" value="option3">
</label>
</div>
</div>
<!-- /container -->
DEMO : http://plnkr.co/edit/bs0PWCX1J3Z8XnpdpolN?p=preview
EDIT:
The above solution does not center things when the label text is longer, to make it work, we could use bootstrap predefined class text-center and wrap the entire label element in it like so:
<div class="text-center">
<label class="form-check-label">
1 <br />
<input class="" type="checkbox" id="inlineCheckbox1" value="option1">
</label>
</div>
UPDATED DEMO : http://plnkr.co/edit/CQumOaFUOrm2SSLyc5Ru?p=preview
If I understand your question correctly, you might want to try the following:
Bottom alignment:
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input" style="cursor: pointer;" type="checkbox" id="inlineCheckbox1" value="option1"><br /> 1
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input" style="cursor: pointer;" type="checkbox" id="inlineCheckbox2" value="option2"><br /> 2
</label>
</div>
<div class="form-check form-check-inline disabled">
<label class="form-check-label">
<input class="form-check-input" style="cursor: pointer;" type="checkbox" id="inlineCheckbox3" value="option3"><br /> 3
</label>
</div>
Top alignment:
<div class="form-check form-check-inline">
<label class="form-check-label">
1 <br /><input class="form-check-input" style="cursor: pointer;" type="checkbox" id="inlineCheckbox1" value="option1">
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
2 <br /><input class="form-check-input" style="cursor: pointer;" type="checkbox" id="inlineCheckbox2" value="option2">
</label>
</div>
<div class="form-check form-check-inline disabled">
<label class="form-check-label">
3 <br /><input class="form-check-input" style="cursor: pointer;" type="checkbox" id="inlineCheckbox3" value="option3">
</label>
</div>