0

So, I’m work in Bootstrap padding work properly as expected in Web-View, But in Mobile-View padding not work as expected, I’m using class "col-sm-offset-3 col-md-3" for Dropdown and col-sm-2 padding5px for button.

I want padding between dropdown and button in Mobile-View.

Where is the problem I’m not find out.

Web-View image:

enter image description here

Mobile-View image:

enter image description here

Here is the code:

<div class="form-group">
        <div class="col-sm-offset-3 col-md-3">
            <select id="ddlDownload" class="form-control"></select>
        </div>
        <div class="col-sm-2  padding5px">
            <button id="btnDownload" type="button" class="btn btn-primary" onclick="DownloadFile()">Download</button>
        </div>
    </div>
Prabhat Sinha
  • 1,500
  • 20
  • 32

1 Answers1

2

by default in bootstrap there is no top and bottom padding and margin between cols you need to add custom padding or margin by css you can try code below

<div class="form-group">
        <div class="col-sm-offset-3 col-md-3">
            <select id="ddlDownload" class="form-control"></select>
        </div>
        <div class="col-sm-2" style="padding-top:5px">
            <button id="btnDownload" type="button" class="btn btn-primary" onclick="DownloadFile()">Download</button>
        </div>
</div>

If you don't want to add inline css ( style attribute ). you can add the following code in you css file 

#btnDownload{ 
  margin-top:5px;
}

or for padding 

#btnDownload{
  padding-top:5px;
}

hope this will work

Vishal Garg
  • 86
  • 3