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?

Please post the **complete** HTML *output* snippet. (remove other code) — WebDevBooster, Feb 14 '18 at 10:31
@WebDevBooster Edited. You mean without django templates right? I removed some white spaces. — 홍한석, Feb 14 '18 at 10:40
No, I mean HTML **output**. Visit the page in a browser, view code and copy the HTML from there. — WebDevBooster, Feb 14 '18 at 10:41
@WebDevBooster That is which is the part of the screenshot. Or whole html? — 홍한석, Feb 14 '18 at 10:43
*complete* code snippet that includes all of the relevant HTML that allows to reproduce your issue. — WebDevBooster, Feb 14 '18 at 10:45
Sorry, I don't get it exactly. I think the issue is about the presence or absence of class `float-left` in `div` tag with `col-sm-7` which is parent of checkbox input.. I import [bootswatch's solar theme](https://bootswatch.com/4/solar/bootstrap.min.css) and use them, no custom css for that part. Here is [the gist for whole HTML](https://gist.github.com/flavono123/07a401f4969dddeb372fe3dc24fac64d). Sorry again though you helping me. — 홍한석, Feb 14 '18 at 10:57

WebDevBooster · Accepted Answer · 2018-02-14T11:28:16.873

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>

Read the explanation I just added to my answer. Your `float` classes must be removed. — WebDevBooster, Feb 14 '18 at 11:23
My question was unverifiable.. Thanks for a lot, not just for fixing my case but also teaching for asking right and preventing to abuse `float`. I'll read this answer again and again to understand. — 홍한석, Feb 14 '18 at 12:02
Yes, normally, you want to avoid using any `float` with Bootstrap 4 because Bootstrap 4 is flexbox-based. Everything is much easier with flexbox. — WebDevBooster, Feb 14 '18 at 12:04
Here's a link to understand how the order classes work: https://getbootstrap.com/docs/4.0/layout/grid/#order-classes — WebDevBooster, Feb 14 '18 at 12:06

Align Bootstrap 4 custom form(checkbox)

1 Answers1