Работа с бутстрапом подразумевает, что все элементы верстаются в "сетку". Сетка - это скажем так область экрана, мысленно разбитая на 12 вертикальных столбцов.
Возьмем для примера такую структуру:
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-6 col-sm-2"></div>
</div>
</div>
Для ширины экрана (≥1200px) ширина container
будет равна 1170px, для (≥992px) - 970px, для (≥768px) - 750px. Я всё же дам ссылку на Grid options. row
- это строка, в которую будут набиваться блоки. А в строке в моём примере один блок, который занимает всю ширину container
на широких экранах, на средних экранах - половину ширины, на малых экранах - 1/6 часть (2 колонки из 12).
В вашем случае предполагаю, что элементы формы сверстаны не в сетке бутстрап (без указания, сколько колонок сетки должен занимать каждый элемент). Должно быть что-то в этом роде:
<form>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input class="form-control">
</div>
</div>
</div>
<div class="row">
<textarea class="form-control"></textarea>
</div>
</form>
А чтобы понять почему именно так, я пожалуй дам ссылку еще раз на Forms.
И еще можно поиграться с онлайн-конструктором и посмотреть, как верстают другие вот тут http://www.bootply.com/