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>
2
Answers
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:
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.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.