How to Make Space Between Two Buttons in Same Div

How can I make space between two buttons in same div?

Put them inside btn-toolbar or some other container, not btn-group. btn-group joins them together. More info on Bootstrap documentation.

Edit: The original question was for Bootstrap 2.x, but the same is still valid for Bootstrap 3 and Bootstrap 4.

In Bootstrap 4 you will need to add appropriate margin to your groups using utility classes, such as mx-2.

Spacing between two buttons inside a DIV

in the css :

.Container input{ /* You Can Name it what you want*/
.Container input:last-child{
/*so the last one dont push the div thas giving the space only between the inputs*/

give that css class to the div :

<div class="Container "><input........</div>

How can I get the same distance between two buttons and a select element on the same line?

I'd use a simple flex layout instead of trying to bang columns into shape. Use flex-fill on the center element to get it to stretch, and add horizontal (x-axis) margin & padding for spacing. I used both to match the default container padding. You could certainly use other combinations if you don't use a container.

body {
background: pink !important; /* for spacing visualization */
<link rel="stylesheet" href="" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container-fluid my-2">
<div class="d-flex justify-content-between">
<button class="btn btn-success">Prev</button>

<div class="flex-fill mx-2 px-1">
<select class="form-select" aria-label="Default select example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>

<button class="btn btn-success">Next</button>

<script src="" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Create two buttons without space in between them

You can try these styles (as you have to override some default styles) and don't forget to remove whitespace between buttons (here I simply made them close to each other). You can also consider the autofocus attribute to have the focus at the start.

button {  border: none;  outline: none;  padding: 10px 20px;}
button#legal:focus,button#individual:focus { background: blue; color: white;}
<section>  <button id="legal" autofocus >Legal Person</button><button id="individual">Individual</button></section>

Adding space between two buttons

you can add margin left on second button. you can add class on second button e.g

 =link_to "New Subscription", { :controller => "pt_app", :action => "new_subn"}, :class => 'btn btn-success left-margin'

and then you can add css in your haml file

.left-margin { margin-left: 2px }

Or you can add inline css to one of these buttons.

How to add space between bootstrap buttons in same div?

I would highly recommend linking a css file and tampering with div margin isolated to the designated class.


<div class="Name1">
<button class="Name2" type="button">View/Edit</button>
<button class="Name3" type="button">Edit Ratings</button>


.name2 button


An HTML alternative would be...


how to make space between two bootstrap button

Add this CSS :

button {
margin-left: 10px;
margin-top: 10px;
background: white;
padding: 10px 20px;
border: none;

Here margin-left will give you the space between two , I have added more styling option here which will help you.

The margin-left and margin-top gives space, the background changes the background of the button, the padding adds space inside the button, and border gets rid of the default border.

How to have a space between the two buttons? And how to align them to center

may be you are looking for this class="text-center" will do a trick, and some CSS for spacing

.btn-spacing {margin-right: 5px;margin-bottom: 5px !important;}
<script src=""></script><link href="" rel="stylesheet"/><script src=""></script><div class="form-group">  <label for="trucktype" class="col-sm-2">Truck Type</label>        <div class="col-sm-4">        <select id="trucktype" name="trucktype" class="form-control" tabindex="2">          <option value="volvo">Service Wheels</option>          <option value="saab">Boom Truck</option>          <option value="mercedes">Crane Truck</option>          <option value="audi">Pole Trailer Truck</option>        </select>        </div>      </div>
<div class="form-group"> <label for="truckloadcapacity" class="col-sm-2">Truck load capacity</label> <div class="col-sm-4"><input type="text" name="truckloadcapacity" id="truckloadcapacity" class="form-control" tabindex="3"></div> </div>
<div class="form-group"> <label for="truckdesc" class="col-sm-2">Truck Description:</label> <div class="col-sm-4"><textarea class="form-control" rows="3" id="truckdesc" tabindex="4"></textarea></div> </div>
<div class="form-group"> <label for="truckphoto" class="col-sm-2">Truck Photo</label> <div class="col-sm-4"><input type="file" name="file" id="truckphoto" class="form-control" tabindex="5"></div> </div>
<!-- BUTTONS start --> <div class="row"> <div class="col-sm-4"> <div class="form-group btn-block text-center"> <input class="btn-primary btn-lg col-sm-4 btn-spacing " type="submit" value="Save"> <input type="reset" class="btn-default btn-lg btn-spacing col-sm-4" name="clear" value="Clear"> </div> </div> </div> <!-- BUTTONS end -->

Related Topics

Leave a reply