Skip to content
Related Articles

Related Articles

How to place the image above the slider in mobile view in bootstrap?
  • Last Updated : 07 Aug, 2019

Making a responsive page in which the user has an image placed at the right of the range slider in desktop view. But in the mobile view, the image is overlapping with slider.

Use grid columns as Bootstrap intended to solve this issue. Set the range column to pull-right for desktop view and flex-column-reverse to set the image above the slider in mobile view.

Add a row and column:

filter_none

edit
close

play_arrow

link
brightness_4
code

<div class="row flex-column-reverse flex-md-row">
          
        <div class="col-xs-12 col-sm-6 pull-right">
            <div class="input">
                <div class="slidecontainer">
                    <input type="range" 
                           min="0" max="100" 
                           value="100" id="rangeid1">
                </div>
            </div>
        </div>
  
        <div class="col-xs-12 col-sm-6">
            <div class="output">
                <img src="Image.png" 
                     class="img-fluid float-right"
                     id="imgid"  
                     width="275" height="95" >
            </div>
        </div>
    </div>
</div>

chevron_right


Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
      place the image above the slider 
      in mobile view in bootstrap
  </title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" 
          href=
          integrity=
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
          crossorigin="anonymous">
  
    <link rel="stylesheet" 
          type="text/css"
          href="draft.css">
  
    <script src=
            integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
            crossorigin="anonymous">
    </script>
    <script src=
            integrity=
 "sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" 
            crossorigin="anonymous">
    </script>
    <script src=
            integrity=
"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" 
            crossorigin="anonymous">
    </script>
</head>
<style>
    body {
        margin-top: 1rem;
        margin-left: 2rem;
        margin-right: 2rem;
    }
      
    .input {
        margin-top: 3rem;
    }
      
    #rangeid {
        padding: 0.5rem;
    }
</style>
  
<body>
    <center>
        <div class="container">
            <h1 style="color:green" class="Hclass">
              GeeksforGeeks
          </h1>
  
            <div class="row flex-column-reverse flex-md-row">
  
                <div class="col-xs-12 col-sm-6 pull-right">
                    <div class="input">
                        <div class="slidecontainer">
                            <input type="range" 
                                   min="0" max="100"
                                   value="100" 
                                   id="rangeid1">
                        </div>
                        <div class="slidecontainer">
                            <input type="range" 
                                   min="0" max="100" 
                                   value="0" 
                                   id="rangeid">
                        </div>
                        <div class="slidecontainer">
                            <input type="range" min="0" max="100" 
                                   value="0" 
                                     
                                   id="rangeid">
                        </div>
                    </div>
                </div>
  
                <div class="col-xs-12 col-sm-6">
                    <div class="output">
                        <img src=
                             class="img-fluid float-right"
                             id="imgid" 
                             width="275" 
                             height="95">
                    </div>
                </div>
            </div>
        </div>
    </center>
</body>
<script>
    var ranger = document.getElementById('rangeid1');
    var image = document.getElementById('imgid');
    var width = image.width;
    var height = image.height;
  
    ranger.onchange = function() {
        image.width = width * (ranger.value / 100);
        image.height = height * (ranger.value / 100);
    }
</script>
</html>

chevron_right


Output:
Desktop view:

Mobile view:




My Personal Notes arrow_drop_up
Recommended Articles
Page :