I can't get two buttons to stay when possible one next to other aligned at the right side of the panel.
Here is a fiddle with my current solution.
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">my panel title</h3>
</div>
<div class="panel-body">
<form action="#" class="form">
<div class="row">
<div class="col-sm-offset-10 col-sm-1">
<button type="submit" class="btn btn-default" id="btn1" name="btn1" value="1">button1</button>
</div>
<div class="col-sm-1">
<button class="btn btn-primary" id="btn2" name="btn2" value="2" type="submit">button2</button>
</div>
</div>
</form>
</div>
</div>
Put both buttons in a column (col-*-*) and use text-right class to parent div.
<div class="col-sm-12 text-right">
<button type="submit" class="btn btn-default" id="btn1" name="btn1" value="1">button1</button>
<button class="btn btn-primary" id="btn2" name="btn2" value="2" type="submit">button2</button>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">my panel title</h3>
</div>
<div class="panel-body">
<form action="#" class="form">
<div class="row">
<div class="col-sm-12 text-right">
<button type="submit" class="btn btn-default" id="btn1" name="btn1" value="1">button1</button>
<button class="btn btn-primary" id="btn2" name="btn2" value="2" type="submit">button2</button>
</div>
</div>
</form>
</div>
</div>
Update your
<div class="col-sm-offset-10 col-sm-1">
<button type="submit" class="btn btn-default" id="btn1" name="btn1" value="1">button1</button>
</div>
<div class="col-sm-1">
<button class="btn btn-primary" id="btn2" name="btn2" value="2" type="submit">button2</button>
</div>
to
<span class="col-sm-offset-10 col-sm-1">
<button type="submit" class="btn btn-default" id="btn1" name="btn1" value="1">button1</button>
</span>
<span class="col-sm-1">
<button class="btn btn-primary" id="btn2" name="btn2" value="2" type="submit">button2</button>
</span>
Reason being is that spans can sit side by side whereas divs cannot
Update your row class to :
<div class="row">
<div class="col-sm-offset-10 col-sm-1" style="text-align: right; padding: 0px; ">
<button type="submit" class="btn btn-default" id="btn1" name="btn1" value="1">button1</button>
</div>
<div class="col-sm-1" style="padding-left: 0px; ">
<button class="btn btn-primary" id="btn2" name="btn2" value="2" type="submit">button2</button>
</div>
</div>
Related
How can I align button groups, 3 buttons to the left and another 3 buttons to the right with an input field in the middle in a div.
<div class="container">
<div>
<div class="button-group">
<button type="button" class="btn btn-secondary"></button>
<button type="button" class="btn btn-secondary"></button>
<button type="button" class="btn btn-secondary"></button>
</div>
</div>
<div>
<input type="text" name="textfield" value="">
</div>
<div>
<div class="button-group">
<button type="button" class="btn btn-secondary"></button>
<button type="button" class="btn btn-secondary"></button>
<button type="button" class="btn btn-secondary"></button>
</div>
</div>
</div>
Before:
before applying your answer
after applying
This is how I want to arrange them
Flexbox solves your requirement. Learn more here
.container{
display: flex;
align-items: center;
justify-content: space-around;
}
.button-group{
display:flex;
}
<div class="container">
<div>
<div class="button-group">
<button type="button" class="btn btn-secondary"></button>
<button type="button" class="btn btn-secondary"></button>
<button type="button" class="btn btn-secondary"></button>
</div>
</div>
<div>
<input type="text" name="textfield" value="">
</div>
<div>
<div class="button-group">
<button type="button" class="btn btn-secondary"></button>
<button type="button" class="btn btn-secondary"></button>
<button type="button" class="btn btn-secondary"></button>
</div>
</div>
</div>
Like this?
.center{
text-align: center;
}
.right{
text-align: right;
}
<div class="container">
<div>
<div class="button-group">
<button type="button" class="btn btn-secondary"></button>
<button type="button" class="btn btn-secondary"></button>
<button type="button" class="btn btn-secondary"></button>
</div>
</div>
<div class="center">
<input type="text" name="textfield" value="">
</div>
<div>
<div class="button-group right">
<button type="button" class="btn btn-secondary"></button>
<button type="button" class="btn btn-secondary"></button>
<button type="button" class="btn btn-secondary"></button>
</div>
</div>
</div>
Or do you mean like this?
Source: (Making a flex item float right)
.button-container{
display: flex;
}
.right{
margin-left: auto;
}
.center{
text-align: center;
}
<div class="container">
<div class="button-container">
<div class="button-group left">
<button type="button" class="btn btn-secondary"></button>
<button type="button" class="btn btn-secondary"></button>
<button type="button" class="btn btn-secondary"></button>
</div>
<div class="button-group right">
<button type="button" class="btn btn-secondary"></button>
<button type="button" class="btn btn-secondary"></button>
<button type="button" class="btn btn-secondary"></button>
</div>
</div>
<div class="center">
<input type="text" name="textfield" value="">
</div>
</div>
I want to keep text box and button in the same line, but it's coming in two different lines:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div>
<div style="float:left">
<button class="btn btn-primary" onclick="AddEditExpenses(0)">Add Expense</button>
<button class="btn btn-success" onclick="ReportExpense()">Expense Report</button>
</div>
<div style="float:right; width:40%;">
<form asp-controller="Expense" asp-action="Index" class="form-group">
<div class="col-sm-6">
<input class="form-control" type="text" name="SearchString" placeholder="Search">
<button type="submit" class="btn btn-default btn-info">Filter</button>
</div>
</form>
</div>
</div>
Make your parent element, containing the input and button element a flex box. I used the bootstrap utility classes to achieve this. I added a small margin to the input element as well, also using a bootstrap utility class.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div>
<div style="float:left">
<button class="btn btn-primary" onclick="AddEditExpenses(0)">Add Expense</button>
<button class="btn btn-success" onclick="ReportExpense()">Expense Report</button>
</div>
<div style="float:right; width:40%;">
<form asp-controller="Expense" asp-action="Index" class="form-group">
<div class="col-sm-12 d-flex">
<input class="form-control mr-1" type="text" name="SearchString" placeholder="Search">
<button type="submit" class="btn btn-default btn-info">Filter</button>
</div>
</form>
</div>
</div>
Probably the best way to achieve exactly what you want is something like this
<div class="container">
<div class="row">
<div class="col-sm-8">
<button class="btn btn-primary" onclick="AddEditExpenses(0)">Add Expense</button>
<button class="btn btn-success" onclick="ReportExpense()">Expense Report</button>
</div>
<form asp-controller="Expense" asp-action="Index" class="form-group col-sm-4 d-flex">
<input class="form-control" type="text" name="SearchString" placeholder="Search">
<button type="submit" class="btn btn-default btn-info">Filter</button>
</form>
</div>
</div>
The "Filter" button goes in the second line since Bootstrap's form-control class has display: block and width: 100%. Change display: inline-block and reduce width: 50%.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div>
<div style="float:left">
<button class="btn btn-primary" onclick="AddEditExpenses(0)">Add Expense</button>
<button class="btn btn-success" onclick="ReportExpense()">Expense Report</button>
</div>
<div style="float:right; width:40%;">
<form asp-controller="Expense" asp-action="Index" class="form-group">
<div class="col-sm-8">
<input class="form-control" type="text" name="SearchString" placeholder="Search" style="display: inline-block; width: 50%;">
<button type="submit" class="btn btn-default btn-info">Filter</button>
</div>
</form>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div>
<div style="float:left">
<button class="btn btn-primary" onclick="AddEditExpenses(0)">Add Expense</button>
<button class="btn btn-success" onclick="ReportExpense()">Expense Report</button>
</div>
<div style="float:right; width:40%;">
<form asp-controller="Expense" asp-action="Index" class="form-group">
<div class="col-sm-8">
<div class="d-flex">
<input class="form-control" type="text" name="SearchString" placeholder="Search">
<button type="submit" class="btn btn-default btn-info ml-2">Filter</button>
</div>
</div>
</form>
</div>
</div>
I want to align two elements. Is there a way to to this with help of bootstrap? It works if i float the elements and make the input element's width smaller. But that's not the solution i want to use. Is there a responsive, bootstrap way to do this?
Fiddle with the two elements i wanna align next to each-other (button and input).
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<button type="button" class="btn btn-default btn-sm adminButton">
<span class="table-add glyphicon glyphicon-plus"></span> Add columns
</button>
<input class="form-control input-sm" id="inputsm" type="text">
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
add modal-body & row & col- class
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-3">
<button type="button" class="btn btn-default btn-sm adminButton"><span class="table-add glyphicon glyphicon-plus"></span> Add columns</button>
</div>
<div class="col-sm-8">
<input class="form-control input-sm" id="inputsm" type="text">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
https://jsfiddle.net/e0cr1nL2/107/
Try bootstrap addon
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div>
Just try this css:
#inputsm{
display: inline;
width: 50%;
}
You can provide the width of input as you want..
FIDDLE
I'm using angular-strap aside with Bootstrap3. My aside html template is given below -
<div class="aside" tabindex="-1" role="dialog">
<div class="aside-dialog">
<div class="aside-content">
<div class="aside-header">
<button type="button" class="close" ng-click="$hide()">×</button>
<h4 class="aside-title">Settings</h4>
</div>
<div class="aside-body" ng-controller="SettingsCtrl">
<form name="createCustomerForm" role="form">
<div class="form-group">
<label for="settings_email">Email</label>
<input class="form-control" id="settings_email" name="settings_email" type="text">
</div>
<div class="form-group">
<label for="language">Language: </label>
<button id="language" type="button" class="btn btn-default" data-html="1"
data-animation="am-flip-x" ng-options="country.name for country in countries track by country.id"
data-placeholder="Select country..."
ng-model="selectedLang" ng-change="onLanguageSelected(country)"
bs-select>
Action <span class="caret"></span>
</button>
</div>
</form>
</div>
<div class="aside-footer">
<button type="button" class="btn btn-default" ng-click="$hide()">Close</button>
</div>
</div>
</div>
</div>
This works so far-
But if I change the code -
<div class="aside" tabindex="-1" role="dialog">
<div class="aside-dialog">
<div class="aside-content">
<div class="aside-header">
<button type="button" class="close" ng-click="$hide()">×</button>
<h4 class="aside-title">Settings</h4>
</div>
<div class="aside-body" ng-controller="SettingsCtrl">
<form name="createCustomerForm" role="form">
<div class="form-group">
<label for="settings_email">Email</label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
<input class="form-control" id="settings_email" name="settings_email" type="text">
</div>
</div>
<div class="form-group">
<label for="language">Language: </label>
<button id="language" type="button" class="btn btn-default" data-html="1"
data-animation="am-flip-x" ng-options="country.name for country in countries track by country.id"
data-placeholder="Select country..."
ng-model="selectedLang" ng-change="onLanguageSelected(country)"
bs-select>
Action <span class="caret"></span>
</button>
</div>
</form>
</div>
<div class="aside-footer">
<button type="button" class="btn btn-default" ng-click="$hide()">Close</button>
</div>
</div>
</div>
</div>
Then it captures the whole window -
How can I make it to remain same size?
You can just add a max-width tag on your content class in aside template that you are loading.
Assume
I have two bootstrap modal forms on the same html document.
I want to get these forms to work independently, however, form 1 does not
submit and form2 submits the data entered in both forms.
How do I get these forms to work independently without interfering with the actions
of one another?
Here is the HTML:
<!------------------------form1----------------------------------->
<div class="modal fade" id="register" tabindex="-1" role="dialog" aria-labelledby="orderLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="panel panel-primary">
<div class="panel-heading">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="panel-title" id="registerLabel"><span class="glyphicon glyphicon-info-sign"></span> Register</h4>
</div>
<form id="form1" action="register.php " method="post" accept-charset="utf-8">
<div class="modal-body" style="padding: 5px;">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12" style="padding-bottom: 10px;">
<input class="form-control" name="name" placeholder="Name" type="text" required />
</div>
</div>
<div class="panel-footer" style="margin-bottom:-14px;" data-target="form1" >
<input type="submit" class="btn btn-success" value="Send"/>
<!--<span class="glyphicon glyphicon-ok"></span>-->
<input type="reset" class="btn btn-danger" value="Clear" />
<!--<span class="glyphicon glyphicon-remove"></span>-->
<button style="float: right;" type="button" class="btn btn-default btn-close" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!------------------------form2----------------------------------->
<div class="modal fade" id="buy" tabindex="-1" role="dialog" aria-labelledby="buyLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="panel panel-primary">
<div class="panel-heading">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="panel-title" id="buyLabel"><span class="glyphicon glyphicon-info-sign"></span> Buy</h4>
</div>
<form id="form2" action="buy.php " method="post" accept-charset="utf-8">
<div class="modal-body" style="padding: 5px;">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12" style="padding-bottom: 10px;">
<input class="form-control" item="item" placeholder="Name" type="text" required />
</div>
</div>
<div class="panel-footer" style="margin-bottom:-14px;" data-target="form1" >
<input type="submit" class="btn btn-success" value="Send"/>
<!--<span class="glyphicon glyphicon-ok"></span>-->
<input type="reset" class="btn btn-danger" value="Clear" />
<!--<span class="glyphicon glyphicon-remove"></span>-->
<button style="float: right;" type="button" class="btn btn-default btn-close" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
I can't see the forms ending somewhere.
Please close form before starting another so that it will be independent.