I have a Bootstrap Form that uses checkboxes - in one case there are a large number of options to choose from. Is it possible to align these so they appear in 'columns' or similar - at the moment they just appear in one long list which makes it hard to read.
Here's how it currently looks:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<body>
<main role="main" class="container">
<div>
<form method="get" action="projects.php" role="form">
<input type="hidden" name="action" value="projectsFind">
<div class="form-group row">
<label for="sectionNumber" class="col-sm-2 col-form-label">Section Number</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="sectionNumber" name="sectionNumber" placeholder="Section Number">
</div>
</div>
<div class="form-group row">
<div class="col-sm-2">Selections</div>
<div class="col-sm-10">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Hot Food">
<label class="form-check-label" for="gridCheck1">
Hot Food </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Retail">
<label class="form-check-label" for="gridCheck1">
Retail </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Affordable">
<label class="form-check-label" for="gridCheck1">
Affordable </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Canteen">
<label class="form-check-label" for="gridCheck1">
Canteen </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="At Home">
<label class="form-check-label" for="gridCheck1">
At Home </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Residential">
<label class="form-check-label" for="gridCheck1">
Residential </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Hospitality">
<label class="form-check-label" for="gridCheck1">
Hospitality </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Supermarket">
<label class="form-check-label" for="gridCheck1">
Supermarket </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Education">
<label class="form-check-label" for="gridCheck1">
Education </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Student">
<label class="form-check-label" for="gridCheck1">
Student </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Leisure">
<label class="form-check-label" for="gridCheck1">
Leisure </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Exhibition">
<label class="form-check-label" for="gridCheck1">
Exhibition </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Health">
<label class="form-check-label" for="gridCheck1">
Health </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Seniors">
<label class="form-check-label" for="gridCheck1">
Seniors </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Restaurant">
<label class="form-check-label" for="gridCheck1">
Restaurant </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Standard">
<label class="form-check-label" for="gridCheck1">
Standard </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Industry">
<label class="form-check-label" for="gridCheck1">
Industry </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Social">
<label class="form-check-label" for="gridCheck1">
Social </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Recycle">
<label class="form-check-label" for="gridCheck1">
Recycle </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Re-use">
<label class="form-check-label" for="gridCheck1">
Re-use </label>
</div>
</div>
</div>
</form>
You can see the "Selections" are just listed in a running list. Is there a way to make the "Selections" checkboxes aligned in a more easy to read format?
You can add fixed width to the .form-check-inline.This will align them in a column like layout.
The value of the width should be little more than the width of the longest word.
.form-check-inline {
width: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<body>
<main role="main" class="container">
<div>
<form method="get" action="projects.php" role="form">
<input type="hidden" name="action" value="projectsFind">
<div class="form-group row">
<label for="sectionNumber" class="col-sm-2 col-form-label">Section Number</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="sectionNumber" name="sectionNumber" placeholder="Section Number">
</div>
</div>
<div class="form-group row">
<div class="col-sm-2">Selections</div>
<div class="col-sm-10">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Hot Food">
<label class="form-check-label" for="gridCheck1">
Hot Food </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Retail">
<label class="form-check-label" for="gridCheck1">
Retail </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Affordable">
<label class="form-check-label" for="gridCheck1">
Affordable </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Canteen">
<label class="form-check-label" for="gridCheck1">
Canteen </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="At Home">
<label class="form-check-label" for="gridCheck1">
At Home </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Residential">
<label class="form-check-label" for="gridCheck1">
Residential </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Hospitality">
<label class="form-check-label" for="gridCheck1">
Hospitality </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Supermarket">
<label class="form-check-label" for="gridCheck1">
Supermarket </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Education">
<label class="form-check-label" for="gridCheck1">
Education </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Student">
<label class="form-check-label" for="gridCheck1">
Student </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Leisure">
<label class="form-check-label" for="gridCheck1">
Leisure </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Exhibition">
<label class="form-check-label" for="gridCheck1">
Exhibition </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Health">
<label class="form-check-label" for="gridCheck1">
Health </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Seniors">
<label class="form-check-label" for="gridCheck1">
Seniors </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Restaurant">
<label class="form-check-label" for="gridCheck1">
Restaurant </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Standard">
<label class="form-check-label" for="gridCheck1">
Standard </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Industry">
<label class="form-check-label" for="gridCheck1">
Industry </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Social">
<label class="form-check-label" for="gridCheck1">
Social </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Recycle">
<label class="form-check-label" for="gridCheck1">
Recycle </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Re-use">
<label class="form-check-label" for="gridCheck1">
Re-use </label>
</div>
</div>
</div>
</form>
Related
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 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'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>