|
Answer» The .form-check-inline class is used in Bootstrap to MAKE the checkboxes to appear on the same line. This form of checkboxes is known as Inline Checkboxes.
The example below displays checkbox to appear on the same line: <!DOCTYPE html>
<html LANG="EN">
<head>
<title>Bootstrap Inline Checkbox</title>
<meta charset="utf-8">
<meta name="viewport" CONTENT="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<SCRIPT src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Favourite CMS</h2>
<p>Select the CMSs you like working on:</p>
<form action="">
<div class="form-check-inline">
<label class="form-check-label" for="ch1">
<input type="checkbox" class="form-check-input" id="ch1" name="vehicle1" value="something" checked>WordPress
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label" for="ch2">
<input type="checkbox" class="form-check-input" id="ch2" name="vehicle2" value="something">Drupal
</label>
</div>
<button type="submit" class="btn btn-info">Submit</button>
</form>
</div>
</body>
</html>The output:
|
