I have a form that has 2 text and 1 button to allow user to enter searching date, and I need it to display inline. I followed using <form class="form-inline"> but it still doesn't work. It shows like that:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="pull-right">
<form class="form-inline" role="search" action="<?php echo base_url('report/searchDate')?>" method = "post">
<div class="input-group">
<input type="text" class="form-control" placeholder="Date From" name = "searchDateFrom" size="10px; ">
<input type="text" class="form-control" placeholder="Date To" name = "searchDateTo" size="10px; ">
<div class="input-group-btn">
<button class="btn btn-default " type="submit" value = "searchDateTo"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
Use input-daterange class
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="input-group input-daterange">
<input type="text" class="form-control" value="2012-04-05">
<div class="input-group-addon">to</div>
<input type="text" class="form-control" value="2012-04-19">
</div>
For more information : https://bootstrap-datepicker.readthedocs.io/en/latest/markup.html#date-range
Related
I have an edit.ejs page to edit a camp , in this page I have two forms , one to submit an edit and the other from to delete the camp, each form has a button , and they are below each other , how can I make the buttons aligned in one so that they are next to each other ?
I'm using Bootstrap5 v5.3
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="row d-inline">
<h1 class="text-center">Edit Camp</h1>
<div class="col-6 offset-3">
<form action="/campgrounds/<%=camp._id%>?_method=PUT" method="POST">
<div class="mb-3">
<label class="form-label" for="title">Name</label>
<input class="form-control" type="text" id="title" name="campground[title]" value="<%= camp.title %>">
</div>
<div class="mb-3">
<label class="form-label" for="location">Location</label>
<input class="form-control" type="text" id="location" name="campground[location]" value="<%= camp.location %>">
</div>
<div class="mb-3">
<label class="form-label" for="image">Image URL</label>
<input class="form-control" type="text" id="image" name="campground[image]" value="<%= camp.image %>">
</div>
<div class="mb-3">
<label class="form-label" for="price">Price</label>
<div class="input-group">
<span class="input-group-text" id="price-label">$</span>
<input type="number" class="form-control" id="price" placeholder="0.00" aria-label="price" aria-describedby="price-label" name="campground[price]" value="<%= camp.price %>">
</div>
</div>
<div class="mb-3">
<label class="form-label" for="description">Description</label>
<textarea class="form-control" type="text" id="description" name="campground[description]"><%= camp.description %> </textarea>
</div>
<div class="mb-3"><button class="btn btn-success">Save</button></div>
</form>
<form action="/campgrounds/<%=camp._id%>?_method=DELETE" method="POST">
<button class="btn btn-danger">Delete</button>
</form>
</div>
</div>
The buttons should be aligned like the image below
If you need to keep the HTML structure as it is, you can simply use the helper class float-start on the "save" button (I also added a small margin to the right of it with me-2 class).
If you can change the structure, #isherwood's answer will do just fine.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="row d-inline">
<h1 class="text-center">Edit Camp</h1>
<div class="col-6 offset-3">
<form action="/campgrounds/<%=camp._id%>?_method=PUT" method="POST">
<div class="mb-3">
<label class="form-label" for="title">Name</label>
<input class="form-control" type="text" id="title" name="campground[title]" value="<%= camp.title %>">
</div>
<div class="mb-3"><button class="btn btn-success float-start me-2">Save</button></div>
</form>
<form action="/campgrounds/<%=camp._id%>?_method=DELETE" method="POST">
<button class="btn btn-danger">Delete</button>
</form>
</div>
</div>
Form inputs are not required to be inside the form. I'd move them both out of the form and reference their forms with the form attribute. Then you can position them as you like. This requires corresponding name attributes on the forms.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="row d-inline">
<h1 class="text-center">Edit Camp</h1>
<div class="col-6 offset-3">
<form action="/campgrounds/<%=camp._id%>?_method=PUT" method="POST" name="campgroundEditForm">
<div class="mb-3">
<label class="form-label" for="description">Description</label>
<textarea class="form-control" type="text" id="description" name="campground[description]"><%= camp.description %> </textarea>
</div>
</form>
<form action="/campgrounds/<%=camp._id%>?_method=DELETE" method="POST" name="campgroundDeleteForm">
</form>
<div class="mt-2">
<button class="btn btn-success" form="campgroundEditForm">Edit</button>
<button class="btn btn-danger" form="campgroundDeleteForm">Delete</button>
</div>
</div>
</div>
I assume you cannot change HTML as it might come from different JSP files but the best way to do it is to move buttons to the single form. This solution is only if you have no access to change forms html (as it might come from MFE or other source/app and as mentioned buttons should belong to the same form unless is MFE concept that requires different action upon clicking on button)). Anyhow it was not requested to set buttons on left so thought of showing case with right aligned anyway left aligned can be achieved by adding flex-starts). Note that mb-3 class is removed from first button as its misaligning buttons in vertical scope or you can add the same class to second button. One can tell by classes used in HTML that you have bootstrap added so I have added it in example code as well.
#import url("https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css");
.form-wrapper{
position: relative;
display: flex;
justify-content: flex-start;
align-items: flex-end;
}
.align-right{
float:right;
margin-right:0.5rem;
}
<!DOCTYPE html>
<html>
<body>
<div class="row d-inline">
<h1 class="text-center">Edit Camp</h1>
<div class="col-6 offset-3 form-wrapper">
<form action="/campgrounds/<%=camp._id%>?_method=PUT" method="POST">
<div class="mb-3">
<label class="form-label" for="title">Name</label>
<input class="form-control" type="text" id="title" name="campground[title]" value="<%= camp.title %>">
</div>
<div class="mb-3">
<label class="form-label" for="location">Location</label>
<input class="form-control" type="text" id="location" name="campground[location]"
value="<%= camp.location %>">
</div>
<div class="mb-3">
<label class="form-label" for="image">Image URL</label>
<input class="form-control" type="text" id="image" name="campground[image]" value="<%= camp.image %>">
</div>
<div class="mb-3">
<label class="form-label" for="price">Price</label>
<div class="input-group">
<span class="input-group-text" id="price-label">$</span>
<input type="number" class="form-control" id="price" placeholder="0.00" aria-label="price"
aria-describedby="price-label" name="campground[price]" value="<%= camp.price %>">
</div>
</div>
<div class="mb-3">
<label class="form-label" for="description">Description</label>
<textarea class="form-control" type="text" id="description"
name="campground[description]"><%= camp.description %> </textarea>
</div>
<div class="remove-mb-3-class-from-here-to-align-buttons"><button
class="btn btn-success align-right">Save</button></div>
</form>
<form action="/campgrounds/<%=camp._id%>?_method=DELETE" method="POST">
<button class="btn btn-danger">Delete</button>
</form>
</div>
</div>
</body>
</html>
Having a problem with getting the items of the following code vertically aligned with bootstrap 4. Before the addition of the row they are all stacked but revert to being horizontally in-line when the "row" or "row align-items-start" classes are added.
<div class="container">
<div class="row align-items-start">
<h1></h1>
<form action="" method="POST">
<input class="form-control" type="text" name="name" placeholder="name">
<input class="form-control" type="text" name="name" placeholder="image URL">
<button class="btn btn-dark">
Submit!
</button>
</form>
Go Back
</div>
</div>
You need to specify a column, see example.
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1></h1>
<form action="" method="POST">
<input class="form-control" type="text" name="name" placeholder="name">
<input class="form-control" type="text" name="name" placeholder="image URL">
<button class="btn btn-dark">
Submit!
</button>
</form>
Go Back
</div>
</div>
</div>
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>
I am trying to perform validations to my fileds in such a way that when i click on submit button it must show error to fields which are empty.Can anyone please help me .............
<div *ngFor="let detail of details" class="nopadding col-sm-12">
<form [formGroup]="form" (ngSubmit)="onSubmit(form.value)" class="nobottommargin col-sm-12 formpaddingcss" name="template-contactform" novalidate="novalidate">
<div class="form-process"></div>
<div class="col_half">
<label for="template-contactform-name">First Name <small>*</small></label>
<div class="input-group divcenter">
<span class="input-group-addon noradius"><i class="icon-user iconcolorcss"></i></span>
<input type="email" data-toggle="tooltip" data-placement="top" title="Enter Firstname!" name="widget-subscribe-form-email" class="form-control required email formcontrolheight" [formControl]="form.controls['firstname']" [(ngModel)]="detail.firstname" placeholder="First Name" aria-required="true">
</div>
</div>
<div class="clear"></div>
<div class="col_full">
<button class="button button-blue button-mini bottommargin-sm pull-right text-right" type="submit">Save</button>
</div>
<div class="clear"></div>
</div>
Try this for simple validations....
<input type="email" title="Enter Firstname!" class="form-control required email formcontrolheight" [(ngModel)]="detail.firstname" placeholder="First Name" aria-required="true">
<span *ngIf="clicked && !detail.firstname || !detail.firstname.trim()" class="error">Error Its empty</span>
<button (click)="clicked = true"></button>
I don't its correct or not but this works fine with me. Refer this code:
<form id="discussion_form" name="discussion_form" ng-submit="addDiscussion(discussion_form.$valid)" novalidate>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="dis_title">Topic<span>*</span></label>
<input type="text" id="dis_title" class="form-control" name="dis_title" placeholder="e.g., about independence day celebration." required ng-model="discussionDetails.dis_title">
<label for="dis_title" class="form_errors" ng-show="discussion_form.dis_title.$invalid && !discussion_form.dis_title.$pristine">Please enter a discussion topic</label><!--To show error msg-->
</div>
</div>
</div>
<button type="submit" class="btn btn-primary pull-right" ng-disabled="discussion_form.$invalid">Submit</button>
I want to put a form in my site I use base form codes from bootstrap official site but view of getbootstrap.com is very different than my view(Especially button and input view very different from the site )
HTML:
<form>
<fieldset>
<legend>dfhadfhahhf</legend>
<label>isim</label>
<input type="text" placeholder="Type something…">
</fieldset><br>
<fieldset>
<label>isim</label>
<input type="text" placeholder="Type something…">
<button type="submit" class="btn">Submit</button>
</fieldset>
<!-- Form -->
</form>
By the way I have all components of bootstrap:
<link href="static/css/bootstrap.css" rel="stylesheet">
<link href="static/css/style.css" rel="stylesheet">
where is the problem? :(
your missing some class names etc try something like
<form role="form">
<div class="form-group">
<legend>dfhadfhahhf</legend>
<label>isim</label>
<input type="text" placeholder="Type something…" class="form-control">
</div>
<br>
<div class="form-group">
<label>isim</label>
<input type="text" placeholder="Type something…" class="form-control">
<button type="submit" class="btn btn-default">Submit</button>
</div>
<!-- Form -->
</form>
for instance :
<form role="form">
and swopped your fieldset for:
<div class="form-group">
etc