CODEWITHSUNDEEP
cssforms
Curunir
Curunir

Reputation: 1288

Bootstrap form row width

I'm trying to build a form looking like this: JSFIDDLE

Problem is that the row is much wider than the actual content, so the container get streched way to much.

Anyone got a clue on how to reduce the rows width to the actual content?

<div class="container" style="border: 1px solid black">
  <h2>Vertical (basic) form</h2>
  <form class="">

    <div class="form-group row">
      <div class="col-sm-3">
        <input type="email" class="form-control" id="email" placeholder="Enter email">
      </div>
      <div class="col-sm-3">
        <input type="passord" class="form-control" id="pwd" placeholder="Enter password">
      </div>
    </div>

    <div class="form-group row">
      <div class="col-sm-6">
         <textarea class="form-control" cols="5" maxLength="500" />
      </div>
    </div>




  </form>
</div>

Upvotes: 1

Views: 3017

Answers (1)

Syden
Syden

Reputation: 8625

Try this resizable fiddle, when you make the viewport wider the inputs should remain on their column size without filling the entire viewport row.

EDIT: .col classes would be bordered (if you don't want a border taking up all 12 columns as with .container class), .container will always occupy the full 12 column grid.

Like the picture below shows, you are using 6 columns (half the grid), so another 6 col element could go at it's right, this is why if you border the .container, it will always show all 12 column width.

enter image description here

Upvotes: 1

Related Questions