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 -->
Related Topics
How to Position Elements Next to Each Other in a Div
How to Arrange HTML Label and Input Side by Side
How to Resize Image in Bootstrap Carousel
How to Place Div in Top Right Hand Corner of Page
How to Affect Other Elements When One Element Is Hovered
How to Create a Simple Like Button
Table With Fixed Header and Fixed Column on Pure CSS
Regex Select All Text Between Tags
Select Country Dropdown in HTML Page
How to Prevent Flex-Items from Overflowing Flex Parent With No Wrap
Embed Pdf on a Webpage and Prevent Download
How to Make Div 100% Height of Browser Without Vertical Scrolling of Header
How to Force Position Absolute With 100% Width to Fit into Parent Div With Padding
Angular 4 Img Src Is Not Found
Font-Size and Img Height Too Big At Website Through Smartphone Oneplus 3T
Open an Exe File Through a Link in a HTML File
Print Header/Footer on All Pages (Print Mode)
How to Split the Screen into 3 Panels and Treat Each Panel Separately