Could someone help me create a space similar to the one indicated in red below? I am working with bootstrap.
UPDATE: I am looking for something like this example, where there is always a consistent margin between columns regardless of their varying heights due to photos or descriptions.
It may not be achievable using CSS alone. I recommend trying out this JavaScript plugin that can achieve the desired effect: JavaScript Masonry
Trying to explain this might be a bit challenging, but I have prepared a demonstration on JSFiddle here.
Styling with CSS:
.container {
column-width: 100px;
column-gap: 5px;
border: 1px solid red;
margin: 5px auto;
}
#card {
padding: 10px 5px;
border: 1px solid black;
display: inline-block;
vertical-align: top;
column-break-inside: avoid;
background: white;
margin: 0 2px 15px;
}
Structure in HTML:
<div class="container">
<div id="card">
<img src="http://ecx.images-amazon.com/images/I/519zImiZraL._SL500_AC_SS100_.jpg">
</div>
<div id="card">
<img src="http://saigonexpres.com/wp-content/uploads/2016/06/Nokia-Asha-303-newshitechdigital-e1466994250562-100x75.png">
</div>
(more image cards...)
</div>
The key here lies in setting the column width and gap, along with adjusting the top margin of the cards appropriately. Experimenting with these settings can yield different outcomes. Best of luck!
Is there a way to reload a specific div using ajax:success without reloading the entire page within that div? $.ajax({ type: "GET", url: "http://192.168.2.210/sciAuthor1/personaldetails/cropImage", cache: false, success: function (respo ...
One of the challenges I encountered in Django was creating a custom template tag named text_field @register.inclusion_tag('form_field_tags/text_field.html') def text_field(field, prefix=None, field_type=None, attr=None, **kwargs): return { ...
After spending some time working with asp.net, I've run into a common issue of aligning objects with varying heights on the same row. For instance, I'm struggling to properly line up a search label, text field, and image button. What is the corre ...
Is there a way to customize the color of helperText in material-UI for highlighting errors in a TextField? I've been struggling to change the color of helperText with no success. I attempted using MuiFormHelperText-root-406 to add CSS styles, but it ...
I am in the process of developing a website for educational purposes while also honing my web programming skills. On this website, I have encountered some complicated terms that may be difficult for users to understand, so I want to implement a tooltip/mod ...
Here is a snippet of HTML code that I am working with: </td> <td valign=top bgcolor="#dcdcdc" class="camp"> <script>Oblog()</script>ID <br> <input ty ...
I have multiple non-local images that I want to use as background images for classes with a width of 500px and height of 330px. Even though these dimensions are specified in the CSS properties for the class, the background: url('http://www.example.com ...
My webpage currently has two columns, left and right. However, I want the right column to appear above the left one when the window size is reduced. Currently, as the window shrinks, the right column drops down below the left column instead of moving abov ...
Is there a way to automatically redirect users to Login2.html when selecting "TEAM" in the dropdown on Login1.html, using the values entered in Login1.html? Similarly, can we redirect them to the Premium page when they select "Premium"? I need a solution u ...
While working on my website, I encountered an issue where the text is being cut off at the bottom of the page. I could adjust the margins and resize images and text to fit within the page, but I would prefer to allow scrolling on the webpage. Can anyone pr ...
The videoSrc variable is not evaluating correctly images/{{videoSrc}}.mp4 When I write just videoSrc, it works fine. But when I concatenate it with other strings, it doesn't work. Check out this jsfiddle ...
I recently faced a challenge while attempting to make draggable elements within a div. The issue arose when I realized that I couldn't figure out how to drag each element individually without affecting the others. My current code only allows for handl ...
Check out my jsFiddle at this link: http://jsfiddle.net/Grezzo/JR2Lu/ If you press the i key on your keyboard, you'll see the picture flip around to reveal some text. However, there seems to be a flickering issue during the animation, especially with ...
Struggling with my website layout design as I encountered an issue. The overall width of the layout is too excessive, and I want to introduce some margins on the sides for a better visual appeal. Although the responsive design works well originally, adding ...
Is it feasible to update the values in a particular column of a table? <table> <col with="auto"> <col with="auto"> <col with="auto" id="update_me"> <?php for(hundreds of lines){ ?> <tr> <td>so ...
There seems to be a simple issue here that needs my attention before diving into PHP tasks. I plan on using PHPMailer this time around. I've been attempting to learn how to submit a form on localhost for the past week, and now I'm going to try i ...
Seeking guidance on implementing PHP OOP. Currently working on creating PHP/MySQL code using OOP and need assistance with outputting the code. How should this be approached? To simplify, I will display all the code and await feedback on correctness: ind ...
Attempting to navigate through a bunch of HTML, I'm aiming to isolate specific sections. I'm specifically looking to retrieve 'THISISTHEBITIWANT' from the following HTML code. <li class="aClass"> <a href="example/THISISTHEB ...
I am facing a small issue. I have multiple products in my shop (the exact number is unknown). On the main site, I want to display only 3 products per row. Unfortunately, my current code only shows one row and it doesn't look appealing. The layout is d ...
Below is the code for my vertex shader: attribute vec3 aVertexPosition; attribute vec4 aVertexColor; attribute float type; uniform mat4 uMVMatrix; uniform mat4 uPMatrix; varying vec4 vColor; void main(void) { gl_Positi ...