CODEWITHSUNDEEP
htmltwitter-bootstrapcss
vijayraj34
vijayraj34

Reputation: 2415

Bootstrap form-group elements spacing

I'm trying to reduce the gap between the form-group's checkbox and textbox. I have already tried the "text-right" but still not able to shrink the gap very close so that it becomes next to each other.

enter image description here

<form class="form-horizontal" role="form">

    <div class="form-group">
        <div class="col-xs-offset-2 col-xs-2 text-right">
            <div class="checkbox">
                <label><input type="checkbox"> Click to Check</label>
            </div>
        </div>
        <div class="col-xs-2">
            <input type="text" class="form-control" placeholder="Enter text">
        </div>
    </div>

<form>

Upvotes: 0

Views: 906

Answers (2)

starchild
starchild

Reputation: 496

Your input elements have been placed into adjacent column divs using class="col-xs-2". When using a bootstrap column layout, the width of the columns is flexible, and changes with the size of the window. This means that the observed distance between the input elements will be different for each user of your site.

If you want to control the distance between the input elements, it will be necessary to put them inside the same column, or abandon a column layout altogether.

Unless using a bootstrap inline-form, the input element will be styled to have width: 100%. This makes it take up the whole column, so it will appear on a new line. To prevent this, you will need to override the width style of the input element.

Upvotes: 2

Rohit
Rohit

Reputation: 196

Basic overview of Bootstrap is very important for this. col-xs-2 is getting the horizontal space of 1/12, and that's going to be fix untill you change the main .css files of bootstrap. But, that is not recommended.

Solution: Remove the text-right.

Upvotes: 1

Related Questions