Reputation: 2467

Make containers of different sizes align correctly in bootstrap

I have a blog site that uses bootstrap to write and submit posts too an index page.

Obviously with varying thumbnail sizes, they are are going to be different lengths unless a standard image size is used.

This is what it would look like standard:

Here's what it looks like when one is longer than the other:

I would like to make it so that blog post in the very bottom left post is moved up towards the top left post.

Here's the html I used:

<section>
    <div class="container">
        <div class="col-md-8">
        <div class="col-md-6">
            <div class="thumbnail">
            <img src="img/thumbnailbig.png" alt="...">
            <div class="caption">
                <h3>Thumbnail label</h3>
                <h4>Written by LCBradley3k</h4>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
              <p><a href="show.html" class="btn btn-primary btn-block" role="button">Read More</a></p>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="thumbnail">
        <img src="img/thumbnailbig.png" alt="...">
        <div class="caption">
          <h3>Thumbnail label</h3>
          <h4>Written by LCBradley3k</h4>
          <p>Lorem Ipsum is simply dummy text o</p>
          <p><a href="show.html" class="btn btn-primary btn-block" role="button">Read More</a></p>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="thumbnail">
        <img src="img/thumbnailbig.png" alt="...">
        <div class="caption">
          <h3>Thumbnail label</h3>
          <h4>Written by LCBradley3k</h4>
          <p>Lorem Ipsum is simply dummy text o</p>
          <p><a href="show.html" class="btn btn-primary btn-block" role="button">Read More</a></p>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="thumbnail">
        <img src="img/thumbnailbig.png" alt="...">
        <div class="caption">
          <h3>Thumbnail label</h3>
          <h4>Written by LCBradley3k</h4>
          <p>Lorem Ipsum is simply dummy text o</p>
          <p><a href="show.html" class="btn btn-primary btn-block" role="button">Read More</a></p>
        </div>
      </div>
    </div>

  </div>
  <div class="col-md-4">
    <div class="list-group">
      <a href="#" class="list-group-item active"><span class="badge">14</span>
        Map Building
      </a>
      <a href="#" class="list-group-item"><span class="badge">14</span>Crafting</a>
      <a href="#" class="list-group-item"><span class="badge">28</span>Servers</a>
      <a href="#" class="list-group-item"><span class="badge">10</span>3d Modeling</a>
      <a href="#" class="list-group-item"><span class="badge">2</span>Clothing</a>
    </div>
  </div>

I know rows are commonly used in bootstrap but I took them out and everything is still the same. How would I achieve the effect of having the blog posts stay tightly together?

Upvotes: 1

Answers (1)

Ankita Khurana

Reputation: 21

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<style type="text/css">
.pc{


height: auto; 
  max-height: 20px;
  overflow: hidden; 


}
</style>





<section>
    <div class="container">
        <div class="col-md-8">
        <div class="col-md-6">
            <div class="thumbnail">
            <img src="img/thumbnailbig.png" alt="...">
            <div class="caption">
                <h3>Thumbnail label</h3>
                <h4>Written by LCBradley3k</h4>
                <p class="pc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
              <p><a href="show.html" class="btn btn-primary btn-block" role="button">Read More</a></p>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="thumbnail">
        <img src="img/thumbnailbig.png" alt="...">
        <div class="caption">
          <h3>Thumbnail label</h3>
          <h4>Written by LCBradley3k</h4>
          <p class="pc">Lorem Ipsum is simply dummy text o</p>
          <p><a href="show.html" class="btn btn-primary btn-block" role="button">Read More</a></p>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="thumbnail">
        <img src="img/thumbnailbig.png" alt="...">
        <div class="caption">
          <h3>Thumbnail label</h3>
          <h4>Written by LCBradley3k</h4>
          <p class="pc">Lorem Ipsum is simply dummy text o</p>
          <p><a href="show.html" class="btn btn-primary btn-block" role="button">Read More</a></p>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="thumbnail">
        <img src="img/thumbnailbig.png" alt="...">
        <div class="caption">
          <h3>Thumbnail label</h3>
          <h4>Written by LCBradley3k</h4>
          <p class="pc">Lorem Ipsum is simply dummy text o</p>
          <p><a href="show.html" class="btn btn-primary btn-block" role="button">Read More</a></p>
        </div>
      </div>
    </div>

  </div>
  <div class="col-md-4">
    <div class="list-group">
      <a href="#" class="list-group-item active"><span class="badge">14</span>
        Map Building
      </a>
      <a href="#" class="list-group-item"><span class="badge">14</span>Crafting</a>
      <a href="#" class="list-group-item"><span class="badge">28</span>Servers</a>
      <a href="#" class="list-group-item"><span class="badge">10</span>3d Modeling</a>
      <a href="#" class="list-group-item"><span class="badge">2</span>Clothing</a>
    </div>
  </div>
</body>
</html>

Upvotes: 2

Make containers of different sizes align correctly in bootstrap

Answers (1)

Related Questions