locked
How to fit the Web form according to the screen resolution and its size RRS feed

  • Question

  • User-786564416 posted

    Its is a very familiar issue in the Web forms development. The web width and height to be flexible enough with the user PC Screen size and his resolution. Actually what I found is all about the Windows forms, which is not I need. What I need is the Web forms management according to User's screen and resolution settings. I would highly appreciate getting template showing that or any useful link.

    PLEASE HELP WITH THANKS

    Wednesday, November 29, 2017 2:54 PM

All replies

  • User475983607 posted

    This is a CSS question and generally solved by using (and learning) a responsive framework like bootstrap.

    https://getbootstrap.com/

    Wednesday, November 29, 2017 3:16 PM
  • User-786564416 posted

    Thanks a lot Mgebhard. Just for more understanding, Would you please tell me for example how would I use the bootstrap with the following MasterPage.master

    <%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPages_MasterPage_" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    
    <head runat="server">
        <title></title>
        <asp:ContentPlaceHolder id="head" runat="server">
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
            <script src="~/Scripts/jquery.updnWatermark.js" type="text/javascript"></script>
            <%--<script src="<%= ResolveUrl("~/Scripts/jquery-1.4.1.min.js") %>" type="text/javascript"> </script>--%>
            
            <script src="<%= ResolveUrl("~/Scripts/ScrollableGrid.js") %>" type="text/javascript"> </script>
            
            <script src="<%= ResolveUrl("~/Logon/WaterMark.min.js")%>" type="text/javascript"></script>
    
            
            
        </asp:ContentPlaceHolder>
    
        <style type="text/css">
            
            body
            {
                background-image:url('../Images/TDBackground.jpg');
            } 
               
            .LogosDivStyle
            {
                width:1200px; 
                background-color: transparent;
            }  
            .CpContentDivStyle
            {
                width:1200px;
                margin-bottom:10px; 
                margin-top:1px; 
                margin-left:15px; 
            }  
            .HyperLinkStyle img
            {
                height:40px;
                width:40px;
                vertical-align:top;  
                border-width:1px; 
                border-style:solid;
                border-color:Black;   
                margin-left:0px;
                margin-right:0px;
            } 
            
            
            .HyperLinkStyle
            {
                text-align: left;
                margin-top: 0px;
            }
            .LoginningUserStyle
            {
                border-style: none;
                height: 30px;
                font-size: 30px;
                text-align:center; 
                font-family: SC_AMEEN;
                width: 120px;
                background-color: transparent;
                margin-bottom:10px;
                margin-right:30px;  
                color:#0033CC;
            }
            
            
            .SubMenusStyle1
            {
                border-style: none;
                height: 30px;
                font-size: 25px;
                text-align: right;
                font-family:SC_AMEEN;
                width: 120px;
                background-color:lightblue;
                color: #000000;
                margin-top:0px;
            }
            .SubMenusStyle2
            {
                border-style: none;
                height: 30px;
                font-size: 25px;
                text-align: right;
                font-family:SC_AMEEN;
                width: 200px;
                background-color:lightblue; 
                color: #000000;
                margin-top:0px;
            }
            
            .SiteMapPathStyle
            {
                border-style: none;
                height: 30px;
                font-size: 30px;
                text-align: right;
                font-family: SC_AMEEN;
                width: 350px;
                background-color: transparent;
                color: #0033CC;
            }
            
            .hoverstyle
            {
                font-weight: bold;
            }
            
            .style1
            {
                width: 0.5%;
            }
            
            .SitePathSeperatorStyle img
            {
                background-color:transparent;
                background:none; 
                vertical-align:bottom;    
            }    
            
            .FooterTableStyle
            {
                width:100%;
                text-align: center;
                font-family:Sakkal Majalla;  
                font-size:20px;
                bottom:0; 
                ; 
                
            } 
            
            .ImageDivStyle
            {
                vertical-align:middle;
                width:100%; 
            }  
    
            .Buttonout
            {
                cursor:default;
                -moz-border-radius: 15px;
                -webkit-border-radius: 15px;
                border-radius: 15px;
            } 
              
             .Buttonhover
            {
                cursor:pointer;
                -moz-border-radius: 15px;
                -webkit-border-radius: 15px;
                border-radius: 15px;
            }
                 
            
        </style>
    
    </head>
    <body style="height: 40px;">
    
    
        <form id="form1" runat="server">
            
            <div id="LogosDiv"  runat="server" class="LogosDivStyle"  >
                <table width="100%">
                    <tr>
                        <td align="right" width="15%" style="text-align: center">
                            
                            <br />
                            <br />
                            <br />
                            <asp:Button ID="PendingLB" runat="server" BackColor="#F90000" ForeColor="White" Height="46px" 
                                style="font-size: 28px; font-family: tahoma; font-weight: 700;-moz-border-radius: 15px;-webkit-border-radius: 15px;border-radius: 15px;" Width="59px"
                                onMouseOver="this.className='Buttonhover'" onMouseOut="this.className='Buttonout'" />
                            
                        </td>
                        <td align="center" valign="top">
                            <asp:Image ID="Image3" runat="server" Width="275px" Height="125px"   
                            ImageUrl="~/Images/MurasalatLogo.png" />
                        </td>
                        <td align="left" width="10%">
                            <asp:Image ID="Image2" runat="server" ImageUrl="~/Images/MinistryLogo.png" 
                            Height="125px" style="text-align: center;" Width="125px" />
                        </td>
                    </tr>
                </table> 
            </div>
                   
            
            
            
    
            <div id="ImageDiv" runat="server" class="ImageDivStyle" align="center">
                <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" 
                ShowStartingNode="true"  SiteMapProvider="ShortSiteMap" />
            </div>   
    
    
            
    
            <div id="LoginningUserDiv"  runat="server" class="LogosDivStyle"  >
                <table width="100%">
                    <tr>
                        
                                            
                        <td width="3%" align="right" >
                            <asp:Image ID="UserMenuIcon" runat="server" Height="40px" ImageUrl="~/Images/UserMenuImg.png" Width="35px" />
                        </td>
    
                                            
                        <td align="left" width="20%">
                            <asp:Menu ID="NavigationMenu" runat="server" DataSourceID="SiteMapDataSource1" onmenuitemdatabound="NavigationMenu_MenuItemDataBound" 
                            Orientation="Horizontal"  StaticEnableDefaultPopOutImage="False" staticsubmenuindent="5" Width="229px">
    
                                <LevelMenuItemStyles>
                                
                                    <asp:MenuItemStyle CssClass="LoginningUserStyle" />        
                                    <asp:MenuItemStyle CssClass="SubMenusStyle1" />        
                                    <asp:MenuItemStyle  CssClass="SubMenusStyle2"/>        
    
                                </LevelMenuItemStyles>
    
                            </asp:Menu>
                        </td>
    
                        <td align="center">
                        </td>
    
                        <td width="50%" style="text-align: right; font-family: SC_AMEEN;">
                            <asp:SiteMapPath ID="SiteMapPath1" runat="server" SiteMapProvider="LongSiteMap" 
                            PathSeparator="-" SkipLinkText=""  CssClass="SiteMapPathStyle" CurrentNodeStyle-ForeColor="#0033CC" >
                                <PathSeparatorTemplate>
                                    <asp:Image ID="Image1" Runat="Server"   
                                    ImageUrl="~/images/arrowblue.png" BackColor="Transparent" Height="20px" Width="35px" CssClass="SitePathSeperatorStyle"    />
                                </PathSeparatorTemplate> 
                                <CurrentNodeStyle CssClass="SiteMapPathStyle" />
                                <NodeStyle CssClass="SiteMapPathStyle" />
                            </asp:SiteMapPath>
                        </td>
                    </tr>
                </table> 
            </div>
    
            <div id="CpContentDiv" runat="server" class="CpContentDivStyle"  >
                <table width="100%">
                    <tr>
                        
                        <td align="center">
                            
                            <asp:ContentPlaceHolder id="CpMainContent" runat="server">    
                            </asp:ContentPlaceHolder>
                        </td>
            
                    </tr>
                </table> 
            </div>
    
            <div id="MasterPageFooter" runat="server" class="FooterStyle">
                <table id="FooterTable" runat="server" class="FooterTableStyle" >
                    <tr>
                        <td align="center"  > 
                            <asp:Label ID="Label2" runat="server" 
                            Text="© 2014 وزارة العمل، مملكة البحرين. جميع الحقوق محفوظة." 
                            ></asp:Label>
                        </td>
                    </tr>
                </table> 
            </div> 
    
            <div id="ExtraItems"  runat="server" visible="false" >
            <table id="TmpTable" runat="server">   
                <tr>
                    <td>
                        <asp:SqlDataSource ID="SDS3" runat="server"  
                        ConnectionString="<%$ ConnectionStrings:TrackingConnectionString %>" 
                        SelectCommand="SELECT [RefNo], [LetterID], [Source], [SourceName], [Target], [TargetName], [PostTime],[PostType], [LoadedByUserName] FROM [PendingLookup] WHERE ([LoadedByUserName] = @LoadedByUserName)">
                        <SelectParameters>
                            <asp:SessionParameter Name="LoadedByUserName" SessionField="UserName" 
                                Type="String" />
                        </SelectParameters>
                        </asp:SqlDataSource>
                    </td> 
                </tr>
                <tr>
                    <td>
                        <asp:SqlDataSource ID="SDS_Ordinary" runat="server"  
                        ConnectionString="<%$ ConnectionStrings:TrackingConnectionString %>" 
                        SelectCommand="SELECT [RefNo], [LetterID], [Source], [SourceName], [Target], [TargetName], [PostTime],[PostType], [Importance], [RequiredAnsPeriod], [Subject], [ActionAgainstLetter], [Attachments],[ProcessingStatus],[AnsweringLetterID] FROM [PendingPostings] WHERE ([LoadedByUserName] = @LoadedByUserName) ORDER BY [PostTime] DESC">
                        <SelectParameters>
                            <asp:SessionParameter Name="LoadedByUserName" SessionField="UserName" 
                                Type="String" />
                        </SelectParameters>
                        </asp:SqlDataSource>
                    </td> 
                </tr>
    
                <tr>
                    <td>
                        <%--<asp:SqlDataSource ID="SDS_ExEnt" runat="server"  
                        ConnectionString="<%$ ConnectionStrings:TrackingConnectionString %>" 
                        SelectCommand="SELECT [RefNo], [LetterID], [Source], [SourceName], [Target], [TargetName], [PostTime],[PostType], [Importance], [RequiredAnsPeriod], [Subject], [ActionAgainstLetter], [Attachments],[ProcessingStatus],[AnsweringLetterID] FROM [PendingPostings] WHERE ([LoadedByUserName] = @LoadedByUserName) ORDER BY [PostTime] DESC">
                        <SelectParameters>
                            <asp:SessionParameter Name="LoadedByUserName" SessionField="UserName" 
                                Type="String" />
                        </SelectParameters>
                        </asp:SqlDataSource>--%>
                    </td> 
                </tr>
    
                <tr>
                    <td>
                        <asp:SqlDataSource ID="SDS1" runat="server" 
                        ConnectionString="<%$ ConnectionStrings:TrackingConnectionString %>" 
                        SelectCommand="SELECT DISTINCT AdministrationUnits.Name, AdministrationUnits.Indx, UnderlyingUnits.Indx AS Expr1 FROM AdministrationUnits INNER JOIN UnderlyingUnits ON AdministrationUnits.Indx = UnderlyingUnits.Indx WHERE (UnderlyingUnits.LoadedByUserName = @LoadedByUserName) ORDER BY AdministrationUnits.Indx">
                        <SelectParameters>
                            <asp:SessionParameter Name="LoadedByUserName" SessionField="UserName" 
                                Type="String" />
                        </SelectParameters>
                        </asp:SqlDataSource>
                    </td>
                 <td>
                 </td>  
              </tr>
    
                <tr>
                    <td>
                        <asp:GridView ID="PendingLookupGV" runat="server" DataSourceID="SDS3" 
                        AutoGenerateColumns="False" GridLines="Vertical" Width="1000px" 
                            Visible="False" >
                            <Columns>
                                <asp:TemplateField HeaderText="RefNo">
                                    <ItemTemplate>
                                        <asp:TextBox ID="RefNo" runat="server" text='<%# Eval("RefNo") %>'  />
                                    </ItemTemplate>                             
                                </asp:TemplateField> 
    
                                <asp:TemplateField HeaderText="LetterID">
                                    <ItemTemplate>
                                        <asp:TextBox ID="LetterID" runat="server" text='<%# Eval("LetterID") %>'  />
                                    </ItemTemplate>                             
                                </asp:TemplateField> 
    
                                <asp:TemplateField HeaderText="Target">
                                    <ItemTemplate>
                                        <asp:TextBox ID="Target" runat="server" text='<%# Eval("Target") %>'  />
                                    </ItemTemplate>                             
                                </asp:TemplateField> 
    
                                <asp:TemplateField HeaderText="PostType">
                                    <ItemTemplate>
                                        <asp:TextBox ID="PostType" runat="server" text='<%# Eval("PostType") %>'  />
                                    </ItemTemplate>                             
                                </asp:TemplateField> 
    
                                <asp:TemplateField HeaderText="PostTime">
                                    <ItemTemplate>
                                        <asp:TextBox ID="PostTime" runat="server" text='<%# Eval("PostTime") %>'  />
                                    </ItemTemplate>                             
                                </asp:TemplateField> 
    
                                <asp:TemplateField HeaderText="Source">
                                    <ItemTemplate>
                                        <asp:TextBox ID="Source" runat="server" text='<%# Eval("Source") %>'  />
                                    </ItemTemplate>                             
                                </asp:TemplateField> 
    
                                <asp:TemplateField HeaderText="LoadedByUserName">
                                    <ItemTemplate>
                                        <asp:TextBox ID="LoadedByUserName" runat="server" text='<%# Eval("LoadedByUserName") %>'  />
                                    </ItemTemplate>                             
                                </asp:TemplateField> 
    
    
                            </Columns> 
                        </asp:GridView>
                    
                    
                    </td>
                </tr>
                
                <tr>
                    <td>
                        
                    <%--<asp:GridView ID="GridViewMirrorOrdinary" runat="server" DataSourceID="SDS_Ordinary" CssClass="Grid" 
                    CellPadding="4" ForeColor="#333333" GridLines="Vertical" BackColor="#99CCFF" 
                    BorderStyle="Solid" AutoGenerateColumns="False"  
                    EmptyDataText="لا توجد أي سجلات"  
                    EnableSortingAndPagingCallbacks="False" AllowSorting="True" Visible="False">
                        <Columns>
                                     
                            <asp:TemplateField Visible="false" >
                                <ItemTemplate>
                                    <asp:Label ID="AnsweringLIDField" runat="server" text='<%# Eval("AnsweringLetterID")%>'   />  
                                </ItemTemplate>
                            </asp:TemplateField>
    
                        </Columns> 
                        
                    </asp:GridView>--%>
                    
                    </td>
                </tr>
    
                <tr>
                    <td>
                        
                    <%--<asp:GridView ID="GridViewMirrorExEnt" runat="server" DataSourceID="SDS_ExEnt" CssClass="Grid" 
                    CellPadding="4" ForeColor="#333333" GridLines="Vertical" BackColor="#99CCFF" 
                    BorderStyle="Solid" AutoGenerateColumns="False"  
                    EmptyDataText="لا توجد أي سجلات"  
                    EnableSortingAndPagingCallbacks="False" AllowSorting="True" Visible="False">
                        <Columns>
                                     
                            <asp:TemplateField Visible="false" >
                                <ItemTemplate>
                                    <asp:Label ID="AnsweringLIDField" runat="server" text='<%# Eval("AnsweringLetterID")%>'   />  
                                </ItemTemplate>
                            </asp:TemplateField>
    
                        </Columns> 
                        
                    </asp:GridView>--%>
                    
                    </td>
                </tr>
    
                <tr>
                    <td>
                        <%--<asp:GridView ID="GridViewOrdinary" runat="server" DataSourceID="SDS_Ordinary" CssClass="Grid" Visible="false"  
                        CellPadding="4" ForeColor="#333333" GridLines="Vertical" BackColor="#99CCFF" 
                        BorderStyle="Solid" AutoGenerateColumns="False"  
                        EmptyDataText="لا توجد أي سجلات"  
                        EnableSortingAndPagingCallbacks="False" AllowSorting="True" AllowPaging="True">
                        <Columns>--%>
                            
    
                            <%--<asp:TemplateField HeaderText="الرابط">
                                <ItemTemplate>
                                    <asp:HyperLink ID="AttachmentLink" runat="server" Target="_blank" ImageUrl="~/Images/Attachment1.png" CssClass="HyperLinkStyle">
                                    </asp:HyperLink>
                                </ItemTemplate>
                                <ItemStyle BorderWidth="1px" Width="2%" HorizontalAlign="Center"  />
                            </asp:TemplateField>--%>
    
                            
                            <%--<asp:TemplateField HeaderText="الحالة" >
                                <ItemTemplate>
                                    <asp:Label ID="Status" runat="server" text='<%# Eval("ProcessingStatus")%>' CssClass="StatusFieldStyle"       />  
                                </ItemTemplate>
                                <ItemStyle BorderWidth="1px" Width="20%" HorizontalAlign="Right"  Font-Size="20px" />
                            </asp:TemplateField>
    
                            <asp:TemplateField HeaderText="المهلة" >
                                <ItemTemplate>
                                    <asp:Label ID="ReqAnsPed" runat="server" text='<%# Eval("RequiredAnsPeriod")  %>' CssClass="RAPFieldStyle"       />  
                                </ItemTemplate>
                                <ItemStyle BorderWidth="1px" Width="3%" HorizontalAlign="center"  Font-Size="20px" />
                            </asp:TemplateField>--%>
                            
                            <%--<asp:TemplateField HeaderText="التاريخ" SortExpression="PostTime" >
                                <ItemTemplate>
                                    <asp:Label ID="ShownDate" runat="server" text='<%# (Eval("PostTime")).toshortdatestring() %>' CssClass="DateFieldStyle"      />  
                                </ItemTemplate>
                                <ItemStyle BorderWidth="1px" Width="9%" HorizontalAlign="Center" />
                            </asp:TemplateField>
    
                            <asp:TemplateField HeaderText="الموضوع" SortExpression="Subject">
                                <ItemTemplate>
                                    <asp:Label ID="SubjectField" runat="server" text='<%# Eval("Subject")  %>' CssClass="SubjectFieldStyle"   />  
                                </ItemTemplate>
                                <ItemStyle BorderWidth="1px" Width="18%" HorizontalAlign="right" />
                            </asp:TemplateField>--%>
    
                            <%--<asp:TemplateField HeaderText="إلى" SortExpression="TargetName">
                                <ItemTemplate>
                                    <asp:Label ID="TargetField" runat="server" text='<%# Eval("TargetName")  %>' CssClass="TargetFieldStyle"   />  
                                </ItemTemplate>
                                <ItemStyle BorderWidth="1px" Width="15%" HorizontalAlign="right" />
                            </asp:TemplateField>
                    
                            <asp:TemplateField HeaderText="من" SortExpression="SourceName">
                                <ItemTemplate>
                                    <asp:Label ID="SourceField" runat="server" text='<%# Eval("SourceName")  %>' CssClass="SourceFieldStyle"   />  
                                </ItemTemplate>
                                <ItemStyle BorderWidth="1px" Width="20%" HorizontalAlign="right" />
                            </asp:TemplateField>--%>
    
    
                            <%--<asp:TemplateField HeaderText="الرقم">
                                <ItemTemplate>
                                    <asp:HyperLink ID="HyperLink1" Target="_blank" runat="server" Text='<%# Eval("LetterID") %>' CssClass="RefFieldStyle" />
                                </ItemTemplate>
                                <ItemStyle BorderWidth="1px" Width="5%" HorizontalAlign="Center"  Font-Size="22px"   />
                            </asp:TemplateField>--%>
    
                            
    
                            <%--<asp:TemplateField Visible="false" >
                                <ItemTemplate>
                                    <asp:Label ID="SRC" runat="server" text='<%# Eval("Source")  %>'  />  
                                </ItemTemplate>
                            </asp:TemplateField>--%>
    
                            <%--<asp:TemplateField Visible="false" >
                                <ItemTemplate>
                                    <asp:Label ID="TGT" runat="server" text='<%# Eval("Target")  %>'   />  
                                </ItemTemplate>
                            </asp:TemplateField>--%>
    
                            <%--<asp:TemplateField Visible="false" >
                                <ItemTemplate>
                                    <asp:Label ID="AnsweringLID" runat="server" text='<%# Eval("AnsweringLetterID")%>'   />  
                                </ItemTemplate>
                            </asp:TemplateField>--%>
    
    
                            <%--<asp:TemplateField Visible="false" >
                                <ItemTemplate>
                                    <asp:Label ID="Late" runat="server" Visible="false" />  
                                </ItemTemplate>
                            </asp:TemplateField>--%>
    
                            <%--<asp:BoundField DataField="Attachments" Visible="false" 
                                SortExpression="Attachments" >
                            </asp:BoundField>
    
                            <asp:BoundField DataField="Importance" Visible="false" 
                                SortExpression="Importance" >
                            </asp:BoundField>
    
                            <asp:TemplateField Visible="false" >
                                <ItemTemplate>
                                    <asp:Label ID="PTField" runat="server" text='<%# Eval("PostTime")  %>'  />  
                                </ItemTemplate>
                            </asp:TemplateField>
    
                        </Columns> --%>
                        
                        <%--<EditRowStyle BackColor="#999999" />
                        <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                        <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" Font-Size="24px"  />
                        <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center"  Font-Size="26px" Font-Names="verdana" />
                        <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
                        <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
                        <SortedAscendingCellStyle BackColor="#E9E7E2" />
                        <SortedAscendingHeaderStyle BackColor="#506C8C" />
                        <SortedDescendingCellStyle BackColor="#FFFDF8" />
                        <SortedDescendingHeaderStyle BackColor="#6F8DAE" />
                        <EmptyDataTemplate>
                            <div class="EmptyDataRowStyle">
                                لا توجد أي سجلات
                            </div> 
                        </EmptyDataTemplate>
                
    
                    </asp:GridView>--%>
                    </td>
                </tr>
    
                <tr>
                    <td>
                        <asp:TextBox ID="LetterID_Ordinary" runat="server" Width="70px" Visible="False"></asp:TextBox>
                    </td> 
                </tr>
    
                <%--<tr>
                    <td>
                        <asp:TextBox ID="LetterID_ExEnt" runat="server" Width="70px" Visible="False"></asp:TextBox>
                    </td> 
                </tr>--%>
    
            </table>
            
         </div>
    
            
          
        </form>
    
        
        
        
    </body>
    </html>
    

    How the change will be made by the Bootstrap on the page?

    Wednesday, November 29, 2017 4:18 PM
  • User475983607 posted

    Just for more understanding, Would you please tell me for example how would I use the bootstrap with the following MasterPage.master

    You'll need to take the the time to learn Bootstrap (or the response framework of your choice) to understand the problems a responsive frameworks solves and the available tools.  Come up with design requirements and use the  Bootstrap tools meet the requirements.

    Looking at your code though, all the CSS widths and heights are fixed pixels.  Use percentages rather than fixed sizes.

    Wednesday, November 29, 2017 4:35 PM
  • User753101303 posted

    Hi,

    You could also have a look at https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 

    Wednesday, November 29, 2017 6:13 PM
  • User-1838255255 posted

    Hi alihusain_77,

    According to your description and needs, you want to your page layout suit for different width's device. I think you could use bootstrap(responsive framework) for dynamically layout. About how to implement it to your code, I think you need learn it and modify your code by yourself through your needs. For more details, please check the following tutorials:

    Bootstrap Responsive Layout:

    https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-responsive-layout.php 

    Bootstrap Grid system:

    https://v4-alpha.getbootstrap.com/layout/grid/ 

    Bootstrap media queries:

    https://v4-alpha.getbootstrap.com/layout/overview/ 

    Best Regards,

    Eric Du

    Thursday, November 30, 2017 5:30 AM