Till now I was using Bootstrap 3.3.1, everything was fine.
http://jsfiddle.net/PKrUC/256/
Then I have to update Bootstrap to the latest version 3.3.6:
http://jsfiddle.net/PKrUC/257/
the buttons are on the wrong side. align="right" seems not working anymore.
I used the files from https://cdnjs.com/libraries/twitter-bootstrap/3.3.6 as extern resources for the jsfiddle.
Anyone know why is this happening and how can I fix it?
You can use 'pull-right' in the individual button classes'
[1]: http://jsfiddle.net/PKrUC/260/
You can simply fix by adding .text-right in to parent element
Fix: http://jsfiddle.net/eycfyvx9/
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="col-md-4 col-md-offset-4">
<form class="form-horizontal" method="POST" id="packet_form">
<div class="panel panel-info">
<div class="panel-heading">
<div class="row">
<div class="col-xs-12">
<h4 class="pull-left">New Packet</h4>
</div>
</div>
</div>
<div class="panel-body" id="panel_user">
<div class="form-group">
<label class="col-xs-3 control-label" for="date">Expire-Date</label>
<div class="col-xs-6">
<input type="date" id="date" name="date" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label" for="licence_text">Lizence:</label>
<div class="col-xs-9">
<textarea class="form-control" id="licence_text" name="licence_text" rows="20"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-xs-12 text-right">
<a class="btn btn-danger" href="javascript:window.history.back()">Back</a>
<button type="submit" class="btn btn-success" formaction="add_packet.php">Save</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
Related
I have an inline form with the following code:
<div class="card" style="width:100%;">
<div class="card-block">
<form class="form-inline">
<div class="row">
<div class="form-group col-xs-2">
<label for="displayName">Display Name</label>
<input class="form-control" ng-model="displayName" style="height:30px;" id="displayName">
</div>
<div class="form-group col-xs-2">
<label for="officeEmail">Office Email</label>
<input class="form-control" ng-model="officeEmail" style="height:30px;" id="officeEmail">
</div>
</div>
</form>
</div>
</div>
when I run it it looks like this:
When I resize the Browser it's looking like this:
My question is how I can have input fields with fixed width and fixed distance between columns?
Thanks
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="card" style="width:100%;">
<div class="card-block">
<form class="form-inline">
<div class="row">
<div class=" col-lg-3 col-md-3 col-sm-3 col-xs-3">
<label for="displayName">Display Name</label>
<input class="form-control" ng-model="displayName" style="height:30px;" id="displayName">
</div>
<div class=" col-lg-3 col-md-3 col-sm-3 col-xs-3">
<label for="officeEmail">Office Email</label>
<input class="form-control" ng-model="officeEmail" style="height:30px;" id="officeEmail">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
Is this the same that you are looking for?
Hope this helps.
Basically I have something like this
<div class="container">
<div class="row">
<div class="col-md-6>
<form class="form-group-sm">
<input />
<button type="submit"></button>
</form>
</div>
</div>
<div class="col-md-6>
<form class="form-group-sm">
<input />
<button type="submit"></button>
</form>
</div>>
</div>
2 columns side by side, I'm trying to figure out a way to center the forms, input, and button inside each column but cant seem too figure out how.
<form method="POST" action="./createProduct" class="form-group-sm" >
<div class="form-group">
<label for="t" class="col-md-8 control-label">Product Type</label>
<div class="col-md-8">
<input name="productType" id="t"/>
</div>
</div>
<div class="form-group">
<label for="sn" class="col-md-8 control-label">Material Cost PerSqFoot</label>
<div class="col-md-8">
<input name="matCostSqf" id="sn"/>
</div>
</div>
<div class="form-group">
<label for="snum" class="col-md-8 control-label">Labor Cost PerSqFoot</label>
<div class="col-md-8">
<input name="laborCostSqf" id="snum" />
</div>
</div>
<br />
<div class="col-md-8">
<br />
<button class=" btn btn-danger btn-lg center-block" type="submit">Submit</button>
</div>
</form>
Twitter Bootstrap has a default class for that called text-center.
Just add the text-center class to your col- divs like this:
<div class="col-md-6 text-center">
-- your content --
</div>
P.S. You forgot to properly close the column divs. Do make sure you close them always
Your markup contains some errors like an extra closing div and a missing double cotes for the class attribute : class="col-md-6>
here is the solution you can use the bootstrap class "text-center"
<div class="container">
<div class="row">
<div class="col-md-6 text-center">
<form class="form-group-sm">
<input />
<button type="submit">Submit</button>
</form>
</div>
<div class="col-md-6 text-center">
<form class="form-group-sm">
<input />
<button type="submit">Submit</button>
</form>
</div>
</div>
here is a pen
Just started learning Bootstrap and for example have designed this form like this, I want to know if those column numbers even make sense according to each other?
<form class="form-horizontal">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Website Active
</label>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<label>Display this message when the website is not active</label>
<textarea class="form-control" rows="3" id="comment"></textarea>
</div>
</div>
</div>
</div>
</form>
See here the difference of what I explained in comments :
In your case, a more proper structure could be :
<div class="container">
<div class="row">
<form class="form-horizontal">
<div class="col-sm-6">
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox"> Website Active
</label>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Display this message when the website is not active</label>
<textarea class="form-control" rows="3" id="comment"></textarea>
</div>
</div>
</form>
</div>
</div>
And you have to add a .container or .container-fluid class around your .row
You can have .row as much as you wants in a single .container class.
See your code on a bootply fiddle
Why in the following Bootstrap 3.0 sample the right panel hides completely the form when I reduce the width of the browser?
<div class="row">
<div class="col-sm-9">
<h2>Product selection</h2>
<p>Some text</p>
<hr />
<form action="/Store" class="form-horizontal" id="productForm" method="post" role="form">
<div class="form-group">
<label class="col-md-2 control-label" for="Quantity">Quantity</label>
<div class="col-md-10">
<input class="form-control" id="quantity" name="quantity" onchange="this.form.submit();" type="text" value="1" />
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input name="nextButton" type="submit" class="btn btn-default" value="Next" />
</div>
</div>
</form>
</div>
<div class="col-md-3" style="margin-top: 20px">
<div class="panel panel-default">
<div class="panel-heading">Your Options</div>
<div class="panel-body">
<p style="line-height: 200%">
Other ways to buy<br/>
</p>
</div>
</div>
</div>
Here is a live test of what happens:
http://www.bootply.com/R4FsSHI4af
To reproduce it you need simply to reduce the width of the browser window.
Thanks.
You are mixing col-sm-9 with col-md-3. Just use one size, for example col-md-9 and col-md-3.
Use this structure instead :
<div class="row">
<div class="col-md-9">
<!-- Content -->
</div>
<div class="col-md-3">
<!-- Panel -->
</div>
</div>
As you're mixing col-sm-9 and col-md-3, you've got :
a 12-12 pattern on small devices
a 9-12 pattern on medium devices : overlap
a 9-3 pattern on large and extra large devices
I have the lumen theme from bootswatch... everything seems to be working fine except that my form never submits any data ... it goes to the action page but never send any data across... he is the complete code...
<!DOCTYPE html>
<html>
<title>Some Title
</title>
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="page-header">
<h1 id="container">Some Heading</h1>
</div>
<div class="bs-component">
<div class="jumbotron">
<h1>Incident Management System</h1>
<p> Some heading</p>
<p><a class="btn btn-primary btn-lg">Learn more</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Submit a ticket</h3>
</div>
<div class="panel-body">
<form class="form-horizontal" id="insertForm" method="post" action="addincident.php">
<fieldset>
<legend>We need few details!</legend>
<div class="form-group">
<label for="inputUserName" class="col-lg-2 control-label">Username</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputUserName" placeholder="Enter your username">
</div>
</div>
<div class="form-group">
<label for="inputstudentID" class="col-lg-2 control-label">Student ID</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputStudentID" placeholder="Enter your Student ID">
</div>
</div>
<div class="form-group">
<label for="inputStudentEmail" class="col-lg-2 control-label">Student EMail</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputStudentEMail" placeholder="Enter your Student Email ID">
</div>
</div>
<div class="form-group">
<label for="selectRoomNo" class="col-lg-2 control-label">Room Number</label>
<div class="col-lg-10">
<select class="form-control" id="selectRoomNo">
<option>S114D</option>
<option>S118B</option>
<option>S118E</option>
<option>S120</option>
<option>S114B</option>
</select>
</div>
</div>
<div class="form-group">
<label for="textAreaRoomPosition" class="col-lg-2 control-label">Location of machine</label>
<div class="col-lg-10">
<textarea class="form-control" rows="3" id="textAreaRoomPosition"></textarea>
<span class="help-block">Explain to the best of your knowledge the location of the issue in the lab.</span>
</div>
</div>
<div class="form-group">
<label for="textAreaRoomPosition" class="col-lg-2 control-label">Issue\Incident</label>
<div class="col-lg-10">
<textarea class="form-control" rows="3" id="textAreaRoomPosition"></textarea>
<span class="help-block">Explain to the best of your knowledge the issue you are facing. Try to be as detailed as possible.</span>
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button class="btn btn-default">Cancel</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Information</h3>
</div>
<div class="panel-body">
Upon recieving the ticket, we will assign it to a designated technician who will then solve the case. You can view the solution of the incident once it is posted.
</div>
</div>
</div>
</div>
</div>
</body>
</html>
It's missing the "name" attribute;
change this:
<input type="text" id="inputUserName">
to something like this:
<input type="text" name="inputUserName" id="inputUserName">