Twitter Bootstrap Question posted in

Twitter bootstrap – HTML elements for timeline posts

In an web application, i am displaying posts from other users in an individual user’s homepage. Each post will contain the thumbnail profile picture of the person the post is from, their name on a paragraph, text contents and then a reply box and button. I am trying to do this by bootstrap’s grid system but not achieving the desired effect. I want to mimic the tweets in twitter home page, but in my case there is a big gap in between the profile picture and the other column.

<div class="container" >
    <ul id="newsfeed">
        <li>

            <div class="row">

                    <div class="col-sm-2">
                        <img src="someimage.png" class="img-thumbnail" alt="Some Image" width="60" height="60">
                    </div>
                    <div class="col-sm-4">
                        <p>9gag@9gag</p>
                        <p>This is me</p>
                        <p>twitted at 12:30pm GMT6+</p>
                    </div>
            </div>

        </li>
    </ul>
</div>
Tags:

2

Answers


  1. 0

    Your .col-sm-2 is wider than your thumbnail image you can do two things.

    1) You can can use .col-sm-1 for the image container.

    <div class="container" >
    <ul id="newsfeed">
        <li>

            <div class="row">

                    <div class="col-sm-1 narrow">
                        <img src="someimage.png" class="img-thumbnail" alt="Some Image" width="60" height="60">
                    </div>
                    <div class="col-sm-4 narrow">
                        <p>9gag@9gag</p>
                        <p>This is me</p>
                        <p>twitted at 12:30pm GMT6+</p>
                    </div>
            </div>

        </li>
    </ul>
</div>

    2) You can leave it as is but add bootstraps helper class pull-right to your img tag.

    <div class="container" >
    <ul id="newsfeed">
        <li>

            <div class="row">

                    <div class="col-sm-2">
                        <img src="someimage.png" class="img-thumbnail pull-right" alt="Some Image" width="60" height="60">
                    </div>
                    <div class="col-sm-4 narrow">
                        <p>9gag@9gag</p>
                        <p>This is me</p>
                        <p>twitted at 12:30pm GMT6+</p>
                    </div>
            </div>

        </li>
    </ul>
</div>

    CODEPEN DEMO

    Login or Signup to reply.
  2. 0

    You could use the Media Object component for this (and possibly without any additional CSS as far as structure is concerned).

    See working example Snippet.

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="jumbotron">
  <div class="container">
    <h1>Posts</h1>

  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col-sm-offset-3 col-sm-6">
      <div class="media">
        <div class="media-left">
          <a href="#">
            <img class="media-object" src="http://placehold.it/75x75/000/fff" alt="...">
          </a>

        </div>
        <div class="media-body">
          <p>tweet@tweet</p>
          <p>Some Tweet</p>
          <p>twetted at 12:30pm GMT6+</p>
        </div>
        <form>
          <div class="input-group input-group-sm">
            <input type="text" class="form-control" placeholder="Reply..."> <span class="input-group-btn">
        <button class="btn btn-default" type="button">Reply</button>
      </span>

          </div>
        </form>
      </div>
      <div class="media">
        <div class="media-body">
          <p>tweet@tweet</p>
          <p>Some Tweet</p>
          <p>twetted at 12:30pm GMT6+</p>
        </div>
        <div class="media-right">
          <a href="#">
            <img class="media-object" src="http://placehold.it/75x75/f00/fff" alt="...">
          </a>

        </div>
        <form>
          <div class="input-group input-group-sm">
            <input type="text" class="form-control" placeholder="Reply..."> <span class="input-group-btn">
        <button class="btn btn-default" type="button">Reply</button>
      </span>

          </div>
        </form>
      </div>
      <div class="media">
        <div class="media-left">
          <a href="#">
            <img class="media-object" src="http://placehold.it/75x75/ff0/fff" alt="...">
          </a>

        </div>
        <div class="media-body">
          <p>tweet@tweet</p>
          <p>Some Tweet</p>
          <p>twetted at 12:30pm GMT6+</p>
        </div>
        <form>
          <div class="input-group input-group-sm">
            <input type="text" class="form-control" placeholder="Reply..."> <span class="input-group-btn">
        <button class="btn btn-default" type="button">Reply</button>
      </span>

          </div>
        </form>
      </div>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search