I'm trying to center a form inside a column in bootstrap. Is it possible because I'm searching for more than an hour and still found nothing. I'm a novice in bootstrap...
My code:
<div class="container-fluid">
<!--Row with two equal columns-->
<div class="row">
<div class="col-sm-8">
<form class="form-inline row" role="form" action="index.php" method="post">
<input class="form-control" type="text" name="kerkim" id="input_main" value="">
<i id="slash">|</i>
<div class="input-group">
<input id="address" class="form-control" type="text" >
<div class="input-group-btn">
<button type="text" class="btn btn-warning"><i>Me gjej</i></button>
</div>
</div>
<button type="submit" class="btn btn-warning"><i class="glyphicon glyphicon-search"></i></button>
</form>
</div>
<div class="col-sm-2"><h3>Second left</h3></div>
<div class="col-sm-2"><h3>Second right</h3></div>
You can use offset value in form col-md-offset-4
<form class="form-inline row col-md-offset-4" method="post" action="index.php" role="form">
For more detail go with LINK
add a class to form "center_form"
<form class="form-inline row center_form" role="form" action="index.php" method="post">
and add below css
.center_form{margin:0 auto;}
You need to remove class row from your form element, as it contains no columns. Next, you need to use css to center your form.
Try this:
HTML
<div class="container-fluid">
<!--Row with two equal columns-->
<div class="row">
<div class="col-sm-8">
<form class="form-inline centered" role="form" action="index.php" method="post">
<input class="form-control" type="text" name="kerkim" id="input_main" value="">
<i id="slash">|</i>
<div class="input-group">
<input id="address" class="form-control" type="text" >
<div class="input-group-btn">
<button type="text" class="btn btn-warning"><i>Me gjej</i></button>
</div>
</div>
<button type="submit" class="btn btn-warning"><i class="glyphicon glyphicon-search"></i></button>
</form>
</div>
<div class="col-sm-2"><h3>Second left</h3></div>
<div class="col-sm-2"><h3>Second right</h3></div>
</div>
</div>
CSS
.centered {
margin: auto;
}
Alternatively, you can use this html layout to accomplish a centered form:
<div class="container-fluid">
<!--Row with two equal columns-->
<div class="row">
<div class="col-sm-8">
<div class="row">
<form class="form-inline centered col-sm-8 col-sm-offset-2" role="form" action="index.php" method="post">
<input class="form-control" type="text" name="kerkim" id="input_main" value="">
<i id="slash">|</i>
<div class="input-group">
<input id="address" class="form-control" type="text" >
<div class="input-group-btn">
<button type="text" class="btn btn-warning"><i>Me gjej</i></button>
</div>
</div>
<button type="submit" class="btn btn-warning"><i class="glyphicon glyphicon-search"></i></button>
</form>
</div>
<div class="col-sm-2"><h3>Second left</h3></div>
<div class="col-sm-2"><h3>Second right</h3></div>
</div>
</div>
</div>
Related
I am trying to add a delete button on the right of bootstrap panel. No matter what I do it is not getting inline with panel heading. Help please.
<div class="panel-heading">
Update Article
<form class="delete_form pull-right" id="delete_form" method="post" action="" enctype="multipart/form-data">
<input type="submit" name="submit" class="btn btn-danger" value="Delete" onclick="return confirm(\'Are you sure you want to delete this item?\');" />
</form>
</div>
Edit 1: Added rest of the panel code.
<div class="panel-body">
<form class="article_form" id="article_form" enctype="multipart/form-data">
<div class="row">
<div class="col-sm-6 form-group">
<label for="title" requiredField>Title*</label>
<input type="text" class="form-control" id="title" value="$title" name="title" maxlength="100" required>
</div>
<div class="col-sm-6 form-group">
<label for="pdf_link">PDF Link*</label>
<input type="text" class="form-control" id="pdf_link" value="$pdfurl" name="pdf_link" maxlength="100" required>
</div>
</div>
<div class="row">
<div class="word_file col-sm-6 form-group">
<label>Upload Microsoft Word file of the article.</label>
<input class="form-control" accept=".doc, .docx" type="file" id="word_file" name="word_file">
</div>
<div class="word_unavailable col-sm-6 form-group">
<label for="ur_name">Check if Microsoft Word file is unavailable.</label>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="chk_word" name="chk_word">
<label class="form-check-label" for="wordfiles">MS Word file is unavilable</label>
</div>
</div>
</div>
<input type="submit" name="submit" class="btn btn-primary" value="Update" />
</form>
</div>
</div>
I am not using any custom css.
Edit 2: Needed results
<body>
<div class="panel panel-default">
<div class="panel-heading container-fluid">Update Article
<form class="pull-right" id="delete_form" method="post" action="" enctype="multipart/form-data">
<input type="submit" name="submit" class="btn btn-danger" value="Delete" onclick="return confirm(\'Are you sure you want to delete this item?\');" />
</form>
</div>
<div class="panel-body">Any content</div>
</div>
</body>
I'm trying to have 2 input fields next to each other in a (bootstrap-css) col-md, but can't seem to get it right.
Here is what I have so far
https://jsfiddle.net/9hrx59bd/
It also doesn't help when I put both input fields in the same input group, by removing this:
...
</div>
<div class="input-group ">
How can I get them next to each other, and use the full width?
You need to make both input-groups a col-md-6, here is the result: link
<div class="row">
<form class="form-inline" id="searchform" action="" accept-charset="utf-8" method="post">
<div class="input-group col-md-6 col-sm-6 col-xs-6">
<input class=" form-control " placeholder="city" id="location" type="text" name="location">
</div>
<div class="input-group col-md-6 col-sm-6 col-xs-6">
<input class="search-query form-control newtab-search-text" placeholder="keywords or company name" id="kw" type="text" name="job">
<span class="input-group-btn">
<button class="btn btn-danger" type="submit">
<span class=" glyphicon glyphicon-search" ></span>
</button>
</span>
</div>
</form>
</div>
Edit
I made it work on smaller screens by adding col-sm-6 and col-xs-6 aswell
Bootstrap Inline Form
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<form id="searchform" action="" accept-charset="utf-8" method="post">
<div class="col-md-6">
<div class=" form-group">
<input class="form-control" placeholder="city" id="location" type="text" name="location">
</div>
</div>
<div class="col-md-6">
<div class="form-group input-group">
<input class="search-query form-control newtab-search-text" placeholder="keywords or company name" id="kw" type="text" name="job">
<span class="input-group-btn">
<button class="btn btn-danger" type="submit">
<span class=" glyphicon glyphicon-search" ></span>
</button>
</span>
</div>
</div>
</form>
</div>
</div>
I think you just want a form-control and an input-group.
<div class="row">
<div class="col-md-6">
<form class="form-inline" id="searchform" action="" accept-charset="utf-8" method="post">
<input class="form-control" placeholder="city" id="location" type="text" name="location">
<div class="input-group">
<input class="search-query form-control newtab-search-text" placeholder="keywords or company name" id="kw" type="text" name="job">
<span class="input-group-btn">
<button class="btn btn-danger" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</span>
</div>
</form>
</div>
</div>
Demo
EDIT: Another option is to use the grid columns, but remove the padding:
.pr-0{
padding-right:0;
}
.pl-0{
padding-left:0;
}
<form class="row" id="searchform" action="" accept-charset="utf-8" method="post">
<div class="col-xs-6 col-sm-3 pr-0">
<input class="form-control" placeholder="city" id="location" type="text" name="location">
</div>
<div class="col-xs-6 col-sm-3 pl-0">
<div class="input-group">
<input class="search-query form-control newtab-search-text" placeholder="keywords or company name" id="kw" type="text" name="job">
<span class="input-group-btn">
<button class="btn btn-danger" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</span>
</div>
</div>
</form>
See the 2nd item in the demo
Assuming you want the input next to each other, refer code:
Please view the results in full page view.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form action="" class="form-inline">
<div class="form-group">
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Password">
</div>
</form>
How can I add link or button right of input not using class="form-inline".
<form class="form-horizontal" role="form" action="" method="post">
<div class="form-group" id="formGroupSubject">
<label for="inputSubjectx" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputSubjectx" name="inputSubjectx" >
</div>
</div>
<div class="form-group" >
<div class="col-sm-offset-9 col-sm-2" col-sm-offset-1>
<button type="submit" class="btn btn-warning">Send</button>
</div>
</div>
</form>
You can use Bootstrap Input Groups
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form class="form-horizontal" role="form" action="" method="post">
<div class="form-group" id="formGroupSubject">
<label for="inputSubjectx" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<div class="input-group">
<input type="text" class="form-control" id="inputSubjectx" name="inputSubjectx" /> <span class="input-group-btn">
<button class="btn btn-danger" type="button">Press!</button>
</span>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-9 col-sm-2" col-sm-offset-1>
<button type="submit" class="btn btn-warning">Send</button>
</div>
</div>
</form>
</div>
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'm trying to get a search form to pull-right within a well. it pulls to the right but moves south of the well.
the code i have is;
<div class="container">
<div class="well">
<div class="pull-right">
<form class="form-inline " role="form">
<input type="search" class="form-control" id="search" placeholder="Search Assets">
<button type="submit" class="btn btn-default">Search</button>
</form>
</div>
I've done a jsfiddle at http://jsfiddle.net/52VtD/3366/
You need to clear float after your floated div.
Here
<div class="container">
<div class="well">
<div class="pull-right">
<form class="form-inline " role="form">
<input type="search" class="form-control" id="search" placeholder="Search Assets">
<button type="submit" class="btn btn-default">Search</button>
</form>
</div>
<div class="clearfix"></div>
</div>
</div>