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.
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 Bootstrap form on my page, but the radio buttons are aligned to the left. I would like them to be spaced so they span the full width of the containing div. Here is the current code:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<fieldset class="form-group">
<legend class="col-form-label required">Question</legend>
<div id="question">
<div class="form-check form-check-inline">
<input type="radio" id="question_0" name="question[1]" required="required" class="form-check-input" value="1">
<label class="form-check-label required" for="question_0">1</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" id="question_28_1" name="question[1]" required="required" class="form-check-input" value="2">
<label class="form-check-label required" for="question_1">2</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" id="question_1" name="question[1]" required="required" class="form-check-input" value="3">
<label class="form-check-label required" for="question_2">3</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" id="question_3" name="question[1]" required="required" class="form-check-input" value="4">
<label class="form-check-label required" for="question_3">4</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" id="question_4" name="question[1]" required="required" class="form-check-input" value="5">
<label class="form-check-label required" for="question_4">5</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" id="question_5" name="question[1]" required="required" class="form-check-input" value="6">
<label class="form-check-label required" for="question_5">6</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" id="question_6" name="question[1]" required="required" class="form-check-input" value="7">
<label class="form-check-label required" for="question_6">7</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" id="question_7" name="question[1]" required="required" class="form-check-input" value="8">
<label class="form-check-label required" for="question_7">8</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" id="question_8" name="question[1]" required="required" class="form-check-input" value="9">
<label class="form-check-label required" for="question_8">9</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" id="question_9" name="question[1]" required="required" class="form-check-input" value="10">
<label class="form-check-label required" for="question_9">10</label>
</div>
</div>
</fieldset>
Bootstrap Flex Utility readily provides the classes needed for the spacing. You can achieve this layout just by adding d-flex & justify-content-between to your questions container
<div id="question" class="d-flex justify-content-between">
...
</div>
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>
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 am trying to use https://getbootstrap.com/docs/4.0/components/forms/ form-check-inline without success, it renders the html by putting one checkbox under the other:
This is my html code:
<h1>Crear Paciente</h1>
<hr />
<form>
<!-- #region General Data -->
<div class="form-group">
<label>Nombres y Apellidos</label>
<input type="text" class="form-control" id="namesAndSurnames" placeholder="Nombres y Apellidos">
</div>
<div class="form-group">
<label>Fecha de Nacimiento</label>
<input type="date" class="form-control" id="birthDate">
</div>
<div class="form-group">
<label>CI</label>
<input type="number" class="form-control" id="ci" placeholder="Cédula de Identidad">
</div>
<div class="form-group">
<label>Dirección</label>
<input type="text" class="form-control" id="address" placeholder="Dirección">
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" id="email" placeholder="Email">
</div>
<div class="form-group">
<label>Teléfono</label>
<input type="tel" class="form-control" id="phone" placeholder="Teléfono">
</div>
<div class="form-group">
<label>Sociedad Médica</label>
<input type="text" class="form-control" id="medicSociety" placeholder="Sociedad Médica">
</div>
<div class="form-group">
<label>Emergencia Móvil</label>
<input type="text" class="form-control" id="mobileEmergency" placeholder="Emergencia Móvil">
</div>
<div class="form-group">
<label>Ocupación</label>
<input type="text" class="form-control" id="occupation" placeholder="Ocupación">
</div>
<div class="form-group">
<label>Observaciones</label>
<input type="text" class="form-control" id="observations" placeholder="Observaciones">
</div>
<!--#endregion -->
<!-- #region Sicknesses -->
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="diabetes" value="diabetes">
<label class="form-check-label">Diabetes</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="heartProblems" value="heartProblems">
<label class="form-check-label">Problemas Cardíacos</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="hypertension" value="hypertension">
<label class="form-check-label">Hipertensión</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="metallicProsthesis" value="metallicProsthesis">
<label class="form-check-label">Prótesis Metálicas</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="pacemaker" value="pacemaker">
<label class="form-check-label">Marcapasos</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="pregnancies" value="pregnancies">
<label class="form-check-label">Embarazos</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="surgeries" value="surgeries">
<label class="form-check-label">Cirugías</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="allergies" value="allergies">
<label class="form-check-label">Alergias</label>
</div>
<div class="form-group">
<label>Descripción de Alergias</label>
<input type="text" class="form-control" id="allergiesDescription" placeholder="Describir las Alergias del Paciente">
</div>
<!--#endregion -->
<button type="submit" class="btn btn-primary pull-right">Guardar</button>
</form>
I am also using electron though I doubt it has sth to do with this (it shouldn't).
All the former html code is being rendered with w3-include-html although it shouldn't affect either... this is the body html:
<body>
<div class="container">
<div id="includerDiv" w3-include-html="mainWindow.html"></div>
<script>w3.includeHTML();</script>
<hr />
<footer>
<p>
©
<script>document.write(new Date().getFullYear())</script> - Beaspa - Versión 1.0
</p>
</footer>
</div>
</body>
Replace form-check form-check-inline with checkbox-inline and it will work like an inline:
<div class="checkbox-inline">
<input type="checkbox" class="form-check-input" id="diabetes" value="diabetes">
<label class="form-check-label">Diabetes</label>
</div>
<div class="checkbox-inline">
<input type="checkbox" class="form-check-input" id="heartProblems" value="heartProblems">
<label class="form-check-label">Problemas Cardíacos</label>
</div>
<div class="checkbox-inline">
<input type="checkbox" class="form-check-input" id="hypertension" value="hypertension">
<label class="form-check-label">Hipertensión</label>
</div>
<div class="checkbox-inline">
<input type="checkbox" class="form-check-input" id="metallicProsthesis" value="metallicProsthesis">
<label class="form-check-label">Prótesis Metálicas</label>
</div>
<div class="checkbox-inline">
<input type="checkbox" class="form-check-input" id="pacemaker" value="pacemaker">
<label class="form-check-label">Marcapasos</label>
</div>
<div class="checkbox-inline">
<input type="checkbox" class="form-check-input" id="pregnancies" value="pregnancies">
<label class="form-check-label">Embarazos</label>
</div>
<div class="checkbox-inline">
<input type="checkbox" class="form-check-input" id="surgeries" value="surgeries">
<label class="form-check-label">Cirugías</label>
</div>
<div class="checkbox-inline">
<input type="checkbox" class="form-check-input" id="allergies" value="allergies">
<label class="form-check-label">Alergias</label>
</div>