Shift Bootstrap Checkboxes to horizontal rather than stacked - html

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>

Related

Boostrap - I want to apply class `form-check-inline` when the displays reach sm and further displays width. How can i do it?

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;
}
}

Exact alignment of Radio buttons in Rows and Columns

How do I align Radio buttons exactly in HORIZONTAL ROWS and at the same time exactly in VERTICAL COLUMNS. I have to align radio buttons in four rows. The radio buttons are like so:
whenever the text is bigger, the radio buttons move to the right. If the text associated with radio button is shorter then radio buttons move to the left. I want them to be aligned properly in rows and columns.Below is my HTML:
<div class="row">
<div class="col-lg-12">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">A</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">B</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
<label class="form-check-label" for="inlineRadio3"> cccc</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
<label class="form-check-label" for="inlineRadio3">DDDDDDDDDDDDDDDDDDDDDD</label>
</div>
</div>
<div class="col-lg-12">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">XXXXXXXXXXXXXXXXXXX</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">ssss</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
<label class="form-check-label" for="inlineRadio3">rrrr </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
<label class="form-check-label" for="inlineRadio3">sdsdsd</label>
</div>
</div>
<div class="col-lg-12">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">jjjjjj</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">jjjj</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
<label class="form-check-label" for="inlineRadio3">rtrtrtrtrtrtrtrtrt </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
<label class="form-check-label" for="inlineRadio3">hhhhhhhh</label>
</div>
</div>
<div class="col-lg-12">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">jjjjjj</label>
</div>
</div>
</div>
Any help will be greatly appreciated.

You can use bootstrap for this
<div class="row">
<div class="col-sm-3"><li>A</li></div>
<div class="col-sm-3"><li>B</li></div>
<div class="col-sm-3"><li>ccc</li></div>
<div class="col-sm-3"><li>GGG</li></div>
</div>
Please refer for more details:- https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_grid_ex_structure&stacked=h

using bootstrap class="form-check-inline" you can create a radio button inline.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1>Radio Buttons</h1>
<br>
<div class="row">
<div class="col-lg-12">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">A</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">B</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
<label class="form-check-label" for="inlineRadio3">C</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
<label class="form-check-label" for="inlineRadio3">D</label>
</div>
</div>
<div class="col-lg-12">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">A</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">B</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
<label class="form-check-label" for="inlineRadio3">C </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
<label class="form-check-label" for="inlineRadio3">D</label>
</div>
</div>
</div>
</div>
</body>
</html>
I think your query will be solved. Thank You..!

I can think of wrapping around the classes will give your result.
Since you need to retain horizontal and vertical alignment you have to fix the width of the blocks and make it wrap to the next line when there is more data.
you can try something like this:
.Align {
display: flex;
width: 100%;
}
.form-check-inline {
width: 22%; /* Fix the block, ofcourse it will work for all screens */
border: 1px solid black;
margin: 5px;
}
.form-check-label {
padding:2px;
overflow-wrap: break-word;
width: 90%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-lg-12 Align">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">A</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">B</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
<label class="form-check-label" for="inlineRadio3"> cccc</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
<label class="form-check-label" for="inlineRadio3">DDDDDDDDDDDDDDDDDDDDDD</label>
</div>
</div>
<div class="col-lg-12 Align">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">XXXXXXXXXXXXXXXXXXX</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">ssss</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
<label class="form-check-label" for="inlineRadio3">rrrr </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
<label class="form-check-label" for="inlineRadio3">sdsdsd</label>
</div>
</div>
<div class="col-lg-12 Align">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">jjjjjj</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">jjjj</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
<label class="form-check-label" for="inlineRadio3">rtrtrtrtrtrtrtrtrt </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
<label class="form-check-label" for="inlineRadio3">hhhhhhhh</label>
</div>
</div>
<div class="col-lg-12 Align">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">jjjjjj</label>
</div>
</div>
</div>

How to align checkboxes in a group with bootstrap

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.

How to show validation message below horizontal radio buttons in Bootstrap 4.1.3?

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>

How to space two checkboxes with bootstrap?

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