Implementing the main content

Moving on, we will implement the main content in the middle of the page. This content will hold the feeds while allowing new tweets.

We need to create the input to send a new message. To do this, create the following HTML code at the div#main element:

<div id="main" class="col-sm-12 col-md-6">
  <div id="main-card" class="card">
    <form id="new-message">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="What is happening?">
        <span class="input-group-addon">
          <span class="glyphicon glyphicon-camera" aria-hidden="true"></span>
        </span>
      </div>
    </form>
  </div>
</div>

For that, we created a form, again making use of input groups, icons, and cards. Can you see the ease provided by Bootstrap again? We just placed the elements with the right classes and everything went perfect. The next CSS takes place with some rules...