Twitter Bootstrap Question posted in

Twitter bootstrap – How to convert input field section to Bootstrap?

I have following code where there is an input and area to show up the input. History of the input get shown above the form/input area. I have used a bootstrap panel to decorate it but input field doesn’t have the bootstrap styles. I tried to use example form such as search but then I couldn’t get my form to work correctly with the parameters that I am passing to my back-end. How can I convert it to get the Twitter bootstrap styles:

Bootstrap files:

<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://getbootstrap.com/dist/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="http://getbootstrap.com/assets/js/ie-emulation-modes-warning.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="row-fluid" style="max-height:500px;overflow-y: auto;">
  <div class="panel panel-success">
    <div class="panel-heading">History</div>
      <div class="panel-body">
        {% for message in messages %} {% module Template("message.html", message=message) %} {% end %}
      </div>
    </div>  
</div>   


<div class="row-fluid">
        <form action="/a/message/new" method="post" id="messageform" class="span12">
          <table class="table table-condensed">
              <tr>
                  <td>
                      <input name="body" id="message" style="width:1000px">
                  </td>
                  <td>
                      <input type="submit" value="{{ _(" Post ") }}">
                      <input type="hidden" name="next" value="{{ request.path }}">{% module xsrf_form_html() %}
                    </td>
              </tr>
          </table>
        </form>
</div>
Tags:

2

Answers


  1. 0

    In bootstrap rows require column so you’ll need some of those and you won’t want to use tables unless you actually have tabular data:

        <div class="row-fluid">
          <div class="col-md-8 col-md-offset-2"> 
            <form class="form-inline" action="/a/message/new" method="post" id="messageform">
                  <input type="hidden" name="next" value="{{ request.path }}">{% module xsrf_form_html() %}
                 <div class="form-group">
                   <label for="message">Name</label>
                   <input type="text" class="form-control" name="message" id="message" placeholder="Message here...">
                 </div>
                  <input class="btn btn-default" type="submit" value="{{ _(" Post ") }}">
            </form>
        </div>
    </div>

    Your form fields should have the same value for both name and id and using “body” is a poor choice because of the <body> tag.

    Login or Signup to reply.
  2. 0

    Here are a few different ways of doing this. Note that row-fluid does not exist in Bootstrap3 along with span12 (it’s col-*-12 etc.) See Grid Options. And a standard input class is form-control See Docs.

    See working example Snippets.

    /**For History 1 Only**/
#messageform {
  margin-top: 10px;
}
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="panel panel-success">
    <div class="panel-heading">History 1</div>
    <div class="panel-body">{% for message in messages %} {% module Template("message.html", message=message) %} {% end %}
      <form action="/a/message/new" method="post" id="messageform">
        <div class="form-group">
          <div class="input-group">
            <input name="body" id="message" class="form-control" value="Something" /> <span class="input-group-btn">
                        <button class="btn btn-default" type="button" value="{{ _(' Post ')_ }}">Submit</button>
                      </span>

          </div>
          <input type="hidden" name="next" value="{{ request.path }}" />
          <!--{% module xsrf_form_html() %}-->
        </div>
      </form>
    </div>
  </div>
</div>
<hr>
<div class="container">
  <div class="panel panel-success">
    <div class="panel-heading">History 2</div>
    <div class="panel-body">{% for message in messages %} {% module Template("message.html", message=message) %} {% end %}</div>
  </div>
  <form action="/a/message/new" method="post" id="messageform2">
    <div class="form-group">
      <div class="input-group">
        <input name="body" id="message" class="form-control" value="Something" /> <span class="input-group-btn">
                        <button class="btn btn-default" type="button" value="{{ _(' Post ')_ }}">Submit</button>
                      </span>

      </div>
      <input type="hidden" name="next" value="{{ request.path }}" />
      <!--{% module xsrf_form_html() %}-->
    </div>
  </form>
</div>
<hr>
<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <div class="panel panel-success">
        <div class="panel-heading">History 3</div>
        <div class="panel-body">{% for message in messages %} {% module Template("message.html", message=message) %} {% end %}</div>
      </div>
    </div>
    <form action="/a/message/new" method="post" id="messageform3">
      <div class="form-group">
        <div class="col-sm-9">
          <input name="body" id="message" class="form-control" value="Something" />
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-3">
          <button type="submit" class="btn btn-default btn-block" value="{{ _(' Post ')_ }}">Submit</button>
          <input type="hidden" name="next" value="{{ request.path }}">
          <!--{% module xsrf_form_html() %}-->
        </div>
      </div>
    </form>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search