CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
aman
aman

Reputation: 6242

Bootstrap 3: Alignment issues while creating form

I am having some alignment issues while creating a form using bootstrap 3. I want to align my form towards left so that my form fields start from the left side. But with what I have is that there is lot of space on the left side of the form fields. I tried using "pull left" & margin css but it does not work.

Also another thing which I am not able to resolve is that it is somehow adding a scroll bar at the bottom of the screen, even though I dont have any data.

I have created a codepen for this at: https://codepen.io/anon/pen/gKNZwz

Not putting the entire code here as its a lot.

<div class="form-horizontal">
  <div class="form-group pull-left" style="">
  </div>
</div>

Would appreciate inputs.

Upvotes: 0

Views: 56

Answers (1)

Jismon Thomas
Jismon Thomas

Reputation: 893

you have negative margin on one of the classes, you have to remove that to avoid the horizontal scroll bar see the screenshot below look the margin left and right of -15px

in order to reduce the space from left, you can make your label text to left align or make your label class .col-sm-1, 

 .form-horizontal .form-group {
  margin-left:0;
  margin-right:0;
}

.form-horizontal .control-label {
  text-align: left;
}

I have added an updated pen, see if that helps you:

https://codepen.io/anon/pen/dKBaYq

Upvotes: 1

Related Questions