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

``Text Aligns Perfectly in the Middle Horizontally, yet Shifts Slightly Off-C

Two rectangular divs were created, each measuring 60px wide and 150px tall with text inside. The goal was to align the text vertically within the rectangles, achieved by using transform: rotate(-90deg). The challenge arose when trying to center the vertic ...

htmlcss

Utilizing HTTP POST method in vanilla JavaScript with AJAX

Having some trouble sending a post request to my PHP file as it keeps saying 'undefined index'. Here is my JavaScript code: document.getElementById("btn1").addEventListener('click', xh ); function xh(){ xhr = new XMLHttp ...

javascriptphpajaxpost

The redirection to the HTML page happens too soon, causing the ASYNC functions to fail in saving the user's image and data to the server

Hey everyone! I'm facing an issue with async/await functions. Here's the code snippet from my backend where I'm trying to save details of a newly registered user. I'm puzzled as to why the Redirect() function is executing before the f ...

javascriptnode.jsexpresspath

Navigating with ASP.NET 5 Routing and AngularJS Routing

Currently, I am working on an ASP.NET 5 application which also utilizes AngularJS for the front-end. The basic client-side HTML routing support offered by Angular has been successfully implemented in my project. In the Startup class, the default routing is ...

javascriptasp.netangularjsasp.net-mvc

Is a preloader needed in a Vue.js app?

I'm currently exploring the world of Vue.js and could use some advice. When making a GET request using the axios package, I would like to display a preloader for the entire page until all the data has been loaded. While I know this is a common task i ...

javascriptvue.jsvuejs2axios

Prevent JavaScript from being entered into the form

I'm currently developing an "HTML editor" for one of my webpages. Right now, I want to ensure that the editor only allows input of HTML and CSS elements without any Javascript (or Jquery). I've been attempting to prevent the use of <script> ...

javascriptphpjqueryhtml

What does the term "root element" refer to in the Material-UI documentation?

I am finding the terminology used in material ui confusing and would appreciate if someone could clarify it for me. For example, let's consider this information from https://material-ui.com/guides/api/: Spread Undocumented properties supplied ar ...

htmlcssreactjsmaterial-ui

Verify if a personalized angular directive is able to display or conceal an element

I have a custom directive that toggles the visibility of an element based on the value of another service. I attempted to write a test to verify if the directive functions as intended. Initially, I used the ":visible" selector in my test, but it consistent ...

javascriptjqueryhtmlcssangularjs

Issue with Internet Explorer's CSS

It appears that this page is not displaying correctly in Internet Explorer 9, along with possibly older versions as well. The issue seems to be with the right menu floating to the bottom of the page. Firefox, Chrome, and Safari are all rendering it correct ...

htmlcssinternet-explorer

Custom stylesheet for individual users?

On my website, users can pick a template for their webpage. After selecting a template, I would like them to have the ability to customize certain styles like the font color. Is there a way to achieve this? I was thinking about saving the user's cus ...

htmlcssasp-classic

Include the component with the function getStaticProps loaded

I am currently working on a project using NextJs and I have created a component to load dynamic data. The component works fine when accessed via localhost:3000/faq, but I encounter an error when trying to import the same component into index.js. It seems l ...

javascriptreactjsnext.js

The tooltip function is not functioning properly on Internet Explorer when the button is disabled

I have been utilizing a similar solution found at http://jsfiddle.net/cSSUA/209/ to add tooltips to disabled buttons. However, I am encountering an issue specifically in Internet Explorer (IE11). The workaround involves wrapping the button within a span: ...

javascriptjqueryhtmlcss

Retrieving data from a <div> element within an HTML string using jQuery and AJAX

Having trouble extracting a value from a div within an HTML string. Seeking assistance in identifying the issue. I've attempted various methods to retrieve the data, but none seem to work for me. It appears I may be overlooking something crucial. $( ...

javascriptjqueryhtmlajax

Struggling to connect HTML elements with AngularJS and TinyMCE?

My objective is to edit text using tinymce, persist it in a database, and display it within a div by incorporating angularJS for the same styling and formatting. I am utilizing tinymce 3.5.8 with an angularUI directive. I have successfully saved the wysiw ...

htmlbindingangularjstinymce

Tips on obtaining a Firebase ID

Does anyone have a solution for retrieving the unique id from Firebase? I've attempted using name(), name, key, and key() without any success. Although I can view the data, I'm struggling to find a way to retrieve the id. This information is cru ...

javascriptnode.jsexpressfirebasefirebase-realtime-database

Retrieve all entries and merge a field with aggregated information in Mongoose (MongoDB)

I am faced with the challenge of working with two Mongo collections, Users and Activities. The Activities collection consists of fields such as createdAt (type Date), hoursWorked (type Number), and a reference to the user through the user field. On the oth ...

javascriptnode.jsmongodbexpressmongoose

The process of passing $refs in Vue explained

I have a feature where all the data is passed to the child component. Currently, I am able to pass $attrs and $listeners successfully: <template> <el-form v-on="$listeners" v-bind="$attrs" :label-position="labelPosition"> <slot /> ...

javascriptvue.js

Is there a way to execute a condition in a Vue component before rendering the HTML in the template?

Here is an example of my Vue component: <template> <div id="modal-transaction" class="modal fade" tabindex="-1" role="dialog"> ... <div class="modal-header"> <h4 class="modal ...

javascriptvue.jsvuejs2vue-componentvuex

Mastering the art of square bracket destructuring in React through deep comprehension of the concept

import React, { useEffect, useState } from 'react' import { Text } from 'react-native' export default function Counter() { const [count, setCount] = useState(0) useEffect(() => { const id = setInterval(() => setCount((co ...

javascriptreactjsdestructuring

JavaScript incorporates input range sliding, causing a freeze when the mouse slides rapidly

Currently working on a custom slider and encountering an issue. When quickly moving the mouse outside the slider's range horizontally, exceeding its width, the slider doesn't smoothly transition to minimum or maximum values. Instead, there seems ...

javascripthtmlcss