O'Reilly logo

Bootstrap 4 – Responsive Web Design by Jason Marah, Benjamin Jakobus, Matt Lambert, Silvio Moreto

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required