title: using bootstrap splitting the page to two vertical space
body: <p>I am trying to split the page into two and I want to do it horizontally using bootstrap: The top 1/3 of the page and bottom part the rest. Once it split it bottom part I want to get 4 columns. </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Tornado Chat Demo&lt;/title&gt;
      &lt;link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /&gt;
      &lt;link rel="stylesheet" href="{{ static_url("chat.css") }}" type="text/css"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;nav class="navbar navbar-inverse navbar-fixed-top"&gt;
        &lt;div class="container-fluid"&gt;
          &lt;div class="navbar-header"&gt;
            &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&gt;
              &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;/button&gt;
            &lt;a class="navbar-brand" href="#"&gt;Project name&lt;/a&gt;
          &lt;/div&gt;
          &lt;div id="navbar" class="navbar-collapse collapse"&gt;
            &lt;ul class="nav navbar-nav navbar-right"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Dashboard&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Settings&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Profile&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Help&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
            &lt;form class="navbar-form navbar-right"&gt;
              &lt;input type="text" class="form-control" placeholder="Search..."&gt;
            &lt;/form&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/nav&gt;    
      &lt;div class="container"&gt;
        &lt;div class="row"&gt;
          &lt;div id="body"&gt;
            &lt;div id="inbox"&gt;
              {% for message in messages %}
                {% module Template("message.html", message=message) %}
              {% end %}
            &lt;/div&gt;
            &lt;div id="input"&gt;
              &lt;form action="/a/message/new" method="post" id="messageform"&gt;
                &lt;table&gt;
                  &lt;tr&gt;
                    &lt;td&gt;&lt;input name="body" id="message" style="width:500px"&gt;&lt;/td&gt;
                    &lt;td style="padding-left:5px"&gt;
                      &lt;input type="submit" value="{{ _("Post") }}"&gt;
                      &lt;input type="hidden" name="next" value="{{ request.path }}"&gt;
                      {% module xsrf_form_html() %}
                    &lt;/td&gt;
                  &lt;/tr&gt;
                &lt;/table&gt;
              &lt;/form&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt; &lt;!-- chat textbox closer --&gt;
      &lt;div class="clearifx"&gt;&lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-3"&gt;
            &lt;p&gt; Can I see this &lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="col-md-3"&gt;
            Column2
            &lt;p&gt; Can I see this &lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="col-md-3"&gt;
            &lt;p&gt; Can I see this &lt;/p&gt;
            Column3
          &lt;/div&gt;
          &lt;div class="col-md-3"&gt;
            &lt;p&gt; Can I see this &lt;/p&gt;
            Column4
          &lt;/div&gt;
      &lt;/div&gt;     
      &lt;/div&gt;&lt;!-- container closer --&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="{{ static_url("chat.js") }}" type="text/javascript"&gt;&lt;/script&gt;   
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>But the form/input shows up in the bottom. How can I make sure the input and its responses stays in the top potion of the page and bottom gets split to 4 equal columns using bootstrap. </p>