CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
chamara
chamara

Reputation: 12709

Bootstrap form design spacing issue

How can I get rid of the highlighted space and make the last two rows align with the first two?

enter image description here

Following is the HTML

<div class="col-md-6">

    <div class="row">
        <div class="form-group mb">
            <label class="col-sm-3 control-label input-sm">Claim Ref</label>
            <div class="col-sm-9">
               <input type="text" class="form-control" />
            </div>
        </div>
    </div>
    <div class="row">
        <div class="form-group mb">
            <label class="col-sm-3 control-label input-sm">File Note Date</label>
            <div class="col-sm-9">
                <input type="text" class="form-control" />
            </div>
        </div>
    </div>

</div>

<div class="col-md-6">

    <div class="row">
        <div class="form-group mb">
            <label class="col-sm-3 control-label input-sm">Created By</label>
            <div class="col-sm-9">
                <input type="text" class="form-control" />
            </div>
        </div>
    </div>
    <div class="row">
        <div class="form-group mb">
            <label class="col-sm-3 control-label input-sm">Created Date</label>
            <div class="col-sm-9">
                <input type="text" class="form-control" />
            </div>
        </div>
    </div>

</div>

<div class="col-md-12">

    <div class="row">
        <div class="form-group mb">
            <label class="col-sm-2 control-label input-sm">Short Description</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" />
            </div>
        </div>
    </div>

    <div class="row">
        <div class="form-group mb">
            <label class="col-sm-2 control-label input-sm">Detail</label>
            <div class="col-sm-10">
               <textarea class="form-control"></textarea>
            </div>
        </div>
    </div>
    <br />
    <div class="footer text-right">
        <button type="button" class="mb-sm btn btn-default">Discard Changes</button>
        <button type="submit" class="mb-sm btn btn-primary">Save Changes</button>
    </div>

</div>

Upvotes: 0

Views: 48

Answers (2)

Obsidian Age
Obsidian Age

Reputation: 42384

I don't actually think this can be achieved with any combination of predefined Bootstrap classes. However, this is fairly easy to solve if you're willing to add your own CSS to overwrite the widths:

@media screen and (min-width: 768px) { /* Bootstrap .md breakpoint */
  label.col-sm-2 {
    width: 12.5%;
  }
  label.col-sm-2+div.col-sm-10 {
    width: 87.5%;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-md-6">

  <div class="row">
    <div class="form-group mb">
      <label class="col-sm-3 control-label input-sm">Claim Ref</label>
      <div class="col-sm-9">
        <input type="text" class="form-control" />
      </div>
    </div>
  </div>
  <div class="row">
    <div class="form-group mb">
      <label class="col-sm-3 control-label input-sm">File Note Date</label>
      <div class="col-sm-9">
        <input type="text" class="form-control" />
      </div>
    </div>
  </div>

</div>

<div class="col-md-6">

  <div class="row">
    <div class="form-group mb">
      <label class="col-sm-3 control-label input-sm">Created By</label>
      <div class="col-sm-9">
        <input type="text" class="form-control" />
      </div>
    </div>
  </div>
  <div class="row">
    <div class="form-group mb">
      <label class="col-sm-3 control-label input-sm">Created Date</label>
      <div class="col-sm-9">
        <input type="text" class="form-control" />
      </div>
    </div>
  </div>

</div>

<div class="col-md-12">

  <div class="row">
    <div class="form-group mb">
      <label class="col-sm-2 control-label input-sm">Short Description</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" />
      </div>
    </div>
  </div>

  <div class="row">
    <div class="form-group mb">
      <label class="col-sm-2 control-label input-sm">Detail</label>
      <div class="col-sm-10">
        <textarea class="form-control"></textarea>
      </div>
    </div>
  </div>
  <br />
  <div class="footer text-right">
    <button type="button" class="mb-sm btn btn-default">Discard Changes</button>
    <button type="submit" class="mb-sm btn btn-primary">Save Changes</button>
  </div>

</div>

Click 'full page' after running to see it in effect.

Note the use of the adjacent sibling combinator (+) in order to only target the col-sm-10 columns that immediately follow the labels. This will prevent the rule from applying to <div> elements that do not have a label preceding them.

Also note the media query to keep the columns correctly occupying the full 100% width at smaller widths.

You may want to adjust the class selectors based on your additional code, but remember to always give them more specificity than the Bootstrap selectors defining the width.

Hope this helps! :)

Upvotes: 2

Jonathan
Jonathan

Reputation: 6537

Because you have 3/12 of 6/12 (or 1/4 of 1/2), that gives you 1/8, or 1.5/12, which Bootstrap will not let you do. Columns have to be whole numbers.

The only way around it is to add space on the other columns by making them 4/12 and 8/12 instead of your initial 3/12 and 9/12.

I suppose you could re-invent the wheel and create your own 1.5/12 column and 10.5/12 column but I doubt it is worth it. This is how my initial suggestion would work:

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-6">

    <div class="row">
        <div class="form-group mb">
            <label class="col-md-4 col-sm-2 control-label input-sm">Claim Ref</label>
            <div class="col-md-8 col-sm-10">
               <input type="text" class="form-control" />
            </div>
        </div>
    </div>
    <div class="row">
        <div class="form-group mb">
            <label class="col-md-4 col-sm-2 control-label input-sm">File Note Date</label>
            <div class="col-md-8 col-sm-10">
                <input type="text" class="form-control" />
            </div>
        </div>
    </div>

</div>

<div class="col-md-6">

    <div class="row">
        <div class="form-group mb">
            <label class="col-md-4 col-sm-2 control-label input-sm">Created By</label>
            <div class="col-md-8 col-sm-10">
                <input type="text" class="form-control" />
            </div>
        </div>
    </div>
    <div class="row">
        <div class="form-group mb">
            <label class="col-md-4 col-sm-2 control-label input-sm">Created Date</label>
            <div class="col-md-8 col-sm-10">
                <input type="text" class="form-control" />
            </div>
        </div>
    </div>

</div>

<div class="col-md-12">

    <div class="row">
        <div class="form-group mb">
            <label class="col-sm-2 control-label input-sm">Short Description</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" />
            </div>
        </div>
    </div>

    <div class="row">
        <div class="form-group mb">
            <label class="col-sm-2 control-label input-sm">Detail</label>
            <div class="col-sm-10">
               <textarea class="form-control"></textarea>
            </div>
        </div>
    </div>
    <br />
    <div class="footer text-right">
        <button type="button" class="mb-sm btn btn-default">Discard Changes</button>
        <button type="submit" class="mb-sm btn btn-primary">Save Changes</button>
    </div>

</div>

Upvotes: 2

Related Questions