Ensure that containers of varying sizes are arranged properly using Bootstrap

I run a blog site that utilizes bootstrap for creating and posting content on an index page.

Given the varying thumbnail sizes, there may be differences in length unless a standard image size is adopted.

Here's how it would appear with a standard size: https://i.sstatic.net/vE97h.png

And here's what happens when one thumbnail is taller than the other: https://i.sstatic.net/ia2O0.png

I wish to align the blog post at the bottom left corner with the ones at the top left corner.

Below is the HTML code I implemented:

<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>
            <!-- Additional col-md-6 divs here -->
                    
        </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>
    </div>

I understand that rows are typically used in bootstrap, but even after removing them, the layout remains unchanged. How can I ensure that the blog posts stay close together without gaps?

htmlcsstwitter-bootstrap

Answer №1

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adding a disabled internal Style node to the HTML5 DOM: A simple guide

According to this, the style tag can be turned off using the disabled attribute. I attempted the following: <head> <style>body { color: black; }</style> <style disabled>body {color: red; }</style> </head> <bo ...

javascriptcsshtml

Generate a JSON (Jquery) structured table matrix outlining various roles and corresponding permissions such as read, write, delete, and write special

I would like to create a table matrix that displays roles and permissions (read, write, delete, write special) using jQuery with JSON data. The table should contain checkboxes for each permission type, and the checkboxes for read, write, delete, and write ...

javascriptjqueryhtmljson

transforming a table into a stylized CSS design

Seeking assistance in converting a table into CSS as I am new to CSS: <table dir="ltr" width="500" border="0" align="center"> <caption><font face="Helvetica">Movies</font></caption> <colgroup width="50%" /> ...

htmlcss

Resolving the Complete Cover Background Image problem

My current website has a full cover background image implemented using the following code: #back{ /* #back is a div */ position:absolute; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; backgroun ...

cssbackground-image

Next.js and Material UI - issues with dynamic styles not functioning

I recently started using Next JS in combination with Material UI, following the example project setup provided in the documentation on Github: https://github.com/mui-org/material-ui/tree/master/examples/nextjs My main objective is to utilize Material UI&a ...

javascriptcssmaterial-uinext.js

Obtain the input elements and attach a click event to them

I have a form utilizing Bootstrap with three elements. When the button is clicked, another line with three elements is dynamically added. <div class="row align-items-center mb-2 mt-2 ms-1 "> <div class="col-5 ps-1 pe-1"> ...

javascripthtmljquery

What is the best way to shift an image within a div using CSS?

I am currently facing a challenge with moving an image inside a div element. I need to adjust the image by 50 pixels down and 50 pixels left, but I'm having difficulty figuring out how to do this in CSS. I am struggling to find the correct code to con ...

htmlcss

Tips for stopping the textarea from moving around as you type and avoid it hitting the bottom of the page: Utilize JQuery and

As I type into the auto-sizing textarea, the text runs to the bottom of the page and causes it to dance uncontrollably with each key press. This forces me to constantly scroll down to see what's happening. How can I prevent this page dancing and keep ...

javascriptjqueryhtmlcss

Basic animation feature malfunctioning

So, I'm really new to this whole HTML5 canvas thing and I'm trying to make a pixel move across the screen with an additive tail behind it. The idea is for the tail to scroll away once it reaches a certain point while the pixel continues moving. I ...

javascripthtmldhtml

What could be causing my right-floating elements to shift more towards the left with each occurrence?

After following a todo list tutorial, everything was running smoothly until I decided to add some styling to it. I placed a Font Awesome trash can icon inside a button with the class "remove." Essentially, I removed all the styles from the button, leaving ...

javascripthtmlcssbootstrap-4positioning

Is the alert message box popping up repeatedly?

html: <div class="box"> <div><p>Hello World</p></div> </div> <input type="button" id="add" value="Add" /> jquery: $(document).ready(function(){ var count = 0; $("#add").click(function(){ $(".box").ap ...

jqueryhtml

CSS trick for stylish arrow placement on top of a slide

Hey there! This is my first time navigating through the slick carousel functionality. I'm currently facing a challenge with adjusting the positioning of the arrow within the slider. My goal is to have the arrow displayed at the top level just like the ...

htmlcsssliderpositionslick.js

Instructions for implementing tooltips on a pie chart slice when hovering with the mouse pointer, using the canvas

var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var cw = canvas.width; var ch = canvas.height; ctx.lineWidth = 2; ctx.font = '14px verdana'; var PI2 = Math.PI * 2; var myColor = ["Gr ...

javascriptjqueryhtmlcanvas

Functionality of local data storage

I'm currently exploring the capabilities of the localStorage feature. Let's say I have a large JSON object stored using localStorage. I need to share this data with the testing team for review. However, if I try to display the stored data on an H ...

javascriptjqueryjsonhtmllocal-storage

The server attempted to transfer the resource as an image, but it was interpreted with the MIME type text/html

Since updating to the new version of go appengine, I've been having trouble loading images into a page. It used to be straightforward before, but now when I compile the code and launch the app in the browser, I get this message: Resource interprete ...

htmlgoogle-app-enginego

Spacing between products in Woocommerce product list

Welcome to my website! Check it out here: I am facing an issue with a long margin at the bottom of my woocommerce product list. I have tried using CSS to change it as shown below: .woocommerce .products ul, .woocommerce ul.products { margin-bot ...

csswordpresswoocommerce

Ways to position a button at the bottom of a div and beneath an image

Hey there, I have a little issue that seems to be causing me trouble. My brain just can't seem to come up with the solution. Here's the HTML code: #div { position: fixed; top: 10%; left: 20%; right: 20%; bottom: 10%; ...

htmlcss

Ways to align one child to the end without affecting any other elements

I'm attempting to position only div3 at the flex-end of .app. If I use this code: .app { display: flex; flex-direction: column; height: 100vh; justify-content: flex-end; } Div3 goes where I want it, but everything else also moves dow ...

htmlcss

Angular component: Placing icons on the right side of a mat-chip element

My mat-chip contains content and a cancel icon, but I am having trouble getting the cancel icon to float to the right consistently. Despite setting a fixed width for the mat-chip, the cancel icon is not aligning properly no matter what CSS techniques I t ...

cssangularangular-materialangular-material-5

Div vanishes once SVG Gaussian blur is applied

I'm attempting to add a Gaussian blur effect to an element that contains some child nodes with content. In Chrome, I successfully applied the blur using the following style: -webkit-filter: blur(2px); Unfortunately, Firefox does not support thi ...

htmlcssfirefoxsvgsvg-filters