Open In App

How to place the image above the slider in mobile view in bootstrap?

Improve
Improve
Like Article
Like
Save
Share
Report

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:




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


Example:




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


Output:
Desktop view:

Mobile view:



Last Updated : 07 Aug, 2019
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads