CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Mike3355
Mike3355

Reputation: 12101

Putting a checkbox, label and input box next to each other

I am trying to put a checkbox, label and input box next to each other.

I separated it into divs and and put divs side-by-side.

I was able to get the buttons center but they are to close together which I am trying to fix too.

My question is how can I get <div class="col-centered border"> into a smaller border and put a checkbox, label and input box next to each other. In the end I want the buttons and all as a container.

html

<div class="col-centered border">

    <form>
        <div class="first">

            <div class="form-group">
                <input type="checkbox" class="form-check-input">
                <label for="ssn">SSN:</label>
                <input type="text" class="form-control-file" id="ssn" placeholder="Social Security Number">
            </div>

            <div class="form-group row">
                <input type="checkbox" class="form-check-input">
                <label for="lastname">Lastname:</label>
                <input type="text" class="form-control-file" id="lastname" placeholder="Password">
            </div>

            <div class="form-group row">
                <input type="checkbox" class="form-check-input">
                <label for="role">Role:</label>
                <input type="text" class="form-control-file" id="role" placeholder="Password">
            </div>
        </div>

        <div class="second">

            <div class="form-group row">
                <input type="checkbox" class="form-check-input">
                <label for="userId">User ID:</label>
                <input type="text" class="form-control-file" id="userId" placeholder="User Id">
            </div>

            <div class="form-group row">
                <input type="checkbox" class="form-check-input">
                <label for="office">Office</label>
                <input type="text" class="form-control-file" id="office" placeholder="Office">
            </div>

            <input type="checkbox">Include Subordinates
        </div>

        <div class="center-block lower-button">
            <div class="center-block">
                <button type="submit" class="btn btn-default btn-md left-button">Search</button>
                <button type="submit" class="btn btn-default btn-md right-button">Reset</button>
            </div>
        </div>

    </form>
</div>

css

.first {
    width: 100px;
    float: left;
    padding-left: 450px;
}
.second {
    width: 200px;
    float: right;
    padding-right: 950px;
}

.col-centered{
    padding-top: 30px;
    float: none;
    margin: 0 auto;
}

.btn-beside {
    position: center;
    left: 100%;
    top: 0;
    margin-left: -10px;
}

.lower-button{
    padding-top:250px;
    padding-left:575px;
}

.left-button{
    padding-right: -14px;
}
.form-group{
    text-align: center;
}

I am using bootstrap

Upvotes: 1

Views: 9303

Answers (1)

dokgu
dokgu

Reputation: 6050

Here's a Fiddle for you to take inspiration from.

HTML

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="input-group">
        <span class="input-group-addon">
          <input type="checkbox">
        </span>
        <span class="input-group-addon">
          <label for="tbox">My Label</label>
        </span>
        <input type="text" id="tbox" class="form-control">
      </div>
    </div>
  </div>
</div>

As per the official documentation for Bootstrap.

Upvotes: 4

Related Questions