CODEWITHSUNDEEP
asp.nettwitter-bootstraptwitter-bootstrap-3
Green_qaue
Green_qaue

Reputation: 3661

Bootstrap alignment with rows and margins

I am trying to align my buttons in the center. And the text that is currently pulled right I want next to my buttons, and centered. Ive been trying placing rows in every possible combination and Ive tried centering stuff in all sort of ways but just cant get it right. At the moment I'm forced to use a <br> to get all of it to stay on the same row. But there must be a way to fix this that I'm missing. If I try to remove pull-right it just changes row instead of placing itself next to the button.

Code:

<ItemTemplate>
    <td>
        <div class="list-group-item">
        <a href="<%# "http://" + Eval("URL") %>" class="list-group-item col-md-5"><%# Eval("URL") %></a>
        <asp:LinkButton ID="UpVoteButton" runat="server" CssClass="btn btn-default btn-xs" style="margin-left:2%"><i class="fa fa-chevron-up" style="color:green"></i></asp:LinkButton>
            <div class="pull-right">
            <asp:Label ID="LabelScore" runat="server" Text="Score: "></asp:Label>
            <asp:Label ID="LabelScoreValue" runat="server" Text="234"></asp:Label>   
            </div>
        <br />
        <asp:LinkButton ID="DownVoteButton" runat="server" CssClass="btn btn-default btn-xs" style="margin-left:2%"><i class="fa fa-chevron-down" style="color:red"></i></asp:LinkButton>
        </div>
     </td>
</ItemTemplate>

Current look: Current

Upvotes: 0

Views: 633

Answers (1)

Ali
Ali

Reputation: 2592

I have fixed your issue this way, try this one and see if it works.

    <style>
        a.lnk-content, .lbl-score  {
            display:block;
            margin-left: 30px; /* adjust this based on your requirement*/
            margin-top: 10px;  /* adjust this based on your requirement*/
        }
    </style>

<td style="border: 1px solid black; height: 50px;">
    <div class="row">
        <div class="col-xs-7"> <!-- adjust the columns based on your needs -->
            <a href="#" class="lnk-content">this is my link</a>
        </div>
        <div class="col-xs-5"> <!-- adjust the columns based on your needs -->
            <div class="pull-left">
                <div><asp:LinkButton ID="UpVoteButton" runat="server" CssClass="btn btn-default btn-xs"><i class="fa fa-chevron-up" style="color:green"></i></asp:LinkButton></div>
                <div><asp:LinkButton ID="DownVoteButton" runat="server" CssClass="btn btn-default btn-xs"><i class="fa fa-chevron-down" style="color:red"></i></asp:LinkButton></div>
            </div>
            <div class="lbl-score">
                <asp:Label ID="LabelScore" runat="server" Text="Score: "></asp:Label>
                <asp:Label ID="LabelScoreValue" runat="server" Text="234"></asp:Label>
            </div>
        </div>
    </div>
</td>

and this is the result, you could adjust this in anyway you want easily now: the buttons on the result below don't appear properly because I don't have the styles.

enter image description here

I hope it helps you.

Upvotes: 1

Related Questions