When reducing the page size, the Bootstrap columns are colliding with

While resizing the screen, I noticed that these images are overlapping each other. I haven't made any changes to the css for container-fluid or row.

<div class="container-fluid bg-grey">
    <div class="row center">
        <div class="col-sm-4">
            <img src="http://www.fpcbp.com/wp-content/gallery/tkGallery/OYIaJ1KK.png" width="425" height="319" />
        </div>
        <div class="col-sm-4">
            <img src="http://www.fpcbp.com/wp-content/gallery/tkGallery/OYIaJ1KK.png" width="425" height="319" />
        </div>
        <div class="col-sm-4">
            <img src="http://www.fpcbp.com/wp-content/gallery/tkGallery/OYIaJ1KK.png" width="425" height="319" />
        </div>
    </div>
   </div>

I prefer if the images could stack on top of each other rather than overlap.

Thank you

htmlcsstwitter-bootstrap

Answer №1

The reason why the columns are overlapping is due to the fixed width value of the <img> elements. The col-*-* classes have a percentage-based width, and when that width is smaller than the set width of the images, overlap occurs.

To ensure that the images are responsive, you can simply remove the width property and add the class .img-responsive, which will prevent the <img> from exceeding the width of the column by using max-width: 100%.

<img class="img-responsive" src="..." />

Answer №2

To optimize your layout for narrower screens, consider defining your columns with the col-xs-12 class in Bootstrap. This will ensure that each column takes up the full width of the screen on devices smaller than 768px, causing them to stack vertically.

Currently, you have 3 columns in a row with each column occupying 33.33% of the available space. Additionally, your images have fixed sizes specified. To make your images responsive, it's recommended to use the Bootstrap img-responsive class. Be sure to remove any fixed height and width values from the image elements to allow them to scale properly.

Answer №3

In case the two provided solutions above and below were not successful, attempt incorporating your own CSS attributes by assigning a custom class to the images:

.customclass{max-width: 100%; height: auto;}

Answer №4

<div class="container-fluid bg-grey">
    <div class="row center">
        <div class="col-sm-4 col-md-4 col-xs-12">
            <img class="img-responsive" src="http://www.example.com/image1.png" width="425" height="319" />
        </div>
        <div class="col-sm-4 col-md-4 col-xs-12">
            <img class="img-responsive" src="http://www.example.com/image2.png" width="425" height="319" />
        </div>
        <div class="col-sm-4 col-md-4 col-xs-12">
            <img class="img-responsive" src="http://www.example.com/image3.png" width="425" height="319" />
        </div>
    </div>
   </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

What causes the form to be submitted when the text input is changed?

I'm puzzled by the behavior of this code snippet that triggers form submission when the input value changes: <form> <input type="text" onchange="submit();"> </form> Typically, I would expect something along t ...

javascripthtml

Interpolation problem with AngularJS translation service

I've successfully implemented a ternary operator in my HTML: {{ qp.QP_TRANSFERS === '1' ? qp.QP_TRANSFER_TYPE_NAME + ' transfer' : 'No transfer' }} In addition, I am utilizing a translation service with JSON objects. He ...

htmlangularjsangularjs-interpolate

What are the methods for adjusting the height of one div in relation to another div?

How can I make the height of the first div equal to the dynamic height of the second div, when the second div contains a lot of dynamic data with an unpredictable height? <div style="width: 100%;"> <div class=& ...

javascripthtmlcssbootstrap-4

Tips for eliminating choices upon button press

How do I remove nested options inside a select element upon button click? I'm not sure where my mistake is, could it be in the for loop? var select = document.getElementById('colorSelect'); var options = document.getElementsByTagName(&ap ...

javascripthtml

Ensure the padding and margin are both set to 0 when using inline styles

As someone who is not a designer, I attempted to send an email from PHP. In order to do so, I took a template and converted all styles to inline. However, I am unsure of where to include the universal margin and padding style in the template. *{margin:0px ...

phphtmlcsstemplates

How to set the default theme color for the mat-sidenav background in Angular 6 and 7?

Is there a way to make the background of a mat-sidenav match the theme color of my mat-toolbar? In the file src\styles.scss, I have the following: @import '~@angular/material/prebuilt-themes/indigo-pink.css'; The template / HTML file incl ...

htmlcssangularangular-material

Angular's responsiveness is enhanced by CSS Grid technology

I am attempting to integrate a CSS grid template that should function in the following manner: Columns with equal width 1st and 3rd rows - 2 columns 2nd row - 3 columns Order = [{ details:[ { key: '1', label ...

cssangulargridviewdatagridviewcolumn

How can you apply color to {{expression}} text using AngularJS while also keeping all the text on a single line?

After writing the following code, I noticed that when I enter text into the input box, an output appears. However, I am now trying to find a way to color the output text while keeping it on the same line. <script src="https://ajax.googleapis.com/ajax ...

javascripthtmlangularjscolors

Can you explain the intended function of .reference in the CSS code provided?

Currently delving into some sample HTML from codrops. I came across the following CSS styling. After scouring the web, it seems others have used span.reference, but I can't seem to grasp the purpose of .reference. Any insights would be much appreciat ...

cssmenu

How to solve z-index issues with two absolutely positioned divs in IE6

Dealing with IE6 bugs has left me exhausted. The problem lies in two (position:absolute) divs that are not functioning properly in terms of their z-index. Here is an example: /* css */ #overlay{ position:absolute; height:1200px; z-index:2; ...

htmlcss

Incorporating additional text following the creation of an image composite using HTML5

I am facing an issue with positioning two images on a canvas using HTML5. Despite changing the x and y properties, the images remain stuck at the top left corner (0, 0). This is different from how I can position text easily on the canvas. <canvas width ...

javascripthtmlcanvashtml5-canvas

Angular template not refreshing automatically

Within my controller: $scope.deleteUser = function(user){ $.ajax({ url: "/users/" + user.id.toString(), method: "DELETE", success: function(result){ $scope.users = result["users"]; ...

javascripthtmlangularjsajax

Initially, the 'display none' CSS command may not take effect the first time it is used

I am currently working on a slideshow application using jquery.transit. My goal is to hide a photo after its display animation by setting the properties of display, transform, and translate to 'none' value. Although the slideshow application work ...

javascriptjquerycss

Saving the content of a div as a PDF

There are several aspects to consider when it comes to this question, but I'm having trouble finding the information I need. Hopefully someone can provide an answer. Essentially, what I want to achieve is: Imagine a div that is 400 X 400 px in size. ...

javascriptphpjquerypdfhtml

displaying a shadow solely on the left side of an image

When using jQuery to append an img element and apply a box-shadow on click, I am only seeing the shadow appear on the left side of the image. How can I make the box shadow show up on all sides of the image? var someNumbers = [1, 2, 3]; $.each(someNumbe ...

jqueryhtmlimagecssbox-shadow

Has the default underline in Bootstrap 5 been altered?

When working with Bootstrap 4, I noticed that it sets the default text-decoration to be none. However, in Bootstrap 5, just adding a regular anchor tag results in both blue text and an underline being displayed. I was trying to achieve only showing the u ...

htmlbootstrap-4bootstrap-5

Encountering a 404 Not Found issue while trying to add scripts with Node.js

I am currently working with a node server and an HTML file, where the default route is being directed. server.js /** * Created by Creative Coder on 10/26/2015. */ var express = require('express'); var mysql = require('mysql'); var a ...

htmlangularjsnode.jsexpress

The issue I am experiencing within my PHP code is that the redirection to the gratitude page is not functioning correctly when utilizing

As a newcomer to PHP, I have been struggling with an example code from a website that is not redirecting to the thank you page as expected. Moreover, the email functionality is not working properly either. The code was sourced from: Upon downloading the f ...

javascriptphphtml

Position the table footer on the right side of the page

I am trying to format a table with footer items in HTML. I want the first footer item to be aligned left and the rest to be aligned right. Here is the desired layout: https://i.sstatic.net/ZRNEp.png table { width: 100% } <table class="price-list" ...

htmlcss

jQuery image resizing for elements

I have successfully adjusted the images in the gallery to display one per row for horizontal orientation and two per row for vertical orientation. Now, I am facing a challenge in making the images scalable so they can resize dynamically with the window. A ...

javascriptjqueryhtmlcssajax