CODEWITHSUNDEEP
csstwitter-bootstrapresponsebootstrap-4
Confused
Confused

Reputation: 53

Bootstrap Image's doesn't resize

So i have the below Layout created

Architecture Images

This is the Code i 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>

Now my problem is when i go into chrome debugger and resize the screen i get the following Responsive Image

Iphone

I taught having col-sm-12 in the div and the class="img-responsive" would make the smaller images stack neatly under the big image when the window is resized.

I have spent alot of time on the BootStrap site but i can't figure it out. Can anyone help explain what i need to do?

Upvotes: 0

Views: 3116

Answers (3)

duy nguyen
duy nguyen

Reputation: 79

change to: 

<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="col-lg-6 col-sm-12" >
               <div class="row">
                   <div class="col-sm-12 col-lg-6">
                       <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 class="col-sm-12 col-lg-6">
                       <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 class="col-sm-12 col-lg-6">
                       <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 class="col-sm-12 col-lg-6">
                       <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>                
    </div>

Upvotes: 0

Sergey
Sergey

Reputation: 7682

Please, have a look. I've replaced all the img-responsive on img-fluid it works as for me. Moreover, they have classes for margins and paddings so it's better not to use inline.

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

Upvotes: 1

Pradeep Rajput
Pradeep Rajput

Reputation: 725

In latest version of bootstrap img-responsive is replaced with img-fluid class.

Upvotes: 1

Related Questions