Take out the div-col-md-4 from the initial spot on the rows

In my HTML page, I have a total of 12 blocks with 4 images in each row. However, I am interested in removing blocks 10 and 13 while keeping their positions empty. In addition, I want to ensure that there is no empty space present when viewed on a responsive layout. Check out the image for reference: here

You can find the code on CodePen by visiting this link: https://codepen.io/rahulv/pen/mwEQJo

<div class="col-sm-3"></div>

Instead of displaying content at positions 10 and 13, I would like to use blank spaces. Positions 11 and 12 should be aligned in the center.

jqueryhtmlcss

Answer №1

Just made some changes to your codepen: https://codepen.io/anon/pen/weWQmG

Modifications based on your feedback:

Introduced a new css class called .show-small for elements 10 and 13 Also added the following CSS rules:

.show-small{
  visibility: hidden;
}
@media screen and (max-width: 768px){
  .show-small{
    display: none;
  }
}

Answer №2

If you want the columns to only be visible on larger displays, using col-md-3 or col-lg-3 is the way to go.

For more information on which screen sizes correspond with which size prefixes, you can check out this link. Just remember that -sm- refers to screens over 768px wide, so even your mobile phone with its ample pixels will display the columns.

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

Setting the width of input-group inputs is a feature introduced in Bootstrap 4

Need assistance with a problem involving an input-group in bootstrap 4. Within the input-group, there are two inputs— one with a prepend and the other with an append. The setup is contained within a col-12 div in a form-group, and the goal is to set spe ...

htmlcsspositionbootstrap-4

Generating custom-styled entries using Word VBA

I have set up styles in my Word document, such as My_Style (which I use for titles). I am looking to create entries for illustrations that correspond to the number from that particular style. Here is the code snippet I am using: Sub Macro4() ' &apos ...

cssvbams-word

Determine the amount of lines within a multiline asp:textbox by utilizing jquery

Previously, I accomplished this task in a desktop application using the following code: private void txtSerials_TextChanged(object sender, EventArgs e) { //Count serials SerialNumbers = Regex.Split(txtSerials.Text.Trim( ...

c#jqueryasp.net

guide for interpreting a complex json structure

I'm attempting to extract data from a JSON file that has multiple layers, like the example below. - "petOwner": { "name":"John", "age":31, "pets":[ { "animal":"dog", "name":"Fido" }, ...

javascripthtmljsonxmlhttprequest

How to check off a checkbox using a jQuery function

I have a listbox displayed in my view. This listbox is using a template Listbox <div id="UsersLoad" style="width: 50%"> @Html.EditorFor(i => i.Users, "UsersForEdit") </div> UserForEdit Template (Code snippet) @model string[] @{ ...

javascriptc#jqueryasp.net-mvc-4listbox

Using jQuery and Bootstrap to Enhance Checkbox Button Styling

I am currently working on an asp.net webform and attempting to style my checkbox similar to the design shown here: When I try to replicate the HTML and JS code from the above link on my page, it does not seem to be functioning properly, most likely due to ...

javascriptjquerycssasp.nettwitter-bootstrap

Is there a way to enable hover functionality on mobile devices? I wish for the hover effect seen on desktop to be triggered automatically on mobile devices

I attempted to implement @media (hover: hover) without success. In my design, I have three images in a row that reveal a text overlay when hovered over with a mouse. However, the issue arises when I try to switch to a mobile view, as the images remain un ...

javascripthtmljquerycssbootstrap-5

Having trouble uploading an image URL into a Vue component?

I'm currently facing an issue while creating a Vue tag component, as I am unable to pass the source to the template html <card aposter="assets\images\poster.png" aname="a title"> </card> JavaScript Vue ...

javascripthtmlvue.jsvue-componentvue-props

I'm facing an issue with the footer and header that is preventing me from properly positioning any content on the website

When attempting to include an h3 element on the website, it remains stuck at the top. I have tried using CSS properties like position, top, and left but it does not respond to them. Additionally, I experimented with a gallery template from w3schools to see ...

htmlcss

The main div element is experiencing an overflow due to the excessive

I am struggling to create a homepage layout with three columns of varying heights within the 'content' division. The columns keep overflowing onto the content below, causing layout issues. I have attempted using positioning to solve this problem ...

csshtml

Utilize Jquery to extract the element's identifier and substitute the value in a[href*=' # '] with the extracted Id

I am in the process of developing a one-page portfolio website with a fixed vertical header. I want the headings on the header to highlight as I scroll down to the related sections of the page. <div class="vert-nav"> <ul> & ...

jqueryhtml

Encountering a z-index problem while viewing videos in 768 resolution on Safari and IE8

Currently, I am encountering a z-index problem with videos in IE8 and Safari browsers. Click here to visit the link Even after reducing the z-index, the video on this page appears on top at 760 resolution. It does not seem to respond to any properties. F ...

htmlipadcsssafari

adjusting the spacing between lines for a specific li element

I am seeking to vertically align the phone number and email address with the little icons next to them. When I try to adjust the line-height, it affects all the li's in that section. I believe this is because they are inline elements. Here is the webs ...

htmlcss

Manipulate the css pseudo-element :after using jQuery's .siblings() method

How can I use jQuery to edit the :after element created by CSS? <div class="box"> <h3 class="social">Social</h3> <ul> <li><a href="https://www.youtube.com/" onmou ...

javascriptjqueryhtmlcss

Applying a class in jQuery to an element when the data attribute aligns with the current slide in Slick

I need to compare the data-group attribute of the current slide to the equivalent attribute in a navigation list. If they match, the anchor element in the navigation list should be given an active class. How can I achieve this using jQuery? Navigation Li ...

javascripthtmljquerycss

Symfony2 requires clarification and direction when it comes to managing quantities in a shopping cart

My current challenge involves managing quantities in a shopping cart. I can easily add, delete, and view products in the cart, but am struggling with increasing or decreasing quantities if a user wants to purchase multiple units of the same product. BACKG ...

javascriptphpjqueryajaxsymfony

Using jQuery each with an asynchronous ajax call may lead to the code executing before the ajax call is completed

In my jQuery script, I utilize an each loop to iterate through values entered in a repeated form field on a Symfony 3 CRM platform. The script includes a $.post function that sends the inputted value to a function responsible for checking database duplicat ...

javascriptjqueryajax

What is the best way to invoke a TypeScript function within an HTML document?

Can anyone guide me on how to import a TypeScript function into an HTML file and then call it? I'm a bit confused about the process. Below is my attempt in index.html to call the function getJSON() <!DOCTYPE html> <html lang="en"> < ...

htmltypescript

What could explain why the event listener functions properly on the initial call but fails on subsequent calls?

Currently, I am working on a bootstrap carousel where the "Previous" button is hidden on the first slide and the "Next" button is hidden on the last slide. Now, I want to disable the next button on the second slide (and eventually all slides with iframe vi ...

javascriptjquery

Problem with Jquery fetching data from specified div not resolved

Here is a working example: var myvar; $.get('formElements.html', function(data) { myvar = data; }); However, this code does not work as intended: var myvar; $.get('formElements.html .className', function(data) { myvar = data; } ...

javascriptjqueryhtmlcss