CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Coder
Coder

Reputation: 107

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>

Upvotes: 2

Views: 7468

Answers (3)

Adwin
Adwin

Reputation: 119

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.

Upvotes: 0

Piyush Teraiya
Piyush Teraiya

Reputation: 747

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>

Upvotes: 0

Nidhin Joseph
Nidhin Joseph

Reputation: 10227

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>

Upvotes: 6

Related Questions