Im pretty new to HTML and bootstrap
I made a centered form but i want to add a small button (red cross) on the right of my "chapter title" input field and i dont know how do i do it
Current html:
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Chapter title" required>
</div>
<div class="form-group">
<textarea class="form-control" rows="15"></textarea>
</div>
<div class="form-group" align="center">
<button class="btn btn-outline-secondary" id="add-chapter">Add chapter</button>
</div>
</form>
what do i need to add or change
Use float-right along with the negative margin utility class, for example mr-n4...
<div class="container">
<button class="btn btn-text float-right mr-n4 close">
<span aria-hidden="true">×</span>
</button>
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Chapter title" required>
</div>
<div class="form-group">
<textarea class="form-control" rows="15"></textarea>
</div>
<div class="form-group" align="center">
<button class="btn btn-outline-secondary" id="add-chapter">Add chapter</button>
</div>
</form>
</div>
https://codeply.com/p/CliBMjnlsN
#Zim's answer works, but I just don't like working with floats so I came up another solution with absolute positioning.
<form>
<div class="form-group form-group-with-extra-button">
<input type="text" class="form-control" placeholder="Chapter title" required>
<button type="button" class="btn btn-extra">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="form-group">
<textarea class="form-control" rows="15"></textarea>
</div>
<div class="form-group text-center">
<button class="btn btn-outline-secondary" id="add-chapter">Add chapter</button>
</div>
</form>
.form-group-with-extra-button {
position: relative;
}
.form-group-with-extra-button .btn-extra {
position: absolute;
left: 100%;
top: 0;
color: var(--danger);
}
demo: https://jsfiddle.net/davidliang2008/1dpz0w52/24/
Thats not really what i wanted but i guess thats what im gonna stick to
<form>
<div class="form-group input-group">
<input type="text" class="form-control" placeholder="Chapter title" required>
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false"></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Delete chapter</a>
<a class="dropdown-item" href="#">Add chapter before</a>
<a class="dropdown-item" href="#">Add chapter after</a>
</div>
</div>
</div>
<div class="form-group">
<textarea class="form-control" rows="10"></textarea>
</div>
<div class="form-group" align="center">
<button class="btn btn-outline-secondary" id="add-chapter">Add chapter</button>
</div>
</form>
Related
How do I align the button to the right of the text box, after using form control on the search box, I am able to align the button to the left of the text box but I wish to have it on the right, please help.
<div class="row">
<div class="col-sm-12">
<div class="col-sm-4 pull-left">
<input type="button" class="btn btn-default" value="New" onclick="go('password_det.asp');" />
</div>
<div class ="form-group pull-right">
<input class="form-control" id="txtSearch" name="txtSearch" placeholder="Search" aria-controls="example1" type="text" />
</div>
<div class="pull-right">
<button class="btn" type="submit" name="btnSubmit" value="Search" onclick="showContent('page=1');return false;">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
</div>
</div>
The search box and button
Fix again!
<div class="row">
<div class="col-sm-12">
<div class="col-sm-4 pull-left">
<input type="button" class="btn btn-default" value="New" onclick="go('password_det.asp');" />
</div>
<div class="pull-right">
<button class="btn" type="submit" name="btnSubmit" value="Search" onclick="showContent('page=1');return false;">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
<div class ="form-group pull-right">
<input class="form-control" id="txtSearch" name="txtSearch" placeholder="Search" aria-controls="example1" type="text" />
</div>
</div>
</div>
Try Input Groups on the form elements, bootstrap by default provides those classes
This is how you make use of them
HTML
<div class="row">
<div class="col-sm-12">
<div class="col-sm-4 pull-left">
<input type="button" class="btn btn-default" value="New" onclick="go('password_det.asp');" />
</div>
<div class="col-sm-6 pull-right">
<div class ="input-group search-bar">
<input class="form-control" id="txtSearch" name="txtSearch" placeholder="Search" aria-controls="example1" type="text" />
<span class="input-group-addon">
<button class="btn search-btn" type="submit" name="btnSubmit" value="Search" onclick="showContent('page=1');return false;">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</div>
</div>
CSS
.search-bar{
padding:0;
}
.search-bar .input-group-addon{
padding:0;
}
.search-bar .search-btn{
padding:5px 12px;
}
Link for reference
hope this helps..
Just change place them:
Change:
<div class ="form-group pull-right">
<input class="form-control" id="txtSearch" name="txtSearch" placeholder="Search" aria-controls="example1" type="text" />
</div>
<div class="pull-right">
<button class="btn" type="submit" name="btnSubmit" value="Search" onclick="showContent('page=1');return false;">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
To:
<div class="pull-right">
<button class="btn" type="submit" name="btnSubmit" value="Search" onclick="showContent('page=1');return false;">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
<div class ="form-group pull-right">
<input class="form-control" id="txtSearch" name="txtSearch" placeholder="Search" aria-controls="example1" type="text" />
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-4 pull-left">
<input type="button" class="btn btn-default" value="New" onclick="go('password_det.asp');" />
</div>
<div class="pull-right">
<button class="btn" type="submit" name="btnSubmit" value="Search" onclick="showContent('page=1');return false;">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
<div class ="form-group pull-right">
<input class="form-control" id="txtSearch" name="txtSearch" placeholder="Search" aria-controls="example1" type="text" />
</div>
</div>
</div>
Here is an example of inline search form:
<div class="pull-right">
<form method="get" action="">
<div class="form-group form-inline">
<input type="text" placeholder="search" class="form-control" name="s">
<button title="search" name="search" type="submit" class="btn btn-primary">Search</button>
</div>
</form>
</div>
you can use style=float: right; on button tag to align button to right and then adjust margin and padding accordingly.
I'm using a primaly bootstrap from getbootstrap.com. I want to align properly the account type dropdown here. Also the dropdown list items are not properly aligned to the dropdown button. Please help.Thank you.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-horizontal" action="" method="post" enctype="multipart/form-data" align="center">
<div class="form-group">
<div class="col-sm-12">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Account type
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Supplier</li>
<li>Client</li>
</ul>
</div>
</div>
<div class="form-group">
<label for="supplieruname" class="col-sm-2 control-label">Username:</label>
<div class="col-sm-4"><input type="text" class="form-control" id="supplieruname" placeholder="Username" tabindex="1" required></div>
</div>
<div class="form-group">
<label for="supplierpassword" class="col-sm-2 control-label">Set Password</label>
<div class="col-sm-4"><input type="text" class="form-control" id="supplierpassword" placeholder="Password" tabindex="2" float="right" required></div>
</div>
<div class="form-group">
<label for="acctype" class="col-sm-2 control-label">Account Type</label>
<div class="col-sm-4"><input type="text" class="form-control" id="acctype" placeholder="Company Name" tabindex="3" float="right" required></div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group"><input class="btn" type="submit" value="Save">
<input type="reset" class="btn" name="clear" value="Clear">
</div>
</div>
</form>
Add class btn-group to the dropdown.so the dropdown won't get the 100% width.Thus the dropdown menu will be aligned to center.Or add display:inline-block style to the .dropdown
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-horizontal" action="" method="post" enctype="multipart/form-data" align="center">
<div class="form-group">
<div class="col-sm-12">
<div class="dropdown btn-group">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Account type
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Supplier</li>
<li>Client</li>
</ul>
</div>
</div>
<div class="form-group">
<label for="supplieruname" class="col-sm-2 control-label">Username:</label>
<div class="col-sm-4"><input type="text" class="form-control" id="supplieruname" placeholder="Username" tabindex="1" required></div>
</div>
<div class="form-group">
<label for="supplierpassword" class="col-sm-2 control-label">Set Password</label>
<div class="col-sm-4"><input type="text" class="form-control" id="supplierpassword" placeholder="Password" tabindex="2" float="right" required></div>
</div>
<div class="form-group">
<label for="acctype" class="col-sm-2 control-label">Account Type</label>
<div class="col-sm-4"><input type="text" class="form-control" id="acctype" placeholder="Company Name" tabindex="3" float="right" required></div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group"><input class="btn" type="submit" value="Save">
<input type="reset" class="btn" name="clear" value="Clear">
</div>
</div>
</form>
For the time being, you can apply the following come back later to fix.
Fix it on the page.
<style>
.dropdown, .dropup {
position: fixed;
z-index: 999;
float:center;
}
.form-group{margin-bottom:20px;}
</style>
The requirement is a horizontal form group inside of a dropdown. When the user clicks the dropdown, they are able to enter text into the appearing text fields.
I am losing control over the width and margin of the form group when inside of the dropdown. For example, the following form group renders fine:
<form class="form-horizontal">
<div class="form-group">
<label for="strike-from" class="col-sm-2 control-label">From</label>
<div class="col-xs-1">
<input type="text" class="form-control" id="strike-from" value="">
</div>
</div>
<div class="form-group">
<label for="strike-to" class="col-sm-2 control-label">To</label>
<div class="col-xs-1">
<input type="text" class="form-control" id="strike-to" value=""">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Apply</button>
</div>
</div>
</form>
However when embedding this same HTML inside of a dropdown wrapper, the text fields extend past the container and the margin is compressed.
<div class="form-inline">
<div class="form-group">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="strikes-range" data-toggle="dropdown" aria-haspopup="true">
Strikes
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="strikes">
<li>
<form class="form-horizontal">
<div class="form-group">
<label for="strike-from" class="col-sm-2 control-label">From</label>
<div class="col-xs-1">
<input type="text" class="form-control" id="strike-from" value="">
</div>
</div>
<div class="form-group">
<label for="strike-to" class="col-sm-2 control-label">To</label>
<div class="col-xs-1">
<input type="text" class="form-control" id="strike-to" value="">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Apply</button>
</div>
</div>
</form>
</li>
</ul>
</div>
</div>
</div>
Is there an out of the box implementation of this? Otherwise do I just need to add custom styles for width of text boxes and margin?
Or am I just implementing something incorrectly?
I have edited some column widths and removed an extra " and added a class donotchange for removing the alignment error.
Here is my code
HTML
<div class="form-inline">
<div class="form-group">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="strikes-range" data-toggle="dropdown" aria-haspopup="true"> Strikes <span class="caret"></span> </button>
<ul class="dropdown-menu" aria-labelledby="strikes">
<li style="width: 280px;">
<form class="form-horizontal" style="display:block;">
<div class="form-group donotchange">
<label for="strike-from" class="col-sm-2 control-label">From</label>
<div class="col-xs-8">
<input type="text" class="form-control" id="strike-from" value="">
</div>
</div>
<div class="form-group donotchange">
<label for="strike-to" class="col-sm-2 control-label">To</label>
<div class="col-xs-8">
<input type="text" class="form-control" id="strike-to" value="">
</div>
</div>
<div class="form-group donotchange">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Apply</button>
</div>
</div>
</form>
</li>
</ul>
</div>
</div>
<!-- No need. For checking Only-->
<div class="form-group">
<button class="btn btn-default dropdown-toggle" type="button" id="strikes-range" data-toggle="dropdown" aria-haspopup="true"> Sample Button </button>
</div>
<div class="form-group">
<input type="text" class="form-control" id="strike-to" value="">
</div>
<!-- No need. For checking Only-->
</div>
CSS
#media (min-width: 768px){
.form-inline .donotchange {
display: block;
margin-bottom: 10px;
vertical-align: middle;
}
.form-horizontal .donotchange {
margin-right: 0px;
margin-left: 0px;
}}
#media (min-width: 768px){
.form-inline .donotchange {
display: block;
margin-bottom: 10px;
vertical-align: middle;
}}
Check my working code here http://www.bootply.com/N0lccYSCsg
Check whether it works as per your requirements.
Good day!
I try to make a full width search box. its working in tab and mobile but not working in desktop or laptop
Here is my code
<div class="row">
<div class="col-md-offset-2 col-sm-offset-2 col-xs-offset-1 col-md-8 col-sm-8 col-xs-10">
<form action="" autocomplete="off" class="navbar-form" method="post" accept-charset="utf-8">
<div class="input-group">
<input name="searchtext" value="" class="form-control" type="text">
<span class="input-group-btn">
<button class="btn btn-default" type="submit" id="addressSearch">
<span class="icon-search"></span>
</button>
</span>
</div>
</form>
</div>
</div>
when I see the responsive view its working on mobile and tab view
But its not working in desktop view
Remove you nav-bar class and add form-horizontal
<form action="" autocomplete="off" class="form-horizontal" method="post" accept-charset="utf-8">
<div class="input-group">
<input name="searchtext" value="" class="form-control" type="text">
<span class="input-group-btn">
<button class="btn btn-default" type="submit" id="addressSearch">
<span class="icon-search"></span>
</button>
</span>
</div>
</form>
Give col-lg-12 class to the div
<form action="" autocomplete="off" class="navbar-form" method="post" accept-charset="utf-8">
<div class="input-group col-lg-12">
<input name="searchtext" style="width:100%" value="" class="form-control" type="text">
<span class="input-group-btn">
<button class="btn btn-default" type="submit" id="addressSearch">
<span class="icon-search"></span>
</button>
</span>
</div>
<div class="row">
<div class="col-md-offset-2 col-sm-offset-2 col-xs-offset-1 col-xs-10 col-sm-8 col-md-8 col-lg-6">
<div class="form-group">
<input name="searchtext" value="" class="form-control" type="text">
<span class="input-group-btn">
<button class="btn btn-default" type="submit" id="addressSearch">
<span class="icon-search"></span>
</button>
</span>
</div>
</div>
</div>
I am using bootstrap 3 and have this HTML:
<body>
<div class="container body-content">
<div class="row">
<div class="col-lg-6">
<label class="control-label" for="parameterValue">sdsd</label>
<div class="input-group">
<input class="form-control" type="text" name="parameterValue" placeholder="Enter a value..." />
<span class="input-group-btn"><button class="btn btn-default btn-success">Update</button></span>
</div>
<label class="control-label" for="parameterValue">sdsd</label>
<div class="input-group">
<input class="form-control" type="text" name="parameterValue" placeholder="Enter a value..." />
<span class="input-group-btn"><button class="btn btn-default btn-success">Update</button></span>
</div>
<button class="btn btn-default btn-primary" data-bind="click: $root.completeStep">Complete Step</button>
</div>
</div>
</div>
</body>
fiddle
I want the final button to be spaced away vertically from the input-group div and not touching it.
An example I found using a form has the button spaced out: fiddle
and this is how I'd like my button. How can I get that?
Simply wrap each pair of <label> and <div class="input-group"> by a <div> having .form-group class. (Or just wrap the last pair if needed so)
The reason is that twitter bootstrap applies a margin-bottom of 15px to .form-group. You could also do this manually by giving the <button> a top margin or giving the last input a bottom margin.
EXAMPLE HERE
<div class="container body-content">
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label class="control-label" for="parameterValue">sdsd</label>
<div class="input-group">
<input class="form-control" type="text" name="parameterValue" placeholder="Enter a value..." />
<span class="input-group-btn"><button class="btn btn-default btn-success">Update</button></span>
</div>
</div>
<div class="form-group">
<label class="control-label" for="parameterValue">sdsd</label>
<div class="input-group">
<input class="form-control" type="text" name="parameterValue" placeholder="Enter a value..." />
<span class="input-group-btn"><button class="btn btn-default btn-success">Update</button></span>
</div>
</div>
<button class="btn btn-default btn-primary" data-bind="click: $root.completeStep">Complete Step</button>
</div>
</div>
</div>