Remove vertical spacing from rows of thumbnail grid in bootstrap

I have been attempting to eliminate the vertical space between rows in a thumbnail grid, similar to how I did for horizontal spacing, but have not been successful.

.gutter-0.row {
    margin-right: 0;
    margin-left: 0;
    /* not working */
    margin-top: 0; 
    margin-bottom: 0;
}
.gutter-0 > [class^="col-"], .gutter-0 > [class^=" col-"] {
    padding-right: 0;
    padding-left: 0;
    /* not working */
    padding-top: 0;
    padding-bottom: 0;
}

HTML

    <div class="row gutter-0">
        <div class="col-md-4">
            <div class="thumbnail">
                <img src="http://placehold.it/200x200" alt="">
            </div>
        </div>
        <div class="col-md-4">
            <div class="thumbnail">
                <img src="http://placehold.it/200x200" alt="">
            </div>
        </div>
        <div class="col-md-4">
            <div class="thumbnail">
                <img src="http://placehold.it/200x200" alt="">
            </div>
        </div>
    </div>
    <div class="row gutter-0">
        <div class="col-md-4">
            <div class="thumbnail">
                <img src="http://placehold.it/200x200" alt="">
            </div>
        </div>
        <div class="col-md-4 col-sm-4">
            <div class="thumbnail">
                <img src="http://placehold.it/200x200" alt="">
            </div>
        </div>
        <div class="col-md-4 col-sm-4">
            <div class="thumbnail">
                <img src="http://placehold.it/200x200" alt="">
            </div>
        </div>

    </div>

Bootply

Is there another way to achieve this? Thank you

htmlcsstwitter-bootstrap

Answer №1

There seems to be some unnecessary margin at the bottom of the "thumbnail" classes.

To get rid of it, you can simply include the following in your CSS:

.thumbnail {
  margin-bottom: 0;
}

Bootply

Answer №2

In order to remove the 20px bottom margin from the .thumbnail class, you can either reset it completely or apply the following style:

.thumbnail{
  display: table-cell;
}

For a live example, check out this link: http://www.example.com/uHgPeZQojL

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

Switch or toggle between colors using CSS and JavaScript

Greetings for taking the time to review this query! I'm currently in the process of designing a login form specifically catered towards students and teachers One key feature I'm incorporating is a switch or toggle button that alternates between ...

javascriptjqueryhtmlcss

Discovering the maximum value in AngularJS using an expression (complete with a bug demonstration)

How can I set a maximum value for an input that can be either a numeric amount or a percentage? Is it possible to use ng-max to set the max value to 100 if the input is a percentage, and leave it blank if it's a numeric amount? I attempted the follo ...

angularjshtmlangularjs-ng-model

Using ReactJS to dynamically change styles based on state variables can sometimes cause CSS

Currently delving into the world of React. Learning about states/props and the art of dynamically altering elements. I've set up the component states like this: constructor(props) { super(props); this.modifyStyle = this.modifyStyle.bind(thi ...

javascripthtmlcssreactjsweb-frontend

Incorporate new styling elements into the parent component

Can someone explain why this particular CSS code is adding padding to all tables on the page instead of just the one with a specific class? CSS: .tableclass th, tr, td {padding: 8px;} HTML: <table class="tableclass> <th>Header Text</th&g ...

cssstylesparent

Submit a Bootstrap modal with AJAX and receive blank $_POST data

After setting up my modal form with pre-defined data, I encountered an issue when trying to submit it with ajax. The form.php script was receiving an empty $_POST array even though the submit button was being clicked. What could be causing this problem? & ...

phpjqueryajaxtwitter-bootstrap

Styling elements with inline-block in IE8

Although there are countless questions addressing this particular issue, allow me to provide more details: The Dilemma The situation is as follows: aside { display: inline-block; } section { display: inline-block; margin-left: 2em; } Here, the eleme ...

htmlcssinternet-explorer-8

Switch Button JavaScript Library

My project involves creating a mobile website with a simple interaction where clicking on a div opens another div underneath it. The HTML structure consists of two stacked divs, with the CSS for the bottom div initially set to 'none'. Using JavaS ...

javascriptcssbutton

Personalizing the fileTemplate selection in FineUploader

My English is not the best, so apologies in advance. I'm struggling to customize the FineUploader FileTemplate option. I don't want to use fineUploaderBasic; I want total customization. Initially, I managed to hide the file name and size after a ...

jqueryhtmlcssfine-uploader

Understanding the float property in CSS

Check out this CSS example: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Jenware | Personalized Gifts</title> <style type="text ...

htmlcssuser-interfaceweb

What is the best way to include a variable or literal as a value in styled components?

When it comes to managing various use cases, I always rely on props. However, I am currently facing a challenge in changing the border color of a styled input during its focus state. Is there a way to utilize props for this specific scenario? Despite my f ...

javascriptcssreactjstypescriptstyled-components

Show an HTML image with the file chosen through the FileDialog prompt

After spending about four hours searching for a method to display the image file chosen by FileDialog in a browser within an img tag, I came across various pages suggesting updating the src attribute of the img tag with the content of the file. However, th ...

javascripthtmlangulartypescript

Personalize the HTML <input> tag using the attribute type="file"

Within the React site, there is a field where users can select a file from their computer and view the file path. To achieve this functionality, I used an HTML input with type="file"... <div className="inline-flex w-full justify-between&q ...

htmlcssreactjsinputtailwind-css

Carousel component failing to initialize in Bootstrap

When working with the carousel-inner dynamic elements in a class <div class = "active item"><img ..></div> <div class = "item"><img ..></div> <div class = "item"><img..</div> Make sure to execute the fol ...

javascriptjquerytwitter-bootstrapcarousel

Is there a substitute for image cropping aside from the CSS clip property?

Looking to create an image gallery where thumbnails are cropped to 150px x 150px, but struggling with non-square rectangular images of various sizes. Adjusting width and height distorts the images. Are there alternative CSS or jQuery options for cropping ...

jquerycssgallerythumbnailscrop

Class-driven dynamic CSS

Recently, I came across a JSP code snippet that looks like this: <table id="mytable" cellspacing="0"> <tr data-depth="0" class="collapse level0"> <td></td> <td></td> <td></td> </tr> ////... /...// < ...

htmlcssjsp

Choose Default Value in Drop-Down List in AngularJS when Page Loads

Within the realm of Angularjs, there exists a DropDown: <select ng-model="category" ng-change="categoryChanged(category)" class="form-control" data-ng-options="category as category.name for category in categories"> <option value="">Se ...

javascriptjqueryhtmlangularjs

Choose a particular component from a snippet of a view

I am facing challenges with implementing a JavaScript function in a partial view. My objective is to validate the email input and display a message based on the validation result. The email field is located inside a partial view that is dynamically loade ...

javascriptjqueryhtmlruby-on-rails

Adjust the SVG to match the dimensions of the label, which may vary in both

How can I efficiently resize and embed SVG images into checkbox labels without using a viewbox attribute? Each SVG varies in height and width, making it challenging to find the best solution. .check__button { display: none; } .check__icon { display ...

htmlcsssvg

``I am experiencing an issue where Bootstrap fails to load when my HTML files are stored within

My first web app using Spring and Thymeleaf hit a snag when I stored my HTML files in the "templates" folder as required by Thymeleaf. Suddenly, my bootstrap, JS, CSS, and other resources stopped working. Despite moving the CDN links to the header and tryi ...

htmlintellij-ideabootstrap-4thymeleaf

Utilizing Robot Framework to select CSS attributes

The Selenium documentation provides an example of how to use Get Element Attribute: ${id}= Get Element Attribute css:h1 id However, I encountered a problem with this selector: ${VISIBILITY}= Get Element Attribute css:visibility mySidebar I ...

cssseleniumcss-selectorsrobotframework