0

No consigo alinear estos dos botones en la misma celda quiero que salga uno al lado del otro y no como me salen ponga lo que ponga que es uno debajo del otro os dejo el código a ver si me podéis echar una mano con esto.

Estoy usando Laravel y una plantilla ADMINDLTE que a su vez usa BOOTSTRAP, pero no consigo nada ni con el

Gracias

 <div class="row">
        <div class="col-m-12 box">
          <div class="box">
            <div class="margin box-header with-border">
              <a href="{{ url('ultimostrabajos/create') }}" class="btn btn-primary">Crear</a>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <table class="table table-bordered">
                <thead>
                <tr>
                  <th class="text-center">Preview</th>
                  <th class="text-center">Nombre</th>
                  <th class="text-center">Fecha creacion</th>
                  <th class="text-center">Titulo</th>
                  <th class="text-center">Descripcion</th>
                  <th class="text-center">Sort</th>
                  <th class="text-center">Acciones</th>
                </tr>
                </thead>
                <tbody>
                @foreach($ultimostrabajos as $listado)
                <tr>

                  <td class="text-center"><img src="/storage/{{ $listado->url }}" alt="" width="100%" height="25%"/></td>
                  <td class="text-center">{{$listado->name}}</td>
                  <td class="text-center">{{$listado->created_at}}</td>
                  <td class="text-center">{{$listado->titulo}}</td>
                  <td class="text-center">{{$listado->descripcion}}</td>
                  <td class="text-center">{{$listado->sort}}</td>
                  <td>
                          <button class="btn btn-info"> <a href="{{ route('ultimostrabajos.edit', $listado->id) }}"><i class="fa fa-edit"></i></a></button>
                           <form action="{{ route('ultimostrabajos.destroy', $listado->id) }}"  method="post">
                           @csrf
                           @method('DELETE')
                          <button type="submit" class="btn btn-danger "><i class="fa fa-trash"></i></button>
                           </form>

                  </td>
                 </tr>
                  @endforeach
              </tbody>
              </table>
         </div>
        </div>
      </div>
    </div>
    </section>
1
  • ¿Qué versión de bootstrap usas la 3 o la 4? Commented el 3 sept. 2019 a las 23:02

2 respuestas 2

1
<div class="d-flex">
    <button class="btn btn-info mx-1"> <a href="{{ route('ultimostrabajos.edit', $listado->id) }}"><i class="fa fa-edit"></i></a></button>
    <form action="{{ route('ultimostrabajos.destroy', $listado->id) }}"  method="post">
    @csrf
    @method('DELETE')
    <button type="submit" class="btn btn-danger mx-1"><i class="fa fa-trash"></i></button>
    </form>
</div>

Si usas BS4, sencillo, creas un div y asignas la clase d-flex esto hará que tus botones se alinien. Agregué la clase mx-1 a los botones que les da un pequeño margin y se vean más estéticos

0

Puedes lograrlo con display: inline-block; asi:

.form-button {
  display: inline-block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<div class="row">
        <div class="col-m-12 box">
          <div class="box">
            <div class="margin box-header with-border">
              <a href="{{ url('ultimostrabajos/create') }}" class="btn btn-primary">Crear</a>
            </div>            
            <div class="box-body">
              <table class="table table-bordered">
                <thead>
                <tr>
                  <th class="text-center">Preview</th>
                  <th class="text-center">Nombre</th>
                  <th class="text-center">Fecha creacion</th>
                  <th class="text-center">Titulo</th>
                  <th class="text-center">Descripcion</th>
                  <th class="text-center">Sort</th>
                  <th class="text-center">Acciones</th>
                </tr>
                </thead>
                <tbody>               
                <tr>
                  <td class="text-center"><img src="/storage/{{ $listado->url }}" alt="" width="100%" height="25%"/></td>
                  <td class="text-center">{{$listado->name}}</td>
                  <td class="text-center">{{$listado->created_at}}</td>
                  <td class="text-center">{{$listado->titulo}}</td>
                  <td class="text-center">{{$listado->descripcion}}</td>
                  <td class="text-center">{{$listado->sort}}</td>
                  <td>
                          <button class="btn btn-info"> <a href="{{ route('ultimostrabajos.edit', $listado->id) }}"><i class="fa fa-edit"></i></a></button>
                           <form action="{{ route('ultimostrabajos.destroy', $listado->id) }}"  method="post" class="form-button">
                          
                          <button type="submit" class="btn btn-danger "><i class="fa fa-trash"></i></button>
                           </form>
                  </td>
                 </tr>                 
              </tbody>
              </table>
         </div>
        </div>
      </div>
    </div>
    </section>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.