I'm experiencing difficulties with arranging images side by side on my bootstrap website

I am facing an issue while using Bootstrap 5 where the images are not aligning horizontally as expected. Instead, they are getting added in the lower row. I have tried various solutions but nothing seems to work. Any help on this matter would be greatly appreciated. Thank you.

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ccaea3a3b8bfb8beadbc8cf9e2fde2ff">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />


<!-- Body -->
<section>
  <div class="container pt-3" class="text1">
    <div class="row">
      <div class="col-12 text-center ">
        <h3> Lots of IT companies in town. Why you should choose us? </h3>
      </div>
    </div>
  </div>
  <hr>
</section>



<div class="row">
  <div class="col-md-4 text-center">
    <img class="img-fluid p-2" src="https://via.placeholder.com/200.jpg" width="150">
    <h4 style="font-weight: 700;">Customized requirements</h4>
    <p> Every idea is unique and that's why we craft it as per your requirements.</p>
  </div>
</div>

<div class="col-md-4 text-center">
  <img class="img-fluid p-2" src="https://via.placeholder.com/200.jpg" width="150">
  <h4 style="font-weight: 700;">Customized requirements</h4>
  <p> Every idea is unique and that's why we craft it as per your requirements.</p>
</div>



</section>

htmlcssimagebootstrap-5

Answer №1

row section ends early

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="61030e0e15121513001121544f504f52">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<section>
    <div class="container pt-3" class="text1">
        <div class="row">
            <div class="col-12 text-center ">
                <h3> Lots of IT companies in town. Why you should choose us? </h3>
            </div>
        </div>
    </div>
    <hr>
</section>
<div class="container" class="text1">
    <section>
        <div class="row">
            <div class="col-md-4 text-center">
                <img class="img-fluid p-2" src="images/our qualities/our_qualities/customized.png" width="150">
                <h4 style="font-weight: 700;">Customized requirements</h4>
                <p> Every idea is unique and that's we craft it as<br> per your requirements.</p>
            </div> <!-- Not Here -->

            <div class="col-md-4 text-center">
                <img class="img-fluid p-2" src="images/our qualities/our_qualities/customized.png" width="150">
                <h4 style="font-weight: 700;">Customized requirements</h4>
                <p> Every idea is unique and that's we craft it as<br> per your requirements.</p>
            </div>
        </div> <!-- Close Here -->
    </section>
</div>

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

Modifying the color of a GIF animated image using CSS

I'm currently working on an Angular application and I have a transparent GIF Loader image that I downloaded. I've been trying to figure out how to change the color of the GIF image, but so far, I've only been successful in resizing it. I sea ...

htmlcssangular

Picture that perfectly matches the height of the window

I am looking to create a website design similar to this where an image fills the window until you scroll down. I am not sure how to accomplish this. Would using jQuery be the best option? I haven't been able to find much information on this. While my ...

javascriptjqueryhtmlcss

Encountering iOS 10 freezing issues when scrolling through an HTML list that is styled with -webkit-overflow-scrolling: touch

Overview This specific issue pertains to a potential freeze that occurs when scrolling through a <ul /> element that has been styled using CSS, specifically with the property -webkit-overflow-scrolling: touch on the Safari browser of iOS. Related Pr ...

htmlioscssmobile-safari

scrolling through horizontal bootstrap thumbnails

Hey there, I'm currently working on making the bootstrap thumbnails fit into a Div that has a horizontal scroll. However, I've run into an issue where they are collapsing beneath it instead of being offset properly as shown in the image. Does any ...

htmlcsstwitter-bootstrap

Is there a way to obtain the "rotated" coordinates of a mouse click within a canvas element?

Exploring New Features Within my image editing software, there is a canvas where users can draw shapes. These shapes are sent to a server and added to an XML file, which is then returned to the client for display. Now, I am looking to enhance the program ...

javascripthtmlcanvasrotation

Put the code inside a function. I'm new to this

My goal is to encapsulate this code: if($(window).width() > 980) { $(window).on("scroll", function() { if($(window).scrollTop() > 20) { //add black background $(".x-navbar").addClass("active"); $(".x-navbar .desktop ...

javascriptjqueryhtmlcssfunction

Transforming the mui stepper connection into a progress bar is simple. Each step contains individualized content to guide you through the process

Is there a way to make the MUI stepper connector act as a progress indicator? I have step content and connectors as separate divs, but I'm having trouble styling them. Any assistance would be greatly appreciated! ...

javascriptcssreactjsmaterial-ui

Basic jQuery Slideshow Counter

I'm having trouble implementing a text-based horizontal slider on my website that scrolls left and right with mouse control. I want to display the current index of each slide along with the total number of slides (e.g. 1/4) and update the index as use ...

jqueryhtmlcsscarouselcounter

Rebel Spirit on a Wordpress Platform

I've encountered a strange issue on my Wordpress blog. For some reason, the code "&nbsp" is being inserted right after the opening <body> tag. I have checked the header.php file and there is no instance of this code present there. It's ...

phphtmlcsswordpresswordpress-theming

Maintaining checked items in their original state while searching for another one in ion-searchbar can be achieved by properly handling

My goal is to maintain the checked items as checked when searching for another item in ion-searchbar. While I have managed to keep the checked items, the checkmark icon does not stay checked. What I aim for is to retain the checked state of all food items ...

javascripthtmlcssangularionic-framework

What steps should be taken to incorporate a user input space similar to the one found in the Wordpress new post section

I am looking to incorporate a user input section on my website similar to the one found in WordPress for creating new posts. I would like this area to have all of the same tools available, such as adding hyperlinks, bolding text, and uploading images. Ca ...

javascripthtmlcsswebuser-input

Calculating the sum of all elements in an array

Hi, I am currently attempting to retrieve the total value from an array (such as Arr[1] + Arr[2], and so forth). Unfortunately, I am struggling to find a solution. Below is my existing function: this.hourlyTotals = function() { var custsperhour = Math ...

javascripthtmlarrays

What is the best way to display numerical data within an inline list format?

Here is a list I have: <ol> <li>Login</li> <li>Address</li> <li>Shipping</li> </ol> The numbers in the list display correctly as decimals. However, when I change the <li> tag to inline or ...

csshtml-lists

The storing of data in an HTML form input

Within my submission form, there are five distinct inputs that users can enter and submit. Currently, the entered data is being written to a .txt file successfully. Nevertheless, the objective is to organize and display the information in an easily readabl ...

htmlmysqlformsexcelcsv

What is the best way to adjust the size of an image using CSS, especially with flexbox

I'm attempting to arrange 3 images in a row using flexbox. I also need to adjust the size of the first image because it is too large. However, my CSS styles are not being applied correctly. Each image is enclosed in its own div with a class of flex-it ...

htmlcssflexbox

Ways to integrate a CSS file into XSLT

I have a CSS file that looks like this: .table_class1DeffCell { border-top-width : 1; border-left-width : 1; border-right-width : 1; border-bottom-width : 1; } .table_class11DeffCell { border-bottom-color : 000000; border-top-color : 000000; border-right- ...

javascripthtmlcssxmlxslt

Use jQuery to create a price filter that dynamically sets slide values based on the filter object

I'm currently utilizing the jQuery slide filter to sort products based on price. The filtering value is set within the script, but I am interested in dynamically setting it based on the highest/lowest number found on my page using a data attribute. D ...

javascriptjqueryhtml

Display a hidden div upon loading the page if a certain condition is met

As a beginner in this field, I am struggling to assist a friend with a project. He needs a simple quote form that can generate HTML quotes for his client on a private WordPress page. The form should display a specific div based on the radio button selecti ...

javascriptphpjqueryhtmlcss

Firefox and Internet Explorer have a tendency to break lines at very specific pixel measurements

Hey, I have a situation that goes like this: I have 4 objects with dimensions of exactly 76x76px placed within a 320px container. This setup seems to work well in Chrome as seen above. However, in Firefox and IE9, it looks like this: even though the < ...

htmlcssimagehtml-lists

Avoid activating the hover effect on an element situated below another element without the use of JavaScript

After reviewing various posts, it seems like the only solution involves using javascript. Is there a way to hover over one element without affecting the style of another element below it, all without relying on javascript? I'm looking for a solution u ...

htmlcss