Images displayed alongside webpage contents

I'm having trouble getting these photos to display in the same row. Any suggestions on what I should change? https://i.stack.imgur.com/EbvmR.png

I've attempted using float left and other commands, but one picture continues to stay in the lower right corner.

<section id="services">
<div class="container">
<div class="row wow fadeInUp">
<div class="col-md-4">
<img src="resimler/bimplus.jpg" class="wow fadeInRight">
<h4 class="wow fadeInRight delay-2s">BIMPLUS</h4>
<p>HNP</p>
</div>
<div class="col-md-4">
<img src="resimler/brighe.jpg" class="wow fadeInRight" height="80px">
<h4 class="wow fadeInRight delay-2s">BRIDGE</h4>
<p>HNP</p>
</div>
<div class="col-md-4">
<img src="resimler/precast.jpg" class="wow fadeInRight">
<h4 class="wow fadeInRight delay-2s">PRECAST</h4>
<p>HNP</p>
<div class="col-md-4">
<img src="resimler/precast.jpg" class="wow fadeInRight">
<h4 class="wow fadeInRight delay-2s">PRECAST</h4>
<p>HNP</p>
</div>
</div>    
</div>    
</section>

In my style.css file, I've also tried adjusting the margin-left and float left properties without success.

#services
{
    background-color: #efefef;
    padding-top: 80px;
    padding-bottom: 80px;
}
#services .col-md-4
{
    padding: 20px;
}
#services .col-md-4 h4
{
    padding: 5px;
}
#services .col-md-4 img
{
    width: 200px;
    display: inline-block;
}
#services .col-md-4 p
{
    padding: 5px;
    text-align: justify;
}
javascripthtmljquerycssbootstrap-4

Answer №1

To resolve this issue, consider using the display: flex; property as it offers more flexibility in styling elements. Here's an example:

<section class="services">
  <div class="service">
    <img src="service.jpg">
    <h3>Service</h3>
    <p>Service Description...</p>
  </div>
  <div class="service">
    <img src="service.jpg">
    <h3>Service</h3>
    <p>Service Description...</p>
  </div>
  <div class="service">
    <img src="service.jpg">
    <h3>Service</h3>
    <p>Service Description...</p>
  </div>
  <div class="service">
    <img src="service.jpg">
    <h3>Service</h3>
    <p>Service Description...</p>
  </div>
</section>

.services {
    display: flex;
    justify-content: space-between;
    background: #eee;
    padding: 40px;
}

.services .service {
    background: #ccc;
    padding: 10px;
}

Further information on flexbox can be found here: https://www.w3schools.com/css/css3_flexbox.asp

Answer №2

Remember to place </ div> after writing < p>HNP</ p> in order to properly close your tag

Additionally, modify the col-md-4 class to col-md-3 to achieve a layout with 4 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

JavaScript innerHTML not functioning properly when receiving a response from a servlet

Can someone help me troubleshoot the code below? I'm receiving a response from the servlet, but I can't seem to display it inside the div. Here is the response: lukas requests to be your friend &nbsp <button value="lukas"onclick="accfr(th ...

javascripthtml

Error: AJAX responseText Mismatch detected

When I make an AJAX call in my code, everything seems to be working correctly. The PHP script responds with "success" when it should, and the response text is indeed "success". However, even though the output appears to be correct, the line if(returnVal == ...

javascriptphpjqueryajax

Developing a custom directive that utilizes a dynamic ng-options configuration

Alright, let me share with you my personalized directive: angular.module('bulwarkWebControls', []) .directive('customDropdown', [ function() { return { scope: { label: '@', // can be om ...

javascriptangularjsangularjs-directiveangularjs-ng-options

The AJAX request is not functioning properly, even on a basic form like this one

Here is the current code I am testing. Due to some issues with AJAX calls, I am unable to make it work. Can someone please help me identify what might be wrong? test.php <html> <body> <form id="myform"> <input type="text" id="fname" ...

phpjqueryajax

What is the best way to implement date range filtering in vue js?

Currently, I am delving into the realm of vue.js and experimenting with a filtering feature that involves date ranges. The process goes like this: initially filter by type, then proceed to filter by a specified date range, consisting of start and end dat ...

javascriptvue.jsvuejs2

JavaScript causing Google custom search to not refresh results when updating search query

I am inputting user IDs into a textbox in my system. Upon submitting the ID, it fetches the name and address of the user and places it in the search box of a GCSE. document.getElementById("gsc-i-id1").setAttribute("value", this.searchqu ...

javascriptjqueryangulargoogle-custom-searchgoogle-search-api

Encountering a situation where attempting to retrieve JSON data results in receiving an undefined

After fetching JSON data from the API , I successfully printed out text to the console with the correct data. However, when attempting to access any of its properties, they are returning as undefined. var url = "http://www.omdbapi.com/?t=batman&y=& ...

javascriptjsonreactjs

Master the art of handling JSON data within an Angular controller

I've been spending a day attempting to manipulate a JSON in order to display a table, but I can't seem to achieve the desired outcome. My goal is to showcase statistics in a table for each town. If a town has multiple lines, I want to display a ...

javascriptangularjsjson

Step-by-step guide on extracting checkbox value from response in Angular JS

Successfully added a checkbox value to the database. An issue arises when checking a checkbox after receiving a response, as the checked value displays as -1 instead of 0, 1, or 2. When clicking on a checked box, its index value should change to -1, bu ...

javascriptjqueryangularjscheckbox

Encountering the error "java.lang.IndexOutOfBoundsException: Index: 1, Size: 1" while attempting to choose the second option in the dropdown menu

I need to choose the third option from a drop-down list that is enclosed in a div element. However, when I try to retrieve the items in the drop-down using Selenium, the size of the drop-down list is only showing as 1 even though there are actually 10 it ...

htmlseleniumselenium-webdriver

The $routeChangeSuccess event is failing to trigger in ngNewRouter in AngularJS version 1.4

Transitioning from AngularJS 1.3 to AngularJS 1.4 has brought about some changes, including the use of AngularJS's new route method known as ngNewRouter, specifically introduced in AngularJS 1.4. Below is a snippet of my code: var versionModule = ng ...

javascriptangularjsroutesrouter

Tips for triggering an event exclusively for the initial item in the Menu

Upon page load, I require a trigger call to be made on the menu. This action should only be performed for the first element in the menu, which is 'Bottle' in this case. <div class="swiper-wrapper" id="swipecontainer"> <div class="s ...

jquery

Generate a hyperlink within a paragraph

Can anyone provide tips on how to turn a string from Json into a paragraph with a hyperlink included? <p>Dumy Dumy Dumy Dumy Dumy Dumy Dumy DumyDumyDumyDumy abc.com </p> Currently, the paragraph displays as is, but I would like to make abc.c ...

javascripthtmlangularjs

What could be causing the issue where only one of my videos plays when hovered over using UseRef?

I'm currently working on a project where I have a row of thumbnails that are supposed to play a video when hovered over and stop when the mouse moves out of the thumbnail. However, I've encountered an issue where only the last thumbnail plays its ...

javascriptreactjstypescriptnext.jsreact-hooks

Using Webpack to directly embed image paths in your code

I am working on a project that uses webpack and vue.js. I encountered an issue when trying to add an image to the vue template using src '/images/imageName.png', which resulted in a 404 error. How can I adjust the configuration to recognize absol ...

javascriptvue.jswebpack

The Vue v-for directive encountered an unrecognized property during rendering

Trying to grasp the concept of v-for in Vue JS, especially since I am a newcomer to this framework. Since I am utilizing Django, custom delimiters are necessary. I have a script example that appends a list of objects to a data property: var app = new Vue( ...

javascriptvue.jsvuejs2

Getting the values of $scope variables from AngularJS in the controller to the view

I have a simple scope variable on my AngularJS Controller. It is assigned a specific endpoint value like this: $scope.isItAvailable = endpoint.IS_IT_AVAILABLE; How can I properly use it in my view (HTML) to conditionally show or hide an element using ng- ...

javascriptangularjsscopeangular-ng-if

N8N: Deleting JSON Key from Output

Is it possible to remove the json key in my output file? I am unsure of the best approach to achieve this. I would like to return an array of data with all values, not just one value. If you want more information, here is a link to my N8N post: Manipulate ...

javascriptjsonn8n

Pause autoplay in Bootstrap v5.0 Carousel when a carousel item is clicked

I've been attempting to disable the carousel autoplay using jQuery after clicking on a carousel item, but all my efforts have been unsuccessful. Can anyone provide some assistance? Thank you! This is what I've tried so far: $(".carousel-i ...

htmljquerybootstrap-5

"Ensuring Security with Stripe Connect: Addressing Content Security Policy Challenges

Despite using meta tags to address it, the error persists and the Iframe remains non-functional. <meta http-equiv="Content-Security-Policy" content=" default-src *; style-src 'self' 'unsafe-inline'; ...

javascriptphpstripe-paymentscontent-security-policy