HTML Mobile mode: Responsive design issues in buttons alignment

In website PC mode rendering these lines are good but not in mobile ...can you help me tweak these buttons to stack up on one another when on mobile mode.

PC-MODE
pc-mode.JPG
MOBILE-MODE
mobile-mode.JPG
Below is the code I use it to render these button controls




<div class="col-lg-6 col-md-6 col-sm-6 " style="text-align:right ">
 <input class="btn-vmsPrimary btn-sm" type="button" value="Save Bid" id="BidSave" onclick="saveBidItems()" tabindex="2" />
 <input id="field_terms" type="checkbox" checked="checked" nvalue="field_terms" required name="terms" title="Accept terms and conditions" hidden>
 <label id="lblTerms" for="field_terms" value="lblTerms" hidden style="color:black">I accept the <u>Terms and Conditions</u></label>
<input class="btn-vmsPrimary btn-sm" type="button" onclick="submitBid()" value="Submit Bid" id="BidSubmit" hidden tabindex="3" />
                </div><br />

Open in new window



I am using these libraries
<link href="~/Scripts/jqGrid/jquery-ui-1.8.1.custom.css" rel="stylesheet" />
<link href="~/Scripts/jqGrid/ui.jqgrid.css" rel="stylesheet" />
<script src="~/Scripts/jqGrid/js/i18n/grid.locale-en.js"></script>
<script src="~/Scripts/jqGrid4.8.2/js/jquery.jqGrid.min.js"></script>
<link href="~/Scripts/jqGrid/themes/jquery-ui.css" rel="stylesheet" />
Subbu GAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Subbu GAuthor Commented:
HTML code from my page source
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>BidForm</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    

    <link href="/content/css?v=8I06cg40VtULiiHK27Ael7viA97wnUe0uFV2AXGdpww1" rel="stylesheet" />
    <link rel="stylesheet" href="/content/datepicker.css">
    
    <script src="/Scripts/jquery-2.1.3.min.js"></script>
    <link href="/Content/Gridmvc.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/gridmvc.min.js" type="text/javascript"> </script>
</head>
<body>
  
    <div class="mainWrap container" style="background-color: #ffffff;">
        <a href="#maincontent" class="sr-only"  title="Skip to main content" accesskey="a">Skip To Main Content</a>
        <div>
            <div class="navbar navbar-inverse som-brandbar" role="navigation" aria-label="Global Navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed"
                    data-toggle="collapse" data-target=".navbar-collapse" style="border: none;">
                <div class="pull-left">
                    <span class="icon-bar"></span> <span class="icon-bar"></span><span class="icon-bar"></span>
                </div>
                <div class="pull-left">
                    &nbsp;&nbsp;<b style="color: #fff;">MENU</b>
                </div>
            </button>
            <div id="globalNav" class="collapse navbar-collapse global">  
                
              
                <ul class="nav navbar-nav global-links">
                    <li class="">
                    
                   
                    
                    <li class=""><a href="/">Home</a></li>
                    <li><a href="http://www.michigan.gov/dnr/0,4570,7-153--24871--,00.html">Contact DNR</a></li>
                    <li><a href="http://www.michigan.gov/dnr">DNR home</a></li>
                    <li><a href="http://www.michigan.gov/dnr/0,4570,7-153--240623--,00.html ">Key Topics</a></li>

                    
                </ul>
            </div>
            <!--/.nav-collapse -->
            <ul class="nav navbar-nav navbar-right">

                <li>
                    <a href="http://www.michigan.gov"
                       title="Michigan's Official Web Site">
                        <span class="icons-state"></span>
                        MI.gov
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
<header class="header bottom-border-accent-A" role="banner">
    <a href="Http://www.michigan.gov/dnr" style="text-decoration:none;">
        <div class="container header-background">
            <!--link to home page-->

            <div>
                <img src="/Content/Images/DNRLogo.png" class="pull-left logo" alt="logo" />
            </div>
            <div>
                <br/>
                <div> <h1 class="siteTitle" style="text-align:left;font-size:2.5em">Timber Sale Online Bidding</h1></div>
                <div> <span class="tagline hidden-xs" style="align-content:center;font-size:1.5em">Michigan Department of Natural Resources</span></div>
                <div class="tagline visible-xs">Michigan DNR</div>
            </div>

        </div>
    </a>
</header>
<script src="/Scripts/jquery-2.1.3.min.js"></script>
<script src="/Scripts/jquery-ui-1.11.3.min.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>


        </div>


        <div class="container content_siteLayout">
           
                



<div class="row container" title="Bid now screen" role="navigation">
    
    <div class="row   hidden-xs role=">
    <ul class="nav  nav-justified  navbar vms-menubar  ">
        
        <li id="menuVmsHome"><a href="/ " class=" btn-vmsPrimary " style="  font-family:Verdana;font-size:small; ">Home</a></li>
        
        <li id="menuVmsScrchCrt" ><a href="/Home/vmsSearchCriteria" style="  font-family:verdana; font-size:small ; " class=" btn-vmsPrimary">Search Criteria</a></li>
        <li id="menuVmsMyIntSrch" class="btn-vmsPrimary ">
            <a href="/Account/MyInterestSearch" style="font-family:verdana;  font-size:small; " class=" btn-vmsPrimary">My Interest Search</a>
        </li>
        <li id="menuVmsSrchAll" class=" "><a href="/Home/vmsSearchAll" style="  font-family:verdana;font-size:small; " class=" btn-vmsPrimary ">All Available Sales</a></li>
        <li class="dropdown" style=" color:#fff">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle btn-vmsPrimary " style="   font-family:verdana; font-size:small; "  >My Account <b class="caret"></b></a>
            <ul class="dropdown-menu" id="menu1">
                <li id="menuVmsLogin" >
                        <a href="/Home/vmsLogout" style="  font-family:verdana;  font-size:small; font-stretch:extra-expanded" class=" btn" accesskey="M">Logout</a>

                </li>
                <li id="menuVmsChgPasswrd">

                    <a href="/Account/ChangePassword" style="font-family:verdana; font-size:small; font-stretch:extra-expanded" class=" btn">Change Password</a>

                </li>
                <li id="menuVmsEditProf">
                    <a href="/Account/EditMyProfile" style="font-family:verdana; font-size:small;font-stretch:extra-expanded" class=" btn">Edit My Profile Items</a>

                </li>
                <li id="menuVmsMyIntSrch">
                    <a href="/Account/MyInterestSearch" style="font-family:verdana; font-size:small;font-stretch:extra-expanded" class=" btn">My Interest Search</a>
                </li>
                <li id="menuVmsMyInterest">

                    <a href="/Account/MyInterests" style="font-family:verdana; font-size:small; font-stretch:extra-expanded" class=" btn">My Interests</a>

                <li id="menuVmsManageBids">                   
                    <a href="/Account/ManageMyBids" style="font-family:verdana; font-size:small;font-stretch:extra-expanded" class=" btn">Manage My Bids</a>
                </li>
            </ul>
        </li>
        <li class="dropdown">
                <a href="/Home/vmsLogout" style=" font-family:verdana; font-stretch:extra-expanded" class=" btn-vmsPrimary btn-sm">Logout</a>


        </li>

    </ul>
</div>

    <div class="col-md-8 col-lg-8 " style="font-family:Arial;font-size:1.3em; text-align:center">
      

</div>
<div class="col-md-4 col-lg-4 " style="font-family:Arial;font-size:1em; text-align:right">

        <label class="vms-control-label" title="Welcome">Welcome Subbu 09/25/2015</label>
    <span id="clock" class="vms-control-label">  </span>
</div>
<script type="text/javascript">
    // When the document is ready
    $(document).ready(function () {
        setInterval('updateClock()', 1000);
    });
    function updateClock() {
        var currentTime = new Date();
        var currentHours = currentTime.getHours();
        var currentMinutes = currentTime.getMinutes();
        var currentSeconds = currentTime.getSeconds();

        // Pad the minutes and seconds with leading zeros, if required
        currentMinutes = (currentMinutes < 10 ? "0" : "") + currentMinutes;
        currentSeconds = (currentSeconds < 10 ? "0" : "") + currentSeconds;

        // Choose either "AM" or "PM" as appropriate
        var timeOfDay = (currentHours < 12) ? "AM" : "PM";

        // Convert the hours component to 12-hour format if needed
        currentHours = (currentHours > 12) ? currentHours - 12 : currentHours;

        // Convert an hours component of "0" to "12"
        currentHours = (currentHours == 0) ? 12 : currentHours;

        // Compose the string for display
        var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay;


        $("#clock").html(currentTimeString);

    }
</script>

    <div class="col-xs-12 margin-top-5 visible-xs ">
        <a href="/ " class="btnVMS btn-vmsPrimary btn-sm btn-block vms-margin-left--15" role="button" title="Click here for Home">
            <span class="glyphicon glyphicon-home"></span>  Home
        </a>
    </div>
</div>
<main id="maincontent" role="main" aria-label="bid now contents">

        <table class="interestnote">
            <tr>
                <td class="warnalert" style="font-family:Arial;font-size:1.3em">
                    <b>Note:  </b> You have saved but not submitted your bid for this sale.<br />
                </td>
            </tr>
        </table>
    <legend style="font-family:Arial;font-size:2em">
        Bid Form
    </legend> 

    <table class="interestnote">
        <tr>
            <td class="interestnotetd" style="font-family:Arial;font-size:1.3em">
                <b>Note:</b>  Bid/Unit amount has to be greater than or equal to Min Bid/Unit amount.
            </td>
        </tr>
    </table>

<form action="/Account/BidNow" class="form-horizontal" id="BidNowPage" method="post"><span class="field-validation-valid" data-valmsg-for="CustomError" data-valmsg-replace="true"></span><span class="field-validation-valid text-danger" data-valmsg-for="BidPerUnitMessage" data-valmsg-replace="true"></span>        <fieldset>
            <div class="hidden-xs">
                <div class=" col-lg-10 col-md-10 ">
                    <div class=" form-group">
                        <label class=" control-label" for="TIMBER_SALE_ONLINE_BIDDING">TIMBER SALE/ONLINE BIDDING</label><br />
                        <label class=" control-label" for="STATE_OF_MICHIGAN_DNR">STATE OF MICHIGAN/DNR</label>
                    </div>
                </div>
                <div class="col-lg-2 col-md-2 ">
                    <label class=" control-label">
                        Unit/Office Name
                    </label>
                    <div style="width:200px;position:inherit; left:-70px;text-align:center">
                            <div class="form-group">
                                SAULT STE MARIE MGT UNIT/Sault Ste Marie Office
                            </div>
                    </div>
                </div>
            </div>
            <div class="hidden-xs">
                <div class="col-lg-4 col-md-4  " style="text-align:center">
                        <div class="form-group">
                            <label class=" control-label" for="Bid_Date_Time_">Bid Date/Time </label><br />

                            10/19/2015 10:00AM    Eastern
                        </div>
                </div>
                <div class="col-lg-4 col-md-4 " style="text-align:center">
                        <div class="form-group">                           
                            <label class=" control-label" for="Sale_Name__Sale__">Sale Name (Sale#)</label><br />
                            BAY CITY BEECH ( 45-001-13 )
                        </div>
                </div>
                <div class="col-lg-4 col-md-4  " style="text-align:center">
                        <div class="form-group">
                            <label class=" control-label" for="Bidder">Bidder</label><br />
                            Subbu Gomathinathan

                        </div>                </div>
            </div>
        </fieldset>
        <fieldset>
            <div class="visible-xs col-xs-12">

                <div class=" form-group text-center" style="font-family:Arial;font-size:1.3em">
                    <label class=" control-label" for="TIMBER_SALE_ONLINE_BIDDING">TIMBER SALE/ONLINE BIDDING</label><br />
                    <label class=" control-label" for="STATE_OF_MICHIGAN_DNR">STATE OF MICHIGAN/DNR</label>
                </div>

                <div class=" col-xs-12  form-group ">
                    <label class=" control-label ">
                        Unit/Office Name
                    </label>
                        <div>
                            SAULT STE MARIE MGT UNIT/Sault Ste Marie Office
                        </div>
                </div>

                <div class="col-xs-12" style=" ">
                        <div class="form-group">
                            <label class=" control-label" for="Bid_Date_Time_">Bid Date/Time </label><br />

                            10/19/2015 10:00AM    Eastern
                        </div>
                </div>
                <div class="col-xs-12 ">
                        <div class="form-group">
                            <label class=" control-label" for="Sale_Name__Sale__">Sale Name (Sale#)</label><br />
                            BAY CITY BEECH (45-001-13)
                        </div>
                </div>
                <div class="col-xs-12 ">
                        <div class="form-group">
                            <label class=" control-label" for="Bidder">Bidder</label><br />
                            Subbu Gomathinathan

                        </div>                </div>

            </div>

        </fieldset>
        <div align="center">
            <table id="list"></table>
            <div id="pager"></div>
        </div>
        <fieldset>
            <div>


                <div class="col-lg-3 col-md-3  " id="divBidInstr">
                        
                    <a href="/Home/ViewBidInstructionsReport" target="_blank">Bid Instructions</a>                
                </div>


       
                <div class="col-lg-9 col-md-9  " id="divBidInstr" style="text-align:right" hidden>
                    <br />
                </div>
            </div>
            <div class="col-lg-12 col-md-12  " id="divSubmit">
                <b> * The Total volume is statistcally estimated within plus (+) or minus (-) 16.01 percent. </b> The estimated units are final and not subject to adjustment.  Prospective bidders are urged to examine
                the timber and to make their own estimates of quantity and quality. <br /><br />
                I understand that any or all bids may be rejected.  All non-responsive bid forms may be rejected.  I also understand that consideration and awarding
                a contract will be based upon my past performance and ability to complete the contract based upon equipment and staffing subject to my control.  The winning bidder must complete the Verification of Worker's Disability Compensation Act Compliance within 21 days of sale award date.<br /><br />
                In response to the notice of sale to be held on<b> 10/19/2015 </b> at  <b>  10:00AM    </b> (local time), I am hereby submitting my sealed bid (firm offer) for the above forest products.
                <br /><br />
                <div class="col-lg-6 col-md-6 col-sm-6 " style="text-align:right">
                    <input class="btn-vmsPrimary btn-sm" type="button" value="Back" id="btnBack" onclick="btnBack_click()" tabindex="3" />

                </div>

                <div class="col-lg-6 col-md-6 col-sm-6 " style="text-align:right ">
                    <input class="btn-vmsPrimary btn-sm" type="button" value="Save Bid" id="BidSave" onclick="saveBidItems()" tabindex="2" />
                    <input id="field_terms" type="checkbox" checked="checked" nvalue="field_terms" required name="terms" title="Accept terms and conditions" hidden>
                    <label id="lblTerms" for="field_terms" value="lblTerms" hidden style="color:black">I accept the <u>Terms and Conditions</u></label>
                    <input class="btn-vmsPrimary btn-sm" type="button" onclick="submitBid()" value="Submit Bid" id="BidSubmit" hidden tabindex="3" />
                </div><br />
                <div id="dialog"></div>
            </div>
        </fieldset>
        <div id="BidSubmitNotVisibledialog" title="Warning!" class="hidden">
            <p>Any unsaved changes will be lost.</p>
        </div>
        <div id="BidSubmitVisibledialog" title="Warning!" class="hidden">
            <p>Your bid is saved but not submitted.</p>
        </div>
        <div id="MinBidWarnDialog" title="Error:" class="hidden">
            <p>Bid/Unit amount has to be greater than or equal to Min Bid/Unit amount.</p>
        </div>
        <div id="PartialBidWarnDialog" title="Error:" class="hidden">
            <p>Your bid cannot be saved unless all bid items are bid.  Please complete all bid items or cancel your bid by clicking on the Back button.</p>
        </div>
</form></main>

<style>
    .divhide {
        display: none;
    }

    .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
        float: none;
    }

    .ui-dialog .ui-dialog-buttonpane {
        text-align: center; /* left/center/right */
    }

    .noclose .ui-dialog-titlebar-close {
        display: none;
    }

    .ui-jqgrid-bdiv {
        overflow-x: hidden !important;
    }
</style>

<link href="/Scripts/jqGrid/jquery-ui-1.8.1.custom.css" rel="stylesheet" />
<link href="/Scripts/jqGrid/ui.jqgrid.css" rel="stylesheet" />
<script src="/Scripts/jqGrid/js/i18n/grid.locale-en.js"></script>
<script src="/Scripts/jqGrid4.8.2/js/jquery.jqGrid.min.js"></script>
<link href="/Scripts/jqGrid/themes/jquery-ui.css" rel="stylesheet" />


<script type="text/javascript">

    function SaveBid() {
        GetRowTotals;
        var PushedArray = new Array();
        var lista = jQuery("#list").getDataIDs();
        for (i = 0; i < lista.length; i++) {
            rowData = jQuery("#list").getRowData(lista[i]);
            PushedArray.push(rowData);

        }

        var dataToSend = JSON.stringify(PushedArray);

        $.ajax({
            url: '/Account/SaveBidData',
            type: 'POST',
            data: "volumeid=" + dataToSend,
            success: function (result) {

                var MinBidWarning = result;   //'';
                if ((MinBidWarning != null) || (MinBidWarning.length > 0)) {
                    if (MinBidWarning == 'Success') {
                        //$('#BidSave').hide();
                        $('#field_terms').show();
                        $('#lblTerms').show();
                        $('#BidSubmit').show();
                    }
                }

            }
        });
        return true;
    }


    function saveBidItems() {
        // Save functionality
        var flag = MinBidCheckWarning();
        //  alert(flag);
        if (flag) {
            //   alert('calling : SaveBid')
            SaveBid();
        }

    }

    function formatDollar(num) {
        alert(num);
        var p = num.toFixed(2).split(".");
        return "$" + p[0].split("").reverse().reduce(function (acc, num, i, orig) {
            return num + (i && !(i % 3) ? "," : "") + acc;
        }, "") + "." + p[1];
    }


    function MinBidCheckWarningSave() {

        var grid = $("#list");
        var MinBidPerUnitArray = grid.getCol('MinBidPerUnit');
        var EstVolumeArray = grid.getCol('Volume');
        var EnteredBidArray = grid.getCol('BidPerUnit');
        var AlertText = '';

        var CalBidArray = grid.getCol('BidValue');
        var rowids = grid.getDataIDs();

        for (var i = 0; i < EstVolumeArray.length; i++) {
            var EnteredBid = EnteredBidArray[i].replace("$", "");
            CalBidArray[i] = (EstVolumeArray[i] * EnteredBid);

            MinBidPerUnitcellValue = grid.jqGrid('getCell', rowids[i], 'MinBidPerUnit');
            MinBidPerUnitcellValue = MinBidPerUnitcellValue.replace("$", "");
            MinBidPerUnitcellValue = parseFloat(MinBidPerUnitcellValue);

            EnteredBidcellValue = grid.jqGrid('getCell', rowids[i], 'BidPerUnit');
            EnteredBidcellValue = EnteredBidcellValue.replace("$", "");
            EnteredBidcellValue = parseFloat(EnteredBidcellValue);
            grid.jqGrid('setCell', rowids[i], 'BidValue', CalBidArray[i]);
            var check = isNaN(EnteredBidcellValue);
            if (check == true) {
                return false;
            }
            else {
                if (EnteredBidcellValue == '0' || EnteredBidcellValue == '0.00' || EnteredBidcellValue < '0.00') {
                    grid.jqGrid('setCell', rowids[i], 'BidPerUnit', ' ');
                    return false;

                }
                if ((EnteredBidcellValue != '') || (EnteredBidcellValue != null) || (EnteredBidcellValue != 0)) {
                    if (EnteredBidcellValue < MinBidPerUnitcellValue) {
                        MinBidWarnDialog();
                        return false;
                    }
                }

            }

        }

        return true;
    }


    function MinBidCheckWarning() {

        var grid = $("#list");
        var MinBidPerUnitArray = grid.getCol('MinBidPerUnit');
        var EstVolumeArray = grid.getCol('Volume');
        var EnteredBidArray = grid.getCol('BidPerUnit');
        var AlertText = '';

        var CalBidArray = grid.getCol('BidValue');
        var rowids = grid.getDataIDs();

        for (var i = 0; i < EstVolumeArray.length; i++) {
            var EnteredBid = EnteredBidArray[i].replace("$", "");
            CalBidArray[i] = (EstVolumeArray[i] * EnteredBid);

            MinBidPerUnitcellValue = grid.jqGrid('getCell', rowids[i], 'MinBidPerUnit');
            MinBidPerUnitcellValue = MinBidPerUnitcellValue.replace("$", "");
            MinBidPerUnitcellValue = parseFloat(MinBidPerUnitcellValue);

            EnteredBidcellValue = grid.jqGrid('getCell', rowids[i], 'BidPerUnit');
            EnteredBidcellValue = EnteredBidcellValue.replace("$", "");
            EnteredBidcellValue = parseFloat(EnteredBidcellValue);
            grid.jqGrid('setCell', rowids[i], 'BidValue', CalBidArray[i]);
            var check = isNaN(EnteredBidcellValue);
            if (check == true) {
                return false;
            }
            else {
                if (EnteredBidcellValue == '0' || EnteredBidcellValue == '0.00' || EnteredBidcellValue < '0.00') {
                    grid.jqGrid('setCell', rowids[i], 'BidPerUnit', ' ');
                    PartialBidWarnDialog();
                    return false;

                }
                if ((EnteredBidcellValue != '') || (EnteredBidcellValue != null) || (EnteredBidcellValue != 0)) {
                    if (EnteredBidcellValue < MinBidPerUnitcellValue) {
                        PartialBidWarnDialog();
                        return false;
                    }
                }

            }

        }

        return true;
    }

    function isNumber(n) {
        return !isNaN(parseFloat(n)) && isFinite(n);
    }

    function MinBidWarnDialog() {
        $('#MinBidWarnDialog').removeClass('hidden');
        $(function () {
            $("#MinBidWarnDialog").dialog({
                resizable: false,
                height: 150,
                modal: true,
                overlay: {
                    backgroundColor: '#000',
                    opacity: 1
                },
                dialogClass: "noclose",
                buttons: {
                    "OK": function () {
                        $(this).dialog('close');
                    },

                }
            }).prev(".ui-dialog-titlebar").css("background", "#424242");
        });

    };




    function PartialBidWarnDialog() {
        $('#PartialBidWarnDialog').removeClass('hidden');
        $(function () {
            $("#PartialBidWarnDialog").dialog({
                resizable: false,
                height: 165,
                width: 300,
                modal: true,
                overlay: {
                    backgroundColor: '#000',
                    opacity: 1
                },
                dialogClass: "noclose",
                buttons: {
                    "OK": function () {
                        $(this).dialog('close');
                    },

                }
            }).prev(".ui-dialog-titlebar").css("background", "#424242");
        });

    };
    function btnBack_click() {

        if ($('#BidSubmit').is(':visible')) {
            // alert('BidSubmit visible');
            $('#BidSubmitVisibledialog').removeClass('hidden');
            $(function () {
                $("#BidSubmitVisibledialog").dialog({
                    resizable: false,
                    height: 140,

                    modal: true,
                    overlay: {
                        backgroundColor: '#000',
                        opacity: 1
                    },
                    dialogClass: "noclose",
                    buttons: {
                        Cancel: function () {
                            $(this).dialog("close");
                        },

                        "OK": function () {
                            $(this).dialog('close');
                            var sessPreBidPage = 'http://localhost:54930/Home/SearchSelection';
                            window.location.assign(sessPreBidPage);
                            return false;
                        },


                    }
                }).prev(".ui-dialog-titlebar").css("background", "#424242");
            });

        }
        else {
            // alert('BidSubmit not visible');    //subbu
            $('#BidSubmitNotVisibledialog').removeClass('hidden');
            $(function () {
                $("#BidSubmitNotVisibledialog").dialog({
                    resizable: false,
                    height: 130,
                    modal: true,
                    overlay: {
                        backgroundColor: '#000',
                        opacity: 1
                    },

                    dialogClass: "noclose",
                    buttons: {
                        Cancel: function () {
                            $(this).dialog("close");
                        },
                        "Continue": function () {
                            $(this).dialog('close');
                            var sessPreBidPage = 'http://localhost:54930/Home/SearchSelection';
                            window.location.assign(sessPreBidPage);
                            return false;
                        },

                    }
                }).prev(".ui-dialog-titlebar").css("background", "#424242");
            });


        }


    };



    var nullFormatter = function (cellvalue) {
        if (cellvalue === undefined || isNull(cellvalue)) {
            cellvalue = 'NULL';
        }
        return cellvalue;
    }
</script>

<script>

    $(document).ready(function () {

        $('input, textarea, select').focus(function () {
            e.preventDefault();
            this.blur();
        });

        $("BidSubmitNotVisibledialog").hide();
        $("BidSubmitVisibledialog").hide();
        $("MinBidWarnDialog").hide();
        $("PartialBidWarnDialog").hide();

        var myGrid = $("#list");

        jQuery("#list").jqGrid({
            //data: mydata,
            datatype: 'json',
            height: 150,
            rowNum: 999999,

            scroll: true,
            colNames: ['Appraisal Id', 'ProposalId', 'Species', 'Product', 'Unit', 'Volume*', 'Min Bid/Unit', 'Bid/Unit', 'Advertised Value', 'Bid Value', 'bid_flag', ''],
            colModel: [
                        { name: 'Appraisal_id', index: 'Appraisal_id', hidden: true, sortable: false },
                        { name: 'ProposalId', index: 'ProposalId', hidden: true },
                        { name: 'Species', width: 150, index: 'Species', sortable: false },
                        { name: 'Product', width: 120, index: 'Product', sortable: false },
                        { name: 'Unit', width: 80, index: 'Unit', sortable: false },
                        { name: 'Volume', index: 'Volume', align: "right", sortable: false },
                        { name: 'MinBidPerUnit', index: 'MinBidPerUnit', sortable: false, align: "right", sorttype: "float", formatter: 'currency', formatoptions: { prefix: '$' } },
                        { name: 'BidPerUnit', index: 'BidPerUnit', editable: true, sortable: false, align: "right", defaultValue: 'null', formatter: 'currency', formatoptions: { prefix: '$', thousandsSeparator: ',' } },
                        { name: 'AdvertisedPrice', index: 'AdvertisedPrice', width: 150, sortable: false, formatter: 'currency', formatoptions: { prefix: '$', thousandsSeparator: ',' }, align: "right", sorttype: "float" },
                        { name: 'BidValue', index: 'BidValue', sortable: false, align: "right", sorttype: "float", formatter: 'currency', formatoptions: { prefix: '$' } },
                        { name: 'bid_flag', index: 'bid_flag', hidden: true, sortable: false },
                        { name: 'action', index: 'action', width: 20, sortable: false }


            ],
            gridview: true,
            hidegrid: false,
            altRows: false,
            scrollOffset: 1,
            scrollingRows: false,
            shrinkToFit: true,
            forceFit: true,
            editbutton: true,
            //onSelectRow: saveEdit,
            autowidth: true,
            //width: 800,
            multiselect: false,
            footerrow: true,
            caption: "Bid Items",

            onCellSelect: function (rowid, iCol, cellcontent) {
                // alert('cellcontent:' + cellcontent);
                initialize();
                GetRowTotals;
            },
            beforeSelectRow: function (rowid, e) {
                return (true);
            },
            cellEdit: true,
            cellsubmit: 'clientArray',
            afterSaveCell: function () {
                MinBidCheckWarningSave();
                GetRowTotals();
            },
            afterEditCell: function () {
                GetRowTotals();
            },
            url: "../Account/GetData",
            editurl: "../Account/SaveBidData",
            gridComplete: function () {
                GetRowTotals();
                $('td:eq(19)', '#list').trigger('click');


            }
        });
        var myGrid = $("#list");

    });



    function initialize() {
        $("#list").on({
            focus: function (e) {
                $(this).trigger('myFocus');
            },
            myFocus: function (e) {
                setTimeout(function () { $(e.target).select(); }, 0);
            }
        }, "input:text");
    }

    $(window).on("resize", function () {
        var $grid = $("#list"),
            newWidth = $grid.closest(".ui-jqgrid").parent().width();
        $grid.jqGrid("setGridWidth", newWidth, true);
    });


    function GetRowTotals() {
        {
            jQuery('tr#' + rowid + ' td:last div:first div.ui-inline-edit', jQuery(this)).show();
            var grid = $("#list");
            var BidValueArray = grid.getCol('BidValue');
            var AdvertisedPriceArray = grid.getCol('AdvertisedPrice');
            var rowids = grid.getDataIDs();
            var BidValuetotal = 0;
            var total = 0;
            grid.setCell(rowid, 'BidPerUnit', '', { 'background': '#F3F781' });
            var AdvertisedPricetotal = 0;
            for (var i = 0; i < BidValueArray.length; i++) {
                BidValuetotal += parseFloat(BidValueArray[i]);
                if (!isNaN(BidValuetotal))
                    total += BidValuetotal;

            }
            for (var i = 0; i < AdvertisedPriceArray.length; i++) {
                AdvertisedPricetotal += parseFloat(AdvertisedPriceArray[i]);
                if (!isNaN(AdvertisedPricetotal))
                    total += AdvertisedPricetotal;
            }
            grid.footerData('set', { Species: 'Total:', BidValue: parseFloat(BidValuetotal) || 0, AdvertisedPrice: parseFloat(AdvertisedPricetotal) || 0 }, 'number');

            var BidFlagArray = grid.getCol('bid_flag');
            for (var i = 0; i < BidFlagArray.length; i++) {
                var bidFlagVal = BidFlagArray[i]
                if (bidFlagVal != 0) {
                    var rowid = rowids[i];
                    grid.setCell(rowid, 'Species', '', { 'background': '#D8D8D8' });
                    grid.setCell(rowid, 'Product', '', { 'background': '#D8D8D8' });
                    grid.setCell(rowid, 'Unit', '', { 'background': '#D8D8D8' });
                    grid.setCell(rowid, 'Volume', '', { 'background': '#D8D8D8' });
                    grid.setCell(rowid, 'MinBidPerUnit', '', { 'background': '#D8D8D8' });
                    grid.setCell(rowid, 'AdvertisedPrice', '', { 'background': '#D8D8D8' });
                    grid.setCell(rowid, 'BidValue', '', { 'background': '#D8D8D8' });
                    grid.setCell(rowid, 'action', '', { 'background': '#D8D8D8' });

                }

                if (bidFlagVal == 0) {
                    //make it non editable when bid_flag = 0
                    var rowid = rowids[i];
                    grid.setCell(rowid, 'BidPerUnit', '', 'not-editable-cell', { editable: false });
                    grid.setCell(rowid, 'Action', '', 'not-editable-cell', { disabled: true });
                    grid.setCell(rowid, 'BidPerUnit', '', { 'background': '#D8D8D8' });
                    grid.setCell(rowid, 'Species', '', { 'background': '#D8D8D8' });
                    grid.setCell(rowid, 'Product', '', { 'background': '#D8D8D8' });
                    grid.setCell(rowid, 'Unit', '', { 'background': '#D8D8D8' });
                    grid.setCell(rowid, 'Volume', '', { 'background': '#D8D8D8' });
                    grid.setCell(rowid, 'MinBidPerUnit', '', { 'background': '#D8D8D8' });
                    grid.setCell(rowid, 'AdvertisedPrice', '', { 'background': '#D8D8D8' });
                    grid.setCell(rowid, 'BidValue', '', { 'background': '#D8D8D8' });
                    grid.setCell(rowid, 'action', '', { 'background': '#D8D8D8' });
                    jQuery('tr#' + rowid + ' td:last div:first div.ui-inline-edit', jQuery(this)).hide();
                }
            }

        }
    }



    function saveEdit(id) {
        alert('saveEdit');
        var grid = $("#list");
        var MinBidPerUnitArray = grid.getCol('MinBidPerUnit');
        var EstVolumeArray = grid.getCol('Volume');
        var EnteredBidArray = grid.getCol('BidPerUnit');
        var AlertText = '';

        var CalBidArray = grid.getCol('BidValue');
        var rowids = grid.getDataIDs();

        for (var i = 0; i < EstVolumeArray.length; i++) {
            var EnteredBid = EnteredBidArray[i].replace("$", "");
            CalBidArray[i] = (EstVolumeArray[i] * EnteredBid);

            MinBidPerUnitcellValue = grid.jqGrid('getCell', rowids[i], 'MinBidPerUnit');
            MinBidPerUnitcellValue = MinBidPerUnitcellValue.replace("$", "");
            MinBidPerUnitcellValue = parseFloat(MinBidPerUnitcellValue);

            EnteredBidcellValue = grid.jqGrid('getCell', rowids[i], 'BidPerUnit');
            EnteredBidcellValue = EnteredBidcellValue.replace("$", "");
            EnteredBidcellValue = parseFloat(EnteredBidcellValue);

            var flag = isNumber(EnteredBidcellValue);

            var flagEnteredBidcellValue = isNumber(EnteredBidcellValue);
            //grid.jqGrid('setCell', rowids[i], 'BidValue', CalBidArray[i]);

            //Set Bidvalue 0 to emnpty
            if (EnteredBidcellValue == '0' || EnteredBidcellValue == '0.00') {
                grid.jqGrid('setCell', rowids[i], 'BidPerUnit', ' ');

            }

            if ((EnteredBidcellValue != 0) && (EnteredBidcellValue < MinBidPerUnitcellValue)) {
                AlertText = 'Bid/Unit amount has to be greater than or equal to Min Bid/Unit amount.';
                MinBidWarnDialog();
            }
            //GetRowTotals();
        }


    }


    calculateTotal = function () {
        //  alert("calculateTotal")
        var PushedArray = new Array();
        var lista = jQuery("#grid").getDataIDs();
        for (i = 0; i < lista.length; i++) {
            rowData = jQuery("#grid").getRowData(lista[i]);
            PushedArray.push(rowData);

        }
        var dataToSend = JSON.stringify(PushedArray);
        $.ajax({
            url: '/Account/SaveBidData',
            type: 'POST',
            data: "volumeid=" + dataToSend,
            success: function (result) {
                var grid = $("#grid");
                location.reload();
            }
        });
        return true;

    };

    function submitBid() {
        saveBidItems();
        $.ajax({
            url: '/Account/SubmitFinalBid',
            type: 'POST',
            data: "SubmitBidFinal",
            success: function (result) {
                window.location.href = '/Account/BidSuccessConfirmation';
            }

        })
    };





    function editRow(id) {
        if (id && id !== lastSelection) {
            var grid = $("#grid");
            grid.jqGrid('restoreRow', lastSelection);
            grid.jqGrid('editRow', id, { keys: true, focusField: 6 });
            lastSelection = id;
        }
    };

</script>

<style type="text/css">
    input[type="checkbox"]:required:invalid + label {
        color: red;
    }

    input[type="checkbox"]:required:valid + label {
        color: green;
    }
</style>

            
        </div>

        
        
    <script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>


    </div>
    <footer>
        <div class="vms-footer container">
    <ul class="footer-links">
        
        <li class="footer-link-trail ">
            <a href="/" style="color:#386292"
               class="footer-link-short" title="Timber Sale Online Bidding Home Page">Home</a>
        </li>
        <li class="footer-link-trail">
            <a href="http://www.michigan.gov/DNR" style="color:#386292"
               class="footer-link-short" title="Michigan's Official Web Site">DNR Home</a>
        </li>
        <li class="footer-link-trail">
            <a href="http://www.michigan.gov/openmichigan/0,4648,7-266-58520---,00.html" style="color:#386292"
               class="footer-link-short">Spending & Accountability</a>
        </li>
        <li class="footer-link-trail">
            <a href="http://www.michigan.gov/lara/0,4601,7-154-35738---,00.html" style="color:#386292"
               class="footer-link-short">Office of Regulatory Reinvention</a>
        </li>
        <li class="footer-link-trail"><a href="http://www.michigan.gov/dnr/0,1607,7-153-42199_43145---,00.html" class="footer-link-short" style="color:#386292">Report All Poaching 800-292-7800</a></li>
        <li class="footer-link-trail">
            <a href="http://www.michigan.gov/" style="color:#386292" class="footer-link-short">Michigan.gov Home</a>
        </li>
        <li class="footer-link-trail"><a href="http://www.michigan.gov/minewswire/" style="color:#386292" class="footer-link-short">Michigan News</a></li>
        <li class="footer-link-trail">
            <a href="http://www.michigan.gov/dnr/0,4570,7-153--281460--,00.html" style="color:#386292" class="footer-link-short">Policies</a>
        </li>
        <span class='copyright'><br>Copyright 2015 State of Michigan</span> 
    </ul>
      
</div>
    </footer>
    

    <script type="text/javascript">
        $(function () {
            // Initialize numeric spinner input boxes
            //$(".numeric-spinner").spinedit();

            // Initalize modal dialog
            // attach modal-container bootstrap attributes to links with .modal-link class.
            // when a link is clicked with these attributes, bootstrap will display the href content in a modal dialog.
            $('body').on('click', '.modal-link', function (e) {
                e.preventDefault();
                $(this).attr('data-target', '#modal-container');
                $(this).attr('data-toggle', 'modal');
            });

            // Attach listener to .modal-close-btn's so that when the button is pressed the modal dialog disappears
            $('body').on('click', '.modal-close-btn', function () {
                $('#modal-container').modal('hide');
            });

            //clear modal cache, so that new content can be loaded
            $('#modal-container').on('hidden.bs.modal', function () {
                $(this).removeData('bs.modal');
            });

            $('#CancelModal').on('click', function () {
                return false;
            });
        });
    </script>

<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Chrome","requestId":"c96185b88c44449d95eb0423d9d9d7ea"}
</script>
<script type="text/javascript" src="http://localhost:63480/ce2df7f3bc6a449a9015e3c41289dc86/browserLink" async="async"></script>
<!-- End Browser Link -->

</body>
</html>

Open in new window

brianmfallsCommented:
Are you using bootstrap?
brianmfallsCommented:
Inside of this div:
<div class="col-lg-6 col-md-6 col-sm-6 " style="text-align:right ">

Open in new window

Try this:
<div class="row">
    <div class="col-md-4">
        <button a />
    </div>
    <div class="col-md-4">
        <div class="row">
            <div class="col-md-6">
                <label for button b />
            </div>
            <div class="col-md-6">
                <button b />
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <button c />
    </div>
</div>

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Subbu GAuthor Commented:
<div class="hidden-lg hidden-md">
                    <br />
                </div>
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Applications

From novice to tech pro — start learning today.