Tips for adjusting the vertical position of an image within a bootstrap column by a small amount

Apologies in advance if this question has already been addressed, and I am struggling to adapt it to my specific scenario.

My objective is to adjust the positioning of the two images shown in the screenshot example below so that they align with the grey background instead of overlapping with the banner image. Essentially, I just want to move them down by 10-20 pixels.

I am happy to provide any additional information that may be required.

Screenshot Example:

Homepage:

Code:

<section class="feature_sec">
<div class="container">
<div class="row">
<div class="page-width">
<div class="collection-grid-items">
<div class="grid-service">
<div class="col-md-3 hidden-akk col-sm-4  wow fadeInDown" data-wow-delay=".7s">
<div class="widget-images slide-service ">
<a href="https://etractorimplements.com/product-category/rotary-tillers/"> <img  data-src="https://etractorimplements.com/wp-content/uploads/2020/08/heavy-duty-rotary-tiller-small.jpg" class="img-responsive lazy" alt="Rotary Tiller Heavy Duty" > </a>
</div>
</div>
<div class="service-grid col-xs-12 col-sm-4 col-md-3 wow fadeInLeft" data-wow-delay=".1s">
<div class="service service_1 row"> <i class="fa fa-dollar"></i><!--<i class="zmdi zmdi-money-box"></i>-->
<?php dynamic_sidebar('widget1home');?>
</div>
</div>
<div class="service-grid col-xs-12 col-sm-4 col-md-3 wow fadeInLeft" data-wow-delay=".3s">
<div class="service service-2 row"> <i class="fa fa-clock-o"></i> <!--<i class="zmdi zmdi-time zmdi-hc-fw"></i>-->
<?php dynamic_sidebar('widget2home');?>
</div>
</div>
<!--  <div class="service-grid col-xs-12 col-sm-3 col-md-3 wow fadeInLeft" data-wow-delay=".5s">                <div class="service service-2 row"> <i class="zmdi zmdi-thumb-up"></i>                  <?php //dynamic_sidebar('widget3home');?>               </div>              </div> -->
<div class="col-md-3 hidden-akk col-sm-3 wow fadeInDown" data-wow-delay=".7s">
<div class="widget-images slide-service ">
<a href="https://etractorimplements.com/product-category/rotary-tillers/"> <img  data-src="https://etractorimplements.com/wp-content/uploads/2020/08/heavy-duty-rotary-tiller-side-shift-small.jpg" class="img-responsive lazy" alt="Heavy Duty Rotary Tiller with Side Shift"> </a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
javascripthtmljquerycsstwitter-bootstrap

Answer №1

To start off, it's important to make some adjustments to the structure of your HTML elements. A general rule is that only col should be a direct child of row. If you want two images side by side on one line, you should follow this format:

<div class="row">
  <div class="col-6">
    <img ... >
  </div>
  <div class="col-6">
    <img ... >
  </div>
</div>

Next, if you need to move those images down, you can add margin to the row using Bootstrap class mt-5 (the maximum margin top value in Bootstrap classes). If more space is needed, multiple empty row with mt-5 can be created for additional top space, or use CSS.

Finally, your HTML will resemble something like this:

<div class="row mt-5">
<div class="row mt-5">
<div class="row mt-5">
<div class="row mt-5">
  <div class="col-6">
    <img ... >
  </div>
  <div class="col-6">
    <img ... >
  </div>
</div>
</div>
</div>
</div>

Explore Bootstrap spacing guidelines

Remember that in a grid layout, content should be within columns and only columns as immediate children of rows

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

Access another key within an object

Here's a code snippet from my module: exports.yeah = { hallo: { shine: "was", yum: this.hallo.shine } } In the above code, I'm attempting to reference the shine property in yum: this.hallo.shine However, when I run the script, ...

javascriptnode.js

Mastering the art of utilizing sequelize and promises effectively

I'm currently learning how to create apps using expressJS and Sequelize. I could really use some help as I'm more accustomed to sequential programming. My project involves two models: Todo (id, title) and TodoItem (id, content, complete, todoId). ...

javascriptnode.jsexpresspromisesequelize.js

The method to eliminate the default active class using AngularJS when clicking on different links

Here is the scenario: The first link is initially active and highlighted with the active class when the page loads. <a class="button active" ng-click="$parent.Filter = ''" ng-class="{ 'active': Filter === '' }"> Test l ...

javascriptangularjsionic-framework

The Art of Div Switching: Unveiling the Strategies

I have a question regarding my website. I have been working on it for some time now, but I have encountered a challenge that I am struggling to overcome. After much consideration, I am unsure of the best approach to take. The issue at hand is that I have ...

javascriptcsshtmldom

Map on leaflet not showing up

I followed the tutorial at http://leafletjs.com/examples/quick-start/ as instructed. After downloading the css and js files to my local directory, I expected to see a map but all I get is a gray background. Can anyone advise me on what might be missing? T ...

javascriptcssleaflet

Is it possible to update the CSS file of an external SVG file in real-time?

Is there a way for an SVG image to reference another CSS file? A webpage contains an SVG file. A button allows users to switch between classic colors and high contrast mode on the entire webpage, including the SVG image. Attempt w.css (white backgrou ...

javascriptcssxmlsvgstylesheet

Using a combination of radio buttons and JavaScript to adjust the color of a div element

Currently, I am experimenting with radio buttons to modify the background color of my div tag. My goal is to incorporate more than one condition. For example, if button A and button B are both clicked, then change the color to green. This is what I have im ...

javascripthtmlradio-button

Tips for effectively grouping a JavaScript object array with the help of Lodash

I have an array of objects in JavaScript that looks like this: [{ day : "August 30th", id: 1, message : "lorem ipsum1" },{ day : "August 30th", id: 2, message : "lorem ipsum2" },{ day : "August 31th", id: 3, message : " ...

javascriptarrayslodash

Tips for Creating a Fixed-Width Element

I am struggling with creating text wrapping around a box inside a full width page template on Wordpress. The plugin developer suggested wrapping the text inside a fixed width element, but I am unsure how to do this. Any assistance would be greatly apprecia ...

phpcsswordpressthemes

Troubleshooting problems with callback functionality in conjunction with Expressjs, JWT authentication, and Angular

For my current project, I am implementing authentication using JWT with Expressjs and Angularjs. However, I now need to integrate node-dbox to access Dropbox files of my users. The issue arises when trying to store the token received from Dropbox for user ...

javascriptangularjsnode.jsexpressjwt

When attempting to decrypt with a password using CryptoJS, AES decryption returns an empty result

Example The code snippet below is what I am currently using: <script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/aes.js"></script> <div id="decrypted">Please wait...</div> Insert new note:<input type="te ...

javascriptencryptioncryptographycryptojs

Achieving full table height with a parent having a min-height requirement

Encountering a seemingly straightforward issue where I am unable to make an inner div 100% height of the parent div, which is set with min-height 70vh. My goal is to have the table inside be 100% height and content vertically aligned. It currently works if ...

csstwitter-bootstrap

Merge the JSON data with the Node.js/Express.js response

Whenever I input somedomain.com/some_api_url?_var1=1 in a browser, the response that I receive is {"1":"descriptive string"}. In this JSON response, the index 1 can vary from 1 to n, and the "descriptive string" summarizes what the index represents. I am ...

javascriptjsonnode.jsexpress

Executing Multiple Requests Concurrently in Angular 5 using forkJoin Technique

Important Note The issue lies in the backend, not Angular. The requests are correct. In my Angular5 app, I am trying to upload multiple files at once using rxjs forkJoin. I store the requests in an array as shown in the code below. However, after adding ...

javascriptangulartypescriptangular5

The setTimeout function interrupts the event loop

Recently, I came across conflicting information regarding the usage of setTimeout to create nonblocking/asynchronous functions. One article suggested that using setTimeout is essential for this purpose, while another claimed that it actually blocks the eve ...

javascriptnode.jssettimeout

How to Implement a Nested Static Page in Play Framework

I am currently utilizing play framework for Java and focusing on a job portal project that consists of both the main site and an admin panel. Each of these sections has its own unique header and footer, so sharing them in the main file is not an option as ...

javahtmlplayframework-2.0

Obtain user input and showcase it on the screen using a combination of Ajax and PHP

Whenever a user inputs a value in the textbox, it should dynamically display on the screen. I have successfully implemented this feature once, but I am encountering difficulties with implementing it for a second input. Your help is greatly appreciated. fu ...

javascriptjqueryhtmlajaxcodeigniter

Show method created by function, substituting the former element on the display

showButtons(1) will show radio buttons for frame number 1, showButtons(400) will display radio buttons for frame number 400. The current code shows all radio buttons for every frame up to 400 HOWEVER, I am aiming for a single set of radio buttons to start ...

javascriptarraysjsonreactjsradio-button

What is it about Next JS and React JS applications that causes them to use up so much cache?

"What causes Next.js and React.js applications to need a large cache, and how does this affect their performance and resource usage?" Refreshing constantly for even small changes in the application as a developer can be frustrating. Are there an ...

javascriptreactjscachingnext.jsserver-side-rendering

Show subscriptions retrieved from an Ajax .post request within a modal popup

I have a modal on my index.php page that loads when a button is clicked. I want to display data retrieved from an ajax post to a PHP file that returns information about subscriptions. If a user is subscribed to a particular subscription, there should be an ...

phpjqueryajaxjquery-mobile