In my current template, I am utilizing Bootstrap and need to position three buttons accordingly. The first button should be all the way to the left, the second in the middle, and the third (final) one on the right within a container element.
While attempting to achieve this with Bootstrap, I have not found any specific guidance for my requirements. Whenever I try to wrap a <div> tag around the input elements, the HTML document displays them on separate rows:
.foo {
width: 23%;
margin: 0 auto;
}
.desired {
position: absolute;
left: 10%;
}
.desired div {
width: 10%;
text-align: center;
display: inline-block;
}
.example2 {
position: absolute;
left: 50%;
margin-left: -5%;
}
.example3 {
position: absolute;
right: 0%;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
I tried using the following HTML/CSS:
<!--Attempted code using Bootstrap -->
<div class="container">
<input type="submit" class="btn btn-default" value="Foo">
<input type="submit" class="btn btn-default" value="Test">
<input type="submit" class="btn btn-default pull-right" value="Bar">
</div>
If this snippet doesn't display correctly due to percentage-based positioning, try viewing it in full page mode.
My question is: Can Bootstrap be used to align buttons within a document, ensuring they are placed on the same horizontal line or row?
Thank you in advance.