CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Musical Shore
Musical Shore

Reputation: 1381

How can I tightly align a checkbox with a text input form control using bootstrap?

I am trying to align a checkbox with a text input. I would like the text box to be a form control, so that it right aligns with the other inputs on the page. However, if I do this, it becomes a block element and there is a line break after the checkbox. If I don't use the form-control class, the input box isn't wide enough and it doesn't look right compared to the rest of the form. If I use the grid layout, there is too much space in between the checkbox and the text box.

The image below represents the following code:

<div>
    <input type="checkbox" />
    <input type="text" placeholder="Enter your own vendor name here ..." class="form-control" />
</div>

chextbox

Upvotes: 3

Views: 16397

Answers (4)

LSerni
LSerni

Reputation: 57453

You could use input-group-addon and style the checkbox as a label for the input.

For more precise control, but less clean, you can add some CSS to the controls themselves:

#inputText {
      margin-left: 20px;
}
#inputCheckbox {
    position: absolute;
    top: 0px;
    margin-top: 0px;
}

HTML (with grid system):

<div class="col-md-2">XX</div>
<div class="col-md-8">
    <input type="text" placeholder="Enter your own vendor name here ..."
       class="form-control" id="inputText" />
    <input type="checkbox" class="pull-left" id="inputCheckbox" />
</div>
<div class="col-md-2">XX</div>

Upvotes: 0

choz
choz

Reputation: 17898

Simple class like form-inline and form-group would help you on this.

<div class="form-inline">
    <div class="form-group">
        <input type="checkbox"/>
        <input type="text" placeholder="Enter your own vendor name here ..." class="form-control" />
    </div>
</div>

Fiddle: http://jsfiddle.net/2yao3x5r/

However, from bootstrap documentation

This only applies to forms within viewports that are at least 768px wide

Besides, I have a suggestion if your checkbox belongs to your input to use input-group

<div class="input-group">
  <span class="input-group-addon">
    <input type="checkbox" aria-label="...">
  </span>
  <input type="text" class="form-control" aria-label="...">
</div>

If you have a smaller than 768px viewport, I suggest to use .row and .col modifier. e.g.

<div class="row">
    <div class="col-xs-2 col-sm-2">
        <input type="checkbox"/>
    </div>
    <div class="col-xs-10 col-sm-10">
        <input type="text" placeholder="Enter your own vendor name here ..." class="form-control" />
    </div>
</div>

Upvotes: 2

vanburen
vanburen

Reputation: 21663

You could use the Input-Group Add-on component for checkboxes/radios. And you can always style the input-group box if it doesn't work for your specific form setup.

See example Snippet.

body {
  padding-top: 50px;
}
.input-group-addon.my-addon {
  background: white;
  padding-top: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="well">Default</div>
<div class="container">
  <div class="input-group"> <span class="input-group-addon">
        <input type="checkbox" aria-label="...">
      </span>

    <input type="text" class="form-control" aria-label="...">
  </div>
</div>
<hr>
<div class="well">Added Styling</div>
<div class="container">
  <div class="input-group"> <span class="input-group-addon my-addon">
        <input type="checkbox" aria-label="...">
      </span>

    <input type="text" class="form-control" aria-label="...">
  </div>
</div>

Upvotes: 1

Ray
Ray

Reputation: 777

You can use form-inline or form-horizontal

or

You have to add "display:inline-block" to your input controls

Upvotes: 0

Related Questions