Hello,
I'm using Bootstrap to display a data pager and buttons in columns. I'm using bootstrap so the columns will stack on mobile devices.
Here is sample code:
<div id="SearchBGColor" style="width:100%;padding-bottom:20px;padding-top:30px;" align="center" runat="server" >
<div class="control-panel text-center justify-content-center" style="max-width:900px;">
<div class="row" style="margin-top:10px;margin-bottom:20px;" id="Div2" runat="server">
<div class="col-md-3 text-center justify-content-center" runat="server" id="DataPagerCell">
<div id="DataPagerDiv" runat="server">
<asp:DataPager ID="DataPager1" runat="server" PageSize="18" PagedControlID="ListView1" height="5" ></asp:DataPager>
</div>
</div>
<div class="col-md-3 text-center justify-content-center" id="ViewAllCell" runat="server">
<div class="control-panel__btn" id="ViewAllButton" runat="server" visible="true">
<asp:HyperLink CssClass="btn btn-primary btn-xl w-50" style="background-color:#0677BD;color:#FFFFFF;" ID="SearchAllBrochuresButton" runat="server">VIEW ALL</asp:HyperLink>
</div>
</div>
<div class="col-md-3 text-center justify-content-center" id="ShareCell" runat="server">
<div class="control-panel__btn" id="ShareButton" runat="server" visible="true">
<asp:HyperLink CssClass="btn btn-primary btn-xl w-50" style="background-color:#0677BD;color:#FFFFFF;" ID="SendRackHyperlink" runat="server">SHARE</asp:HyperLink>
</div>
</div>
<div class="col-md-3 text-center justify-content-center" id="HomeCell" runat="server">
<div class="control-panel__btn" id="HomeButton" runat="server" visible="false">
<asp:HyperLink CssClass="btn btn-primary btn-xl w-50" style="background-color:#0677BD;color:#FFFFFF;" ID="FirstHyperlink1" runat="server">HOME</asp:HyperLink>
</div>
</div>
</div>
</div>
</div>
STYLE SHEET
.control-panel {
display: inline;
text-align: center;
width:100%;
max-width: 900px;
}
.control-panel_link {
display: table-cell;
text-align: left;
width: 15%;
padding:10px;
}
.control-panel__btn {
display: table-cell;
width: 30%;
padding-left: 10px;
}
.control-panel__btn .btn {
width: 100%;
}
When a user first accesses the page, only "VIEW ALL" and "SHARE" buttons are shown. The others have their "visible" attribute set to "false" in code behind.
When a user does a search, it will show the datapager and all 3 buttons.
As you can see, all of the buttons are spread out. I've tried setting the main container to a max width, but that isn't working.
I would like to center the buttons and have them next to each other, regardless of how many buttons there are.
Any idea what I'm doing wrong or a way to fix this? Before I spend time changing the classes in code behind, I wanted to make sure I'm not missing something obvious.
Thank you.
