How do I reduce width of input elements with bootstrap

Question

I am losing my mind, whatever I do my layouts keeps doing weird things.

I have a simple form code:

<div class="center jumbotron">
  <%= form_for(@user, url: signup_path) do |f| %>
        <%= render 'shared/error_messages' %>
        <%= f.label t(:email) %>
        <%= f.text_field :email, class: 'form-control' %>
        <%= f.label t(:password) %>
        <%= f.password_field :password, class: 'form-control' %>
        <%= f.label t(:first_name) %>
        <%= f.text_field :first_name, class: 'form-control' %>
        <%= f.label t(:last_name) %>
        <%= f.text_field :last_name, class: 'form-control' %>
        <%= f.label t(:student_id) %>
        <%= f.text_field :student_id, class: 'form-control' %>
        <%= f.submit t(:sign_up_button), class: 'btn btn-lg btn-primary' %>
  <% end %>
</div>

Which looks like All I want to do is reduce width of inputs to about 25% (or 3 cols) while keeping responsive layout.

For example, when I try to wrap whole form in div with form-control class, then wrap every input+label in div with row class and another div with col-xs-3 class, inputs become inline and scale instead of placing one under another.

Answer 1

I expect that you probably were doing it correctly but you need to give each of the columns an offset so that it doesn't make each of them inline and use rows. See the bootstrap documentation here: http://getbootstrap.com/css/#grid-offsetting

It should probably look like

<div class="row">
  <div class="col-md-6 col-md-offset-3">
    <%= f.label t(:email) %>
    <%= f.text_field :email, class: 'form-control' %>
  </div>
</div>

etc...

Answer 2

You can Try this Code for one element in your form

<div class="OneFormElement">
<div class="row">
<div Class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<%= f.label t(:email) %>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
 <%= f.text_field :email, class: 'form-control' %>
</div>
</div>
</div>

Answer 3

Full answer is @Kasunjith And @Stephen answer's combined. @Kasunjith 's answer granted proper placement and @Stephen 's made sure that it's responsive on all devices.

Final code looks like this:

<div class="center jumbotron">
  <%= form_for(@user, url: signup_path) do |f| %>
        <%= render 'shared/error_messages' %>
        <div class="row">
          <div class="col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-12">
            <%= f.label t(:email) %>
            <%= f.text_field :email, class: 'form-control' %>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-12">
            <%= f.label t(:password) %>
            <%= f.password_field :password, class: 'form-control' %>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-12">
            <%= f.label t(:first_name) %>
            <%= f.text_field :first_name, class: 'form-control' %>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-12">
            <%= f.label t(:last_name) %>
            <%= f.text_field :last_name, class: 'form-control' %>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-12">
            <%= f.label t(:student_id) %>
            <%= f.text_field :student_id, class: 'form-control' %>
          </div>
        </div>
        <%= f.submit t(:sign_up_button), class: 'btn btn-lg btn-primary' %>
  <% end %>
</div>

Answer 4

Here is the link to Bootstrap documentation. custom column sizing

From the documentation: Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

Your code can be rewritten as follows

<div class="center jumbotron">
    <%= form_for(@user, url: signup_path) do |f| %>
        <%= render 'shared/error_messages' %>
           <div class="row">
             <div class="col-md-3"> <!-- this can be changed as per your requirement -->
               <%= f.label t(:email) %>
               <%= f.text_field :email, class: 'form-control' %>
             </div>
             <div class="col-md-3"> 
               <%= f.label t(:password) %>
               <%= f.password_field :password, class: 'form-control' %>
             </div>
           </div>
           <%= f.submit t(:sign_up_button), class: 'btn btn-lg btn-primary' %>
    <% end %>
</div>