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*/
margin-right:16px;
}
.Container input:last-child{
margin-right:0px;
/*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="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

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

    <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>
      </select>
    </div>

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

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" 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

:css
  .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.

IE)

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

CSS:

.name2 button
{
  margin-left:5px;
}

Otherwise,

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="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/><script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></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 -->