Bootstrap images are not resizing as expected

Here is the layout I created:

https://i.sstatic.net/3cDYr.png

This is the code used to create the layout:

<div class="col-xs-12">
    <h3 style="margin-top:50px">
        Key Projects
    </h3>       
        <div class="row">               
                <div class="col-lg-6 col-sm-12">                
              <img id="projectMainImg" src="https://placeimg.com/544/358/arch" alt="" class="img-responsive ">

                </div>
            <div class="row col-lg-6 col-sm-12" >

                        <img id="projectImage" style="height:176px;width:264px;margin:0px 0px 5px 5px" src="https://placeimg.com/264/176/arch" alt="" class="img-responsive">
                        <img id="projectImage" style="height:176px;width:264px;margin:0px 0px 5px 5px" src="https://placeimg.com/264/176/arch" alt="" class="img-responsive">
                        <img id="projectImage" style="height:176px;width:264px;margin:0px 0px 5px 5px" src="https://placeimg.com/264/176/arch" alt="" class="img-responsive">                    

            </div>                
        </div>     
</div>

When I resize the screen in Chrome debugger, I encounter this issue: https://i.sstatic.net/ywodk.png

https://i.sstatic.net/eE3BX.png

I believed that using col-sm-12 and class="img-responsive" would stack smaller images neatly under the big image upon resizing the window. However, I can't figure it out even after spending a lot of time on the Bootstrap site. Could someone please explain what I need to do?

csstwitter-bootstrapresponsebootstrap-4

Answer №1

Take a look at this updated code. I've switched all instances of img-responsive to img-fluid, and it's working perfectly for me. Additionally, the images now have classes for margins and paddings, making it more organized without inline styles.

<div class="col-xs-12">
  <h3 style="margin-top:50px">
    Key Projects
  </h3>
  <div class="row">
    <div class="col-lg-6 col-sm-12">
      <img id="projectMainImg" src="https://placeimg.com/544/358/arch" alt="" class="img-fluid">
    </div>
    <div class="row col-lg-6 col-sm-12">
      <img id="projectImage" style="height:176px;width:264px;margin:0px 0px 5px 5px" src="https://placeimg.com/264/176/arch" alt="" class="img-fluid">
      <img id="projectImage" style="height:176px;width:264px;margin:0px 0px 5px 5px" src="https://placeimg.com/264/176/arch" alt="" class="img-fluid">
      <img id="projectImage" style="height:176px;width:264px;margin:0px 0px 5px 5px" src="https://placeimg.com/264/176/arch" alt="" class="img-fluid">
    </div>
  </div>
</div>

Answer №2

The most recent iteration of bootstrap now utilizes the img-fluid class in place of img-responsive.

Answer №3

update to: 

<div class="col-xs-12">
<h3 style="margin-top:50px">
    Featured Projects
</h3>       
<div class="row">               
            <div class="col-lg-6 col-sm-12">                
          <img id="projectMainImg" src="https://placeimg.com/544/358/architecture" alt="" class="img-responsive ">

            </div>
        <div class="col-lg-6 col-sm-12" >
               <div class="row">
                   <div class="col-sm-12 col-lg-6">
                       <img id="subProjectImage1" style="height:176px;width:264px;margin:0px 0px 5px 5px" src="https://placeimg.com/264/176/architecture" alt="" class="img-responsive">

                   </div>
                   <div class="col-sm-12 col-lg-6">
                       <img id="subProjectImage2" style="height:176px;width:264px;margin:0px 0px 5px 5px" src="https://placeimg.com/264/176/architecture" alt="" class="img-responsive">

                   </div>
                  <div class="col-sm-12 col-lg-6">
                       <img id="subProjectImage3" style="height:176px;width:264px;margin:0px 0px 5px 5px" src="https://placeimg.com/264/176/architecture" alt="" class="img-responsive">

                   </div>
                   <div class="col-sm-12 col-lg-6">
                       <img id="subProjectImage4" style="height:176px;width:264px;margin:0px 0px 5px 5px" src="https://placeimg.com/264/176/architecture" alt="" class="img-responsive">

                   </div>
               </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

Can you identify the specific name of the IE CSS bug affecting double vertical padding?

(Just when I thought I've encountered all the strange IE CSS bugs, here comes another one. Is there a name for this double-vertical-padding bug?) After creating a simple test case that worked perfectly in browsers like FF and Opera, I was surprised t ...

cssinternet-explorer

Is it possible to utilize the lighten css property within ngStyle in Angular?

Having some trouble with the lighten property in ngStyle and it's not working as expected. I have a color variable within my component that I want to utilize like so: <div [ngStyle]="{color: schedule.group.color, background: 'lighten(' ...

htmlcssangular

The image slide change feature ceases to function properly when incorporating two separate functions

I have a function that successfully changes the image of a container every 5 seconds. However, I am facing an issue when trying to add 2 containers side by side and change their images simultaneously. When I run the functions for both containers, only one ...

javascripthtmlcss

"Upon applying overflow:hidden to the wrapper through jQuery, the window automatically scrolls to the

In my jQuery code, I don't want the window to scroll to the top when my wrapper is set to overflow:hidden. $('#shownav').click(function(event) { $('#wrapper').toggleClass('noscroll'); return false; }); Her ...

jquerycssoverflowhiddenscrolltop

The functionality of DataTables is not supported on Internet Explorer versions 8 and below

My current setup involves using DataTables to present data in a tabular format with pagination and sorting functionalities. While this is working smoothly across all browsers, I have encountered an issue specifically in IE versions 8 and below. According t ...

jqueryhtmlcssdatatables

Enhancing List Numbers with CSS Styling

Is there a way to customize the appearance of numbered lists? I created an ordered list and would like to modify the numbering style To remove the bullets And adjust the color and background ...

htmlcss

Receiving time slots on a bootstrap schedule

I recently developed a calendar using Bootstrap that allows users to select a start date and automatically sets the end date within a 7-day range from the chosen start date. However, I am facing a challenge in enabling users to also pick minutes along with ...

javascripthtmltwitter-bootstrap

Manipulating classes within ng-class in AngularChanging classes in ng-class dynamically

Featuring multiple elements with an ng-class that behaves similarly to a ternary operator: ng-class="$ctrl.something ? 'fa-minus' : 'fa-plus'" To access these elements, we can compile all the ones with fa-minus and store them in a lis ...

javascriptjquerycssangularjsjquery-selectors

Django is indicating that the path is not reachable

I've been struggling with a seemingly silly issue in my code. I can't figure out why it's not working properly. Here is the directory structure of my Django Project: https://i.sstatic.net/0tVo4.png The HTML file I'm targeting (index.h ...

htmlcssdjango

Safari displaying incorrect sizing for table nested in inline-flex container

When a <table> is placed within an inline-flex container that has a flex-direction of column, Safari displays the table with a different cross-size compared to Chrome and Firefox. This discrepancy makes me question if Safari's default display fo ...

htmlcssflexboxsafari

CSS Stylelint rule to detect the 'missing selector' issue

My current process involves using stylelint to identify any CSS errors before building and deploying our site. However, a recent commit includes code that fails the CSS parser/minifier but passes stylelint validation. .example-class , /*.example-class-two ...

cssstylelint

Turning off the ability to horizontally scroll in an iframe using touch controls

I am trying to disable horizontal scrolling in an iframe on my website, particularly when a user uses touch input and drags horizontally. The scroll bars can still be visible and draggable when touched directly. Unfortunately, I do not have control over th ...

htmlcssiframescrollhorizontal-scrolling

What is the best way to emphasize parent categories in a product table using Woocommerce?

I have a table of products used for filtering categories. My goal is to display only the parent categories in bold font. When searching results like in this link (e.g. https://demo.motorocker.gr/?swoof=1&antalaktika=scooter), we want the parent categor ...

javascriptphpjquerycsswoocommerce

Using canvas elements to position divs in three.js

I am currently in the process of developing a custom animation player using Three.js for rendering objects, which is functioning perfectly. However, I am encountering difficulty when trying to incorporate control options at the bottom of the player (such a ...

javascripthtmlcss

Resizing an image that is being pulled from a database

I am currently working on a challenging database project that seems to have hit a minor cosmetic roadblock. The database I'm dealing with loads profiles into arrays for display using a PHP while loop, making it easy to display content and allow for a ...

phpcssimageresize

I am encountering a problem when trying to implement fancybox with Bootstrap 4

This is the code I have: <section class="call-to-action text-white text-center" id="Productos"> <div class="overlay"></div> <div class="container"> <div class="col-xl-9 mx-auto"> <h2 class="mb-4">Productos</h2> &l ...

jquerybootstrap-4fancybox

Background not covering full height despite setting HTML and body heights to 100%

I've been struggling to set my wrapper to 100% height, despite setting the height to 100%. Any solutions? At the moment, my main_wrapper is empty and should have a background color of red. While I'm looking to add a footer using position: fixed ...

htmlcssheight

Creating a multi-page Phonegap application without utilizing JQuery Mobile for navigation

After creating multiple mobile apps using PhoneGap and utilizing jQuery Mobile for its aesthetically pleasing controls and convenient changePage function, I am now interested in exploring alternative methods for transitioning between pages with a "slide" a ...

javascriptjquerytwitter-bootstrapcordova

Constructing markup for text and subtext in a meaningful manner

I am in the process of creating a roster of Employees and their dependents on a webpage and I could use some guidance on the best way to structure this information. Here is an example of the content on my page: <div> John Smith Employee - 03/01/198 ...

htmlcss

Column spacing and size manipulation with Bootstrap 4

I'm currently facing an issue with aligning elements and spacing them correctly in my project. How can I resolve this using only the col class and Bootstrap 4, without resorting to CSS? I have attempted various margin spacing options like ml-md-4 and ...

htmlbootstrap-4