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>
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>
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've been using Bootstrap for a while. I wouldn't say I'm an expert but I'm proficient. Nevertheless, this form-inline issue got me head over heels:
It's a very simple thing what I'm trying, yet here I am, unable to put two elements in line:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-6">
<form class="form-inline">
<div class="form-group">
<label for="modal_add_group_input"></label>
<input class="form-control" id="modal_add_group_input" placeholder="Nombre de grupo" type="text">
</div>
<button type="submit" class="btn btn-success">
<span style="color: white;" class="glyphicon glyphicon-plus-sign">
</span> Crear Grupo</button>
</form>
</div>
</div>
</div>
Not trying anything fancy here. I went back to basics and even the provided example doesn't work:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">.00</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Transfer cash</button>
</form>
...any suggestions? What am I doing wrong? Ç_Ç
PS: Not a duplicate of Bootstrap inline form's submit button not in the same line . Tried that. Didn't work.
The issue you see in the snippet is because of the breakpoint (form-group component goes 100% width). Do you need it to be in the same line for mobile devices?
well, here you have the 3 solutions
Inline for big screens
Inline for all screen sizes
Inline for all screen sizes NO GRID (updated answer)
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> **Inline for big screens devices**
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">.00</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Transfer cash</button>
</form>
<hr> **Inline for all screen sizes**
<form class="form-horizontal">
<div class="form-group">
<div class="col-xs-6">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">.00</div>
</div>
</div>
<div class="col-xs-6">
<button type="submit" class="btn btn-primary">Transfer cash</button>
</div>
</div>
</form>
<hr>
<div class="container">
**Inline for all screen sizes NO GRID**
<div class="row">
<div class="col-xs-6">
<form>
<div class="pull-right">
<button type="submit" class="btn btn-primary">Transfer cash</button>
</div>
<div class="">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">.00</div>
</div>
</div>
</form>
</div>
</div>
</div>
I'm attempting to produce this form with Bootstrap 3:
I'm having trouble making First Name and Last Name inline AND making them together take up the same width as the other fields. Currently I have the following
<form role="form" class="form-horizontal">
<h4>Administrator</h4>
<div class="form-group">
<div class="col-sm-6 col-md-6">
<input type="text" class="form-control" placeholder="First Name" />
</div>
</div>
<div class="form-group">
<div class="col-sm-6 col-md-6">
<input type="text" class="form-control" placeholder="Last Name" />
</div>
</div>
<div class="form-group">
<div class="col-sm-6 col-md-6">
<input type="text" class="form-control"placeholder="Email Address" />
</div>
</div>
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-default">Cancel</button>
</form>
which outputs a simple form with no inlining. Any ideas how to adjust this to look like in the picture? Here is a jsfiddle: http://jsfiddle.net/gJdyb/1/
Here's a jsFiddle. Use class row on the form-group you'd like to inline:
Administrator
<div class="form-group">
<div class="col-md-12">
<div class="form-group row">
<div class="col-md-6">
<input type="text" class="form-control" placeholder="First Name" />
</div>
<div class="col-md-6">
<input type="text" class="form-control" placeholder="Last Name" />
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<input type="text" class="form-control"placeholder="Email Address" />
</div>
</div>
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-default">Cancel</button>
Try this one
<form role="form" class="form-horizontal">
<h4>Administrator</h4>
<div class="form-group row">
<div class="col-xs-6 col-md-6">
<input type="text" class="form-control" placeholder="First Name" />
</div>
<div class="col-xs-6 col-md-6">
<input type="text" class="form-control" placeholder="Last Name" />
</div>
</div>
<div class="Form-group">
<input type="text" class="form-control"placeholder="Email Address" />
</div>
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-default">Cancel</button>
</form>
http://jsfiddle.net/gJdyb/4/
it use the col-xs-6.. it is us
read this for documentation of grid system of bootstrap
http://getbootstrap.com/css/#grid
I want to align TextBox which will be used as Searchbox and button.
Problem is when I use inline form class on div the textbox is loosing its width.
<div class="col-lg-6">
<input type="text" id="test" name="city" class="form-control input-lg" placeholder="E.g. Manchester">
<div class="form-inline">
<div class="form-group ">
<input type="text" id="city" name="city" class="form-control input-lg" placeholder="E.g. Manchester">
<input type="button" value="Search" class="form-control btn-lg"/>
</div>
</div>
</div>
what I'm missing here..
here is a good solution for you:
Screenshot:
Code:
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="E.g. Manchester" />
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="E.g. Manchester" />
<span class="input-group-btn">
<button class="btn btn-default" type="button">Search</button>
</span>
</div>
Result:
http://jsfiddle.net/j9EdZ/
You might be best using the col-md-* values here, e.g.:
<div class='col-lg-6'>
<form class='form'>
<div class='row'>
<div class='form-group'>
<div class='col-md-10'>
<input class='form-control input-lg' type='text' placeholder='E.g. Manchester'>
</div>
<div class='col-md-2'>
<input type='button' class='form-control btn btn-block' value='Search'>
</div>
</div>
</div>
</form>
</div>
Text-box is not loosing its width you can check here.
CODE : http://jsfiddle.net/Jaysinh/awYm3/
As per the Bootstrap documentation of Form you have to set the width of the element. Default is 100 % wide.
Requires custom widths
Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.
Here, check this out.
Demo
HTML
<div class="col-lg-6">
<form class="form-horizontal" role="form">
<div class="form-group">
<input type="text" id="test" name="city" class="form-control input-lg" placeholder="E.g. Manchester" />
</div>
<div class="form-inline">
<div class="form-group ">
<input type="text" id="city" name="city" class="form-control input-lg" placeholder="E.g. Manchester" />
<input type="button" value="Search" class=" btn btn-lg btn-default" />
</div>
<div class="form-group "></div>
</div>
</form>
</div>