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>
Related
Pardon my novice as I am just a beginner. I am looking to move the following checkboxes that display vertically on my website to be aligned side by side rather than stacked on top of one another. I know I have them in a row div, but the checkboxes behave the same way out of them. Anyways here is the following code that applies to this question. If any advice could be spared it would be greatly appreciated.
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value
id="flexCheckChecked"
checked
/>Half Day
<label class="form-check-label" for="flexCheckChecked"></label>
</div>
<div>
Travel
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value
id="flexCheckChecked"
checked
/>None
<label class="form-check-label" for="flexCheckChecked"></label>
</div>
</div>
<div>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value
id="flexCheckChecked"
checked
/>One Way
<label class="form-check-label" for="flexCheckChecked"></label>
</div>
</div>
<div>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value
id="flexCheckChecked"
checked
/>Round Trip
<label class="form-check-label" for="flexCheckChecked"></label>
</div>
</div>
<div>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value
id="flexCheckChecked"
checked
/>Round Trip
<label class="form-check-label" for="flexCheckChecked"></label>
</div>
</div>
<div class="row">
You don't even need to wrap them in a row/col. Bootstrap has inbuilt support for horizontally stacked checkboxes (Inline Checkboxes Documentation).
Don't wrap your checkboxes in another div.
Change form-check to form-check form-check-inline.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div>
Travel
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" value id="flexCheckChecked" checked />None
<label class="form-check-label" for="flexCheckChecked"></label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" value id="flexCheckChecked" checked />One Way
<label class="form-check-label" for="flexCheckChecked"></label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" value id="flexCheckChecked" checked />Round Trip
<label class="form-check-label" for="flexCheckChecked"></label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" value id="flexCheckChecked" checked />Round Trip
<label class="form-check-label" for="flexCheckChecked"></label>
</div>
</div>
</body>
</html>
Do you mean like this?
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<div class="form-check">
<input class="form-check-input" type="checkbox" value id="flexCheckChecked" checked>Half Day
<label class="form-check-label" for="flexCheckChecked"></label>
</div>
<div>
Travel
</div>
<div class="row">
<div class="col">
<div class="form-check">
<input class="form-check-input" type="checkbox" value id="flexCheckChecked" checked>None
<label class="form-check-label" for="flexCheckChecked"></label>
</div>
</div>
<div class="col">
<div class="form-check">
<input class="form-check-input" type="checkbox" value id="flexCheckChecked" checked>One Way
<label class="form-check-label" for="flexCheckChecked"></label>
</div>
</div>
<div class="col">
<div class="form-check">
<input class="form-check-input" type="checkbox" value id="flexCheckChecked" checked>Round Trip
<label class="form-check-label" for="flexCheckChecked"></label>
</div>
</div>
<div class="col">
<div class="form-check">
<input class="form-check-input" type="checkbox" value id="flexCheckChecked" checked>Round Trip
<label class="form-check-label" for="flexCheckChecked"></label>
</div>
</div>
</div>
I have a checkbox group named severity and they are grouped in 2 lines with 3 checkboxes in each line.
However, the checkboxes vertical alignment is not so right.
I need to have Not Classified, Warning and High in one line and other below this line.
Am dividing them using an extra empty div, is there a better way to achieve this.
And how can I align the checkbox properly with bootstrap.
Currently Missaligned Screenshot
As you an see Warning and Average are not aligned.
<div class="form-group">
<label for="name" class="col-sm-4 control-label">Severity</label>
<div class="col-sm-8">
<div class="checkbox-inline">
<input class="form-check-input" type="checkbox" id="severity_0" name="severity[]" value="0">
<label class="form-check-label" for="severity_0">Not classified</label>
</div>
<div class="checkbox-inline">
<input class="form-check-input" type="checkbox" id="severity_2" name="severity[]" value="2">
<label class="form-check-label" for="severity_2">Warning</label>
</div>
<div class="checkbox-inline">
<input class="form-check-input" type="checkbox" id="severity_4" name="severity[]" value="4">
<label class="form-check-label" for="severity_4">High</label>
</div>
<div></div>
<div class="checkbox-inline">
<input class="form-check-input" type="checkbox" id="severity_1" name="severity[]" value="1">
<label class="form-check-label" for="severity_1">Information</label>
</div>
<div class="checkbox-inline">
<input class="form-check-input" type="checkbox" id="severity_3" name="severity[]" value="3">
<label class="form-check-label" for="severity_3">Average</label>
</div>
<div class="checkbox-inline">
<input class="form-check-input" type="checkbox" id="severity_5" name="severity[]" value="5">
<label class="form-check-label" for="severity_5">Disaster</label>
</div>
</div>
</div>
You can either use col to make the layout, but easier is to use display: grid;
.checkbox-wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="form-group row">
<label for="name" class="col-sm-4 control-label">Severity</label>
<div class="col-sm-8 checkbox-wrapper">
<div class="checkbox-inline">
<input class="form-check-input" type="checkbox" id="severity_0" name="severity[]" value="0">
<label class="form-check-label" for="severity_0">Not classified</label>
</div>
<div class="checkbox-inline">
<input class="form-check-input" type="checkbox" id="severity_2" name="severity[]" value="2">
<label class="form-check-label" for="severity_2">Warning</label>
</div>
<div class="checkbox-inline">
<input class="form-check-input" type="checkbox" id="severity_4" name="severity[]" value="4">
<label class="form-check-label" for="severity_4">High</label>
</div>
<div class="checkbox-inline">
<input class="form-check-input" type="checkbox" id="severity_1" name="severity[]" value="1">
<label class="form-check-label" for="severity_1">Information</label>
</div>
<div class="checkbox-inline">
<input class="form-check-input" type="checkbox" id="severity_3" name="severity[]" value="3">
<label class="form-check-label" for="severity_3">Average</label>
</div>
<div class="checkbox-inline">
<input class="form-check-input" type="checkbox" id="severity_5" name="severity[]" value="5">
<label class="form-check-label" for="severity_5">Disaster</label>
</div>
</div>
</div>
You can use this code
<style type="text/css">
.form-group {
margin: 15px;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="form-group">
<label for="name" class="col-md-1 col-sm-1 col-xs-1 control-label">Severity</label>
<div class="col-md-11 col-sm-11 col-xs-11">
<div class="checkbox-inline">
<input class="form-check-input" type="checkbox" id="severity_0" name="severity[]" value="0">
<label class="form-check-label" for="severity_0">Not classified</label>
</div>
<div class="checkbox-inline">
<input class="form-check-input" type="checkbox" id="severity_2" name="severity[]" value="2">
<label class="form-check-label" for="severity_2">Warning</label>
</div>
<div class="checkbox-inline">
<input class="form-check-input" type="checkbox" id="severity_4" name="severity[]" value="4">
<label class="form-check-label" for="severity_4">High</label>
</div>
<div></div>
<div class="checkbox-inline">
<input class="form-check-input" type="checkbox" id="severity_1" name="severity[]" value="1">
<label class="form-check-label" for="severity_1">Information</label>
</div>
<div class="checkbox-inline">
<input class="form-check-input" type="checkbox" id="severity_3" name="severity[]" value="3">
<label class="form-check-label" for="severity_3">Average</label>
</div>
<div class="checkbox-inline">
<input class="form-check-input" type="checkbox" id="severity_5" name="severity[]" value="5">
<label class="form-check-label" for="severity_5">Disaster</label>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
No need to add extra CSS. Use Bootstrap’s grid system to align checkboxes.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-sm-3">
<input class="form-check-input" type="checkbox" id="severity_0" name="severity[]" value="0">
<label class="form-check-label" for="severity_0">Not classified</label>
</div>
<div class="col-sm-3">
<input class="form-check-input" type="checkbox" id="severity_2" name="severity[]" value="2">
<label class="form-check-label" for="severity_2">Warning</label>
</div>
...add more...
</div>
</div>
You change column size to col-sm-2 or 4 according to your preferences.
Read Bootstrap’s grid system.
I want make radio button checked by default but it's not working in angular 6 when I use [(ngModel)]. It works fine as I expect in case of removing [(ngModel)]
my code is:
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="custom-control custom-radio">
<input type="radio" id="user_type1" name="user_type" class="custom-control-input" value="1" [(ngModel)]="form.user_type">
<label class="custom-control-label" for="user_type1">Vendor</label>
</div>
</div>
<div class="col-md-4">
<div class="custom-control custom-radio">
<input type="radio" id="user_type2" name="user_type" class="custom-control-input" value="2" [(ngModel)]="form.user_type">
<label class="custom-control-label" for="user_type2">Customer</label>
</div>
</div>
</div>
I have also tried as
<input type="radio" id="user_type1" name="user_type" class="custom-control-input" value="1" [checked]="true" [(ngModel)]="form.user_type" >
Thanks in advance.
Using [(ngModel)] you are binding the checkbox value to form.user_type property value. So the checked="true" is ignored.
It is the correct behaviour because data binding has priority respect to static properties.
If you want to make the checkbox checked by default you need to match value property and form.user_type
EDIT
Try putting value attribute between square brackets like follows:
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="custom-control custom-radio">
<input type="radio" id="user_type1" name="user_type" class="custom-control-input" [value]="1" [(ngModel)]="form.user_type">
<label class="custom-control-label" for="user_type1">Vendor</label>
</div>
</div>
<div class="col-md-4">
<div class="custom-control custom-radio">
<input type="radio" id="user_type2" name="user_type" class="custom-control-input" [value]="2" [(ngModel)]="form.user_type">
<label class="custom-control-label" for="user_type2">Customer</label>
</div>
</div>
</div>
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">
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