CSS: Put one button under another

Navigation
0

How can one button be placed under another? I could put them inside divs and touch the divs, but I'd like to do it without. 

.btn-danger{
  display:flex;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrarProyecto()">
  <a href="{{ route('admin.project.edit', $project->id)}}" class="btn btn-success btn-sm" id="margindata">Edit</a> 
  <input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
  <input type="hidden" name="_token" value="{{Session::token()}}">
</form>
    
asked by Lluís Puig Ferrer 21.09.2017 в 15:39
source

3 answers

3

Add display: block !important; 

.btn-danger{
  display: block !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrarProyecto()">
  <a href="{{ route('admin.project.edit', $project->id)}}" class="btn btn-success btn-sm" id="margindata">Edit</a> 
  <input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
  <input type="hidden" name="_token" value="{{Session::token()}}">
</form>
    
answered by 21.09.2017 / 15:51
source
1

You do not have to manipulate any CSS with the css-helpers of Bootsrap you can get it with:

  • btn-block 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<form method="POST" action="" onsubmit="return ConfirmarBorrarProyecto()">
  <a href="" class="btn btn-success btn-sm" id="margindata">Edit</a> 
  <input type="submit" value="Delete" class="btn btn-danger btn-sm btn-block" id="margindata">
  <input type="hidden" name="_token" value="">
</form>
    
answered by 21.09.2017 в 16:08
0

Depends on which way you like it most.

margin-right: 100%; 

.btn-danger{
   margin-right:100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrarProyecto()">
  <a href="{{ route('admin.project.edit', $project->id)}}" class="btn btn-success btn-sm" id="margindata">Edit</a> 
  <input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
  <input type="hidden" name="_token" value="{{Session::token()}}">
</form>

position: relative; 

    .btn-danger{
      position:relative;
      top:30px;
      left:-47px;
    }
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrarProyecto()">
      <a href="{{ route('admin.project.edit', $project->id)}}" class="btn btn-success btn-sm" id="margindata">Edit</a> 
      <input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
      <input type="hidden" name="_token" value="{{Session::token()}}">
    </form>

display: block @Pablo version 

.btn-danger{
  display: block !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

        <form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrarProyecto()">
          <a href="{{ route('admin.project.edit', $project->id)}}" class="btn btn-success btn-sm" id="margindata">Edit</a> 
          <input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
          <input type="hidden" name="_token" value="{{Session::token()}}">
        </form>

And more sure ways exist, it will always depend on where and how you want to present them, container or adjacent elements.

    
answered by 21.09.2017 в 15:46
How to pass a JSON to an Object? Scroll menu does not let Jquery javascript go up