Aligning Twiter bootstrap buttons inside a Table

Question

Aligning Twiter bootstrap buttons inside a Table

Asked 6 years ago

Viewed 799 times

0

My buttons inside the table are breaking the row when a column is added in the table, they are getting like this:

My code ta as follows:

<div class="row">
<div class="col-md-4">
    @using (Html.BeginForm("Index", "Clientes", FormMethod.Get))
    {
        <div id="custom-search-input">
            <div class="input-group col-md-12">
                @Html.TextBox("buscar", null, new { @class = "form-control input", @placeholder = "Pesquisar por nome" })
                <span class="input-group-btn">
                    <button class="btn btn-info btn" type="submit">
                        <small><i class="glyphicon glyphicon-search"></i></small>
                    </button>
                </span>
            </div>
        </div>
    }
</div>
<div class="col-md-8 ">
    <div>
        <div class="pull-right">
            <a href="@Url.Action("Create", "Barcos")" data-modal="" class="btn btn-primary">
                <span title="Detalhes" class="glyphicon glyphicon-plus-sign"></span> Novo Barco
            </a>
        </div>
    </div>
</div>

  @if (Model.Any())
 {
<table class="table" >
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Nome)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Email)
        </th>

        <th>
            @Html.DisplayNameFor(model => model.SapId)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.CapacidadeAgua)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.CapacidadeOleo)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Velocidade)
        </th>

        <th>
            @Html.DisplayNameFor(model => model.Setor)
        </th>
        <th>
            @Html.DisplayName("Classe Embarcação")
        </th>
        <th>
            @Html.DisplayName("Classe Embarcação")
        </th>
        <th> </th>
    </tr>



        @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Nome)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Email)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.SapId)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.CapacidadeAgua)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.CapacidadeOleo)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Velocidade)
            </td>

            <td>
                @Html.DisplayFor(modelItem => item.Setor)
            </td>

            <td>
                @Html.DisplayFor(modelItem => item.ClasseDoBarco)
            </td>

            <td>
                @Html.DisplayFor(modelItem => item.TipoDeOperacaoEmbarcacao)
            </td>


            <td align="right">
                <a href="@Url.Action("Edit","Barcos", new { id = item.Id })" class="btn btn-warning" data-modal="">
                    <span title="Editar" class="glyphicon glyphicon-pencil">Editar</span>
                </a>
                @if (User.IsInRole("Administrator"))
                {
                    <a href="@Url.Action("Details","Barcos", new { id = item.Id })" class="btn btn-warning" data-modal="">
                        <span title="Editar" class="glyphicon glyphicon-pencil">Detalhes</span>
                    </a>
                }
                <a href="@Url.Action("Delete","Barcos", new { id = item.Id })" class="btn btn-danger">
                    <span title="Excluir" class="glyphicon glyphicon-trash">Excluir</span>
                </a>
                <a href="@Url.Action("RedirectTo","Barcos", new { id = item.SapId })" class="btn btn-info" target="_blank">
                    <span title="Excluir" class="glyphicon glyphicon-map-marker">Localizar</span>
                </a>
            </td>
        </tr>
    }
</table>
   }

How would I line them up horizontally?

EDIT: @Gilmar

3 answers

Browser other questions tagged c# asp.net-mvc twitter-bootstrap razor

You are not signed in. Login or sign up in order to post.

by Sam • **79,597** points · Answer 1 · 2018-11-01T19:11:06+00:00

Put the class .btn-group on td where the buttons are:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<table class="table" >
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Nome)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Email)
        </th>

        <th>
            @Html.DisplayNameFor(model => model.SapId)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.CapacidadeAgua)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.CapacidadeOleo)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Velocidade)
        </th>

        <th>
            @Html.DisplayNameFor(model => model.Setor)
        </th>
        <th>
            @Html.DisplayName("Classe Embarcação")
        </th>
        <th>
            @Html.DisplayName("Classe Embarcação")
        </th>
        <th> </th>
    </tr>
     <tr>
         <td>
             @Html.DisplayFor(modelItem => item.Nome)
         </td>
         <td>
             @Html.DisplayFor(modelItem => item.Email)
         </td>
         <td>
             @Html.DisplayFor(modelItem => item.SapId)
         </td>
         <td>
             @Html.DisplayFor(modelItem => item.CapacidadeAgua)
         </td>
         <td>
             @Html.DisplayFor(modelItem => item.CapacidadeOleo)
         </td>
         <td>
             @Html.DisplayFor(modelItem => item.Velocidade)
         </td>
   
         <td>
             @Html.DisplayFor(modelItem => item.Setor)
         </td>
   
         <td>
             @Html.DisplayFor(modelItem => item.ClasseDoBarco)
         </td>
   
         <td>
             @Html.DisplayFor(modelItem => item.TipoDeOperacaoEmbarcacao)
         </td>
   
   
         <td align="right" class="btn-group">
             <a href="@Url.Action("Edit","Barcos", new { id = item.Id })" class="btn btn-warning" data-modal="">
                 <span title="Editar" class="glyphicon glyphicon-pencil">Editar</span>
             </a>
                 <a href="@Url.Action("Details","Barcos", new { id = item.Id })" class="btn btn-warning" data-modal="">
                     <span title="Editar" class="glyphicon glyphicon-pencil">Detalhes</span>
                 </a>
             <a href="@Url.Action("Delete","Barcos", new { id = item.Id })" class="btn btn-danger">
                 <span title="Excluir" class="glyphicon glyphicon-trash">Excluir</span>
             </a>
             <a href="@Url.Action("RedirectTo","Barcos", new { id = item.SapId })" class="btn btn-info" target="_blank">
                 <span title="Excluir" class="glyphicon glyphicon-map-marker">Localizar</span>
             </a>
         </td>
     </tr>
</table>

This class groups buttons in the same row.

by Gilmar Alonso • **137** points · Answer 2 · 2018-11-01T19:10:03+00:00

0

In css add

tr{
display:flex;
}
td{
justify-content: center;
justify-items: center;
align-items: center;
align-content: center;
}

I could complete the answer and put an example of how I would look with this css.

– Roberto de Campos

2018/11/01 at 19:29
Oops, I took the test, but it didn’t roll, I’m going to post an image in the question I asked to show how it turned out

– Jhensen

2018/11/01 at 19:36

by Demian Bibiano • **198** points · Answer 3 · 2018-11-01T19:01:49+00:00

I think if you add one text-align: center; in <td> resolve (because you don’t use button).

in case for testing:

<td style="text-align: center;">
                <a href="@Url.Action("Edit","Barcos", new { id = item.Id })" class="btn btn-warning" data-modal="">
                    <span title="Editar" class="glyphicon glyphicon-pencil">Editar</span>
                </a>
                @if (User.IsInRole("Administrator"))
                {
                    <a href="@Url.Action("Details","Barcos", new { id = item.Id })" class="btn btn-warning" data-modal="">
                        <span title="Editar" class="glyphicon glyphicon-pencil">Detalhes</span>
                    </a>
                }
                <a href="@Url.Action("Delete","Barcos", new { id = item.Id })" class="btn btn-danger">
                    <span title="Excluir" class="glyphicon glyphicon-trash">Excluir</span>
                </a>
                <a href="@Url.Action("RedirectTo","Barcos", new { id = item.SapId })" class="btn btn-info" target="_blank">
                    <span title="Excluir" class="glyphicon glyphicon-map-marker">Localizar</span>
                </a>
            </td>

If it works, add it to your CSS class and use it, or create one for it.