CODEWITHSUNDEEP
c#cssasp.nettwitter-bootstrap
TechGuy
TechGuy

Reputation: 4560

Button alignment not set in asp buttons & Bootstrap dropdown

I have a asp button and a button dropdown list. The problem is my button dropdown always goes to below the other buttons.I want that button to the other button row.

Here I paste the screenshot of the current buttons(dropdown take it from Bootstrap 2.3 )

buttons

My Coding Goes here

<div class="alert alert-success">
    <a href="#" class="alert-link">
        <p align="right">
            Welcome <%=GetUserName()%>
            (Admin Level)
    </a>
    <asp:Button ID="btnUsr" class="btn btn-default" runat="server" OnClick="btnUsr_Click" Text="User Management"/>
    <asp:Button ID="btnUpload" class="btn btn-info" runat="server" OnClick="btnUpload_Click" Text="Upload Files" />
    <asp:Button ID="btnlogout" class="btn btn-success" runat="server" OnClick="btnlogout_Click" Text="LogOut" />

    <li class="dropdown" style="list-style: none;">
        <a href="#" data-toggle="dropdown" class="dropdown-toggle btn btn-primary">More <b class="caret"></b>
        </a>
        <ul aria-labelledby="dLabel" role="menu" class="dropdown-menu">
            <li>
                <a href="SendSMS.aspx">Send SMS</a>
            </li>
            <li>
                <a href="CommonPageManagement.aspx">Manage Pages & Sections</a>
            </li>
        </ul>
    </li>

    <br />

</div>

Upvotes: 1

Views: 584

Answers (2)

PixelPlex
PixelPlex

Reputation: 794

You could try putting your buttons between ul tags. I haven't tested this but try something like:

<ul>
     <li><asp:Button ID="btnUsr" class="btn btn-default" runat="server" OnClick="btnUsr_Click" Text="User Management"/></li>
     <li><asp:Button ID="btnUpload" class="btn btn-info" runat="server" OnClick="btnUpload_Click" Text="Upload Files" /></li>
     <li><asp:Button ID="btnlogout" class="btn btn-success" runat="server" OnClick="btnlogout_Click" Text="LogOut" /></li>
     <li class="dropdown" style="list-style: none;">
                <a href="#" data-toggle="dropdown" class="dropdown-toggle btn btn-primary">More <b class="caret"></b></a>
                <ul aria-labelledby="dLabel" role="menu" class="dropdown-menu">
                    <li>
                        <a href="SendSMS.aspx">Send SMS</a>
                    </li>
                     <li>
                        <a href="CommonPageManagement.aspx">Manage Pages & Sections</a>
                    </li>
                </ul>
            </li>
</ul>

I think bootstrap has a class or id you could use to make the ul display as a row. Additionally, you could mix in your own css with that of bootstrap, but I think you should be careful with that, because this could conflict with the css from bootstrap.

Upvotes: 1

razakj
razakj

Reputation: 1049

You should wrap a content to row class :

<div class="row">
... content  ...
</div>

If you want to align content to right just use pull-right class instead of p align.

I'd suggest to read through a bootstrap documentation where you can find grid system description.

Upvotes: 1

Related Questions