Align Bootstrap 4 custom form(checkbox)

Question

With Bootstrap 4 and bootswatch, I'd like to place the four Django form fileds, since(col-sm-2/textinput), until(col-sm-2/textinput), currently_employed(col-sm-7/custom checkbox) and form close button(col-sm-1/a tag) in-row.

But it rendered wrong like this on the custom checkbox(checkbox is in wrong place):

The codes for above are:

<link href="https://maxcdn.bootstrapcdn.com/bootswatch/4.0.0-beta.3/solar/bootstrap.min.css" rel="stylesheet" integrity="sha384-Jpv9vxZao0dlyvegpeTxSgc5cczNCOpcV5ihm8RQbrMo263QmC3Sf5HIMBfr+nqx" crossorigin="anonymous">

<div class="row-fluid">
  <div class="col-sm-1 float-right">
    <!-- Empty Career: Close form button -->
    <a class="btn btn-default float-right close-career">
      <i class="fas fa-times"></i>
    </a>
  </div>
  <div class="col-sm-2 float-left">
    <div class="form-group">
      <input type="text" name="career-__prefix__-since" class="form-control" placeholder="0000.0" id="id_career-__prefix__-since" />
    </div>
  </div>
  <div class="col-sm-2 float-left">
    <div class="form-group">
      <input type="text" name="career-__prefix__-until" class="form-control" placeholder="0000.0" id="id_career-__prefix__-until" />
    </div>
  </div>
  <div class="col-sm-7">
    <div class="form-group">
      <div class="custom-control custom-checkbox">
        <input type="checkbox" name="career-__prefix__-currently_employed" class="custom-control-input form-control float-left" id="id_career-__prefix__-currently_employed" />
        <label class="custom-control-label" for="id_career-__prefix__-currently_employed">
                Currently employed
        </label>
      </div>
    </div>
  </div>

since and until are float-left, and close button is float-right.

To look that correct, I added the class float-left to currently_employed, it look good but not clickable:

Changed code for that is:

<link href="https://maxcdn.bootstrapcdn.com/bootswatch/4.0.0-beta.3/solar/bootstrap.min.css" rel="stylesheet" integrity="sha384-Jpv9vxZao0dlyvegpeTxSgc5cczNCOpcV5ihm8RQbrMo263QmC3Sf5HIMBfr+nqx" crossorigin="anonymous">

<div class="row-fluid">
  <div class="col-sm-1 float-right">
    <!-- Empty Career: Close form button -->
    <a class="btn btn-default float-right close-career">
      <i class="fas fa-times"></i>
    </a>
  </div>
  <div class="col-sm-2 float-left">
    <div class="form-group">
      <input type="text" name="career-__prefix__-since" class="form-control" placeholder="0000.0" id="id_career-__prefix__-since" />
    </div>
  </div>
  <div class="col-sm-2 float-left">
    <div class="form-group">
      <input type="text" name="career-__prefix__-until" class="form-control" placeholder="0000.0" id="id_career-__prefix__-until" />
    </div>
  </div>
  <div class="col-sm-7 float-left">
    <div class="form-group">
      <div class="custom-control custom-checkbox">
        <input type="checkbox" name="career-__prefix__-currently_employed" class="custom-control-input form-control float-left" id="id_career-__prefix__-currently_employed" />
        <label class="custom-control-label" for="id_career-__prefix__-currently_employed">
                Currently employed
        </label>
      </div>
    </div>
  </div>

How could I make it both clickable and look good?

Answer 1

To fix this you must first put the entire thing into a .container or .container-fluid and then put that into a .row and into that row all your columns. And make sure you remove all your float classes such as float-right etc.

Then you just add the class order-sm-last to the first column and that's it!

The order-sm-last will move/re-order that first column (with the close button) to the last for screens that small (sm) or bigger. And for the smallest screens, the position of the first column will remain unchanged.

Here's the working code snippet (click the "run code snippet" button below and expand to full page):

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

<!-- Empty Career: Visible Fields -->
<div class="container-fluid mt-3">
    <div class="row">
        <div class="col-sm-1 text-right order-sm-last">
            <!-- Empty Career: Close form button -->
            <a class="btn btn-default close-career">
                <i class="fas fa-times"></i>
            </a>
        </div>
        <div class="col-sm-2">
            <div class="form-group">
                <input type="text" name="career-__prefix__-since" class="form-control" placeholder="0000.0" id="id_career-__prefix__-since" />
            </div>
        </div>
        <div class="col-sm-2">
            <div class="form-group">
                <input type="text" name="career-__prefix__-until" class="form-control" placeholder="0000.0" id="id_career-__prefix__-until" />
            </div>
        </div>
        <div class="col-sm-7">
            <div class="form-group">
                <div class="custom-control custom-checkbox">
                    <input type="checkbox" name="career-__prefix__-currently_employed" class="custom-control-input form-control" id="id_career-__prefix__-currently_employed" />
                    <label class="custom-control-label" for="id_career-__prefix__-currently_employed">
                        Currently employed
                    </label>
                </div>
            </div>
        </div>
    </div>
</div>