I was wondering what I have done wrong here: http://www.bootply.com/bURS2tSeSU
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">Contact Us</div>
<div class="panel-body">
<form class="form-horizontal">
<fieldset>
<!-- Text input-->
<div class="form-group">
<input id="subject" name="subject" type="text" placeholder="Subject" class="form-control input-md">
<span class="help-block">help</span>
</div>
<!-- Textarea -->
<div class="form-group">
<textarea class="form-control" id="message" name="message">default text</textarea>
</div>
<button id="singlebutton" name="singlebutton" class="btn btn-primary">Button</button>
</fieldset>
</form>
</div>
</div>
</div>
My panel-body should have padding but instead it seems like the padding isn't taking effect for the form fields. Can anyone tell me why this might be happening and how I can get my fields to sit within the panel-body and not right up to the edges.
Your problem is that you stuck everything into a column. Each component in a column take up equal width (specified by you as col-md-4). I replaced your column with a row, and wrapped everything by a container (which you always need to do).
Code
<div class="container">
<div class="row">
<div class="panel panel-default">
<div class="panel-heading">Contact Us</div>
<div class="panel-body">
<fieldset>
<!-- Text input-->
<div class="form-group">
<input id="subject" name="subject" type="text" placeholder="Subject" class="form-control input-md"> <span class="help-block">help</span>
</div>
<!-- Textarea -->
<div class="form-group">
<textarea class="form-control" id="message" name="message">default text</textarea>
</div>
<button id="singlebutton" name="singlebutton" class="btn btn-primary">Button</button>
</fieldset>
</div>
</div>
</div>
Documentation:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
BOOTPLY
You are using the form-group. According to bootstrap documentation:
Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form. Doing so changes .form-groups to behave as grid rows, so no need for .row.
But in turn this means, that you will have to add columns for your input fields:
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">Contact Us</div>
<div class="panel-body">
<form class="form-horizontal" role="form">
<fieldset>
<!-- Text input-->
<div class="form-group">
<div class="col-md-12">
<input id="subject" name="subject" type="text" placeholder="Subject" class="form-control input-md"> <span class="help-block">help</span>
</div>
</div>
<!-- Textarea -->
<div class="form-group">
<div class="col-md-12">
<textarea class="form-control" id="message" name="message">default text</textarea>
</div>
</div>
<!-- submit button -->
<div class="form-group">
<div class="col-md-12">
<button id="singlebutton" name="singlebutton" class="btn btn-primary">Button</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
See here http://www.bootply.com/rSLgYayGaO
Related
Here's what I mean.
I have a log in button on the top right of the page, and the title of the page centered in the middle.
However, the only way I found to center the tile on the div, was the center the div itself on the page, which was col-md-9.
I tried using CSS to center the Div, but I couldn't make it work, so the workaround I found was the center the div by using another column before the column where the Title is positioned.
However, this new div is completely empty. I might put a logo in it later on, but I planned for the top right of the page to be empty.
Is there something bad with having empty divs?
Is there a better way to implement this?
Code for reference.
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6">
<h1 id="TEXT">OH SNIP</h1>
<br>
</div>
<div class="col-md-3">
<div class="dropdown">
<button id="dpBt" class="dropbtn"></button>
<div id="myDropdown" class="dropdown-content">
<form id="logIn" action="api/users" method="POST">
<div class='form-group'>
<label for='username' class='sr-onl'>Username</label>
<input id='username' type='username' required='' placeholder='Username' class='form-control' name='username'>
</div>
<div class='form-group'>
<label for='password' class='sr-onl'>Password</label>
<input id='password' type='password' required='' placeholder='Password' class='form-control' name='password'>
</div>
<div class='form-group'>
<button id="btnLogin" class='btn btn-block'>Login</button>
</div>
</form>
<hr>
<input id="btnRegisto" type="button" class="btn btn-block" value="Sign up">
<br>
</div>
</div>
</div>
</div>
You could leave blank columns, but a better approach provided by Bootstrap is to use offsets.
Here is an example from Bootstrap 3.3
https://getbootstrap.com/docs/3.3/css/#grid
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
Here's an example that better fits what your trying to do. Notice the offset for the button.
<form class="form-horizontal" method="post" action="/login/">
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="id_username" name="username" value="" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password" name="password" value="" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
<div class="row">
<div class="container">
<div class="col-md-4 col-md-offset-4">
<div class="login-wrapper">
<div class="login-head">
<h3 class="text-center"> Log in </h3>
</div>
<form>
<div class="form-group">
<label for="email" class="sr-only"> Email </label>
<input type="text" placeholder="email here" class="form-control">
</div>
<div class="form-group">
<label for="email" class="sr-only"> Password </label>
<input type="text" placeholder="Password here" class="form-control">
</div>
<button type="button" class="btn btn-danger center-block"> Login </button>
</form>
</div>
</div>
</div>
</div>
After this code i got scroll bar in my browser so i inspect and found that if i make change
.row { margin-right: 0;}
it is just fine. It is nothing to do with my css i removed my css and tried. so should i change the value of .row all the time which is provided by bootstrap? default value is
.row{margin-right: -15px;}
EDIT: Code is formatted like code now
As mentioned in Bootstrap docs, container should be a top level wrapping class, which should contain class row. You've swapped these classes. I think this is the reason of issue.
First rule of bootstrap introduction says:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
Code should look:
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="login-wrapper">
<div class="login-head">
<h3 class="text-center"> Log in </h3>
</div>
<form>
<div class="form-group">
<label for="email" class="sr-only"> Email </label>
<input type="text" placeholder="email here" class="form-control">
</div>
<div class="form-group">
<label for="email" class="sr-only"> Password </label>
<input type="text" placeholder="Password here" class="form-control">
</div>
<button type="button" class="btn btn-danger center-block"> Login </button>
</form>
</div>
</div>
</div>
</div>
I'm trying to create a form that will appear in a modal window and I have the form looking exactly what I want. Here's my HTML (only showing the first row because I believe the right solution will apply to all my rows)
<div class="container">
<div class="row">
<div class="col-sm-1"> </div>
<div class="col-sm-8">
<form action="#" method="post">
<fieldset>
<legend style="width: 80%">Base Information</legend>
<div class='row'>
<div class='col-sm-5'>
<div class='form-group'>
<label for="user_firstname">First name</label>
<input class="form-control input-sm" id="user_firstname" name="user[firstname]" required="true" size="30" type="text" />
</div>
</div>
<div class='col-sm-5'>
<div class='form-group'>
<label for="user_lastname">Last name</label>
<input class="form-control input-sm" id="user_lastname" name="user[lastname]" required="true" size="30" type="text" />
</div>
</div>
<div class="col-sm-2"> </div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
The problem I'm facing is that I'm currently viewing this using Chrome and when I horizontally resize the browser window to less than 760 pixels, all the form elements are stacked on top of each other.
As you can see there's a lot of spacing to the right I'm trying to get rid of.
Does anyone have any suggestions on how I can eliminate the padding on the right?
col-xs instead of col-sm would help with the breakpoint issue. You also seem to have empty space on the right because you specified two columns of empty space <div class="col-sm-2"> </div>. Bootstrap's grid system is based uon 12 columns per row, so the two column spanning div would be occuping space.
Bootstrap suggests 12 columns. Your layout uses only 9 of them:
<div class="col-sm-1"> </div>
<div class="col-sm-8">
...
</div>
You can use col-sm-10 col-sm-offset-1 instead of col-sm-8, <div class="col-sm-1"> </div> and <div class="col-sm-2"> </div> (offsetting columns):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<form action="#" method="post">
<fieldset>
<legend>Base Information</legend>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="user_firstname">First name</label>
<input class="form-control input-sm" id="user_firstname" name="user[firstname]" required="true" size="30" type="text" />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="user_lastname">Last name</label>
<input class="form-control input-sm" id="user_lastname" name="user[lastname]" required="true" size="30" type="text" />
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
As shown in the image below, I would like to align a text area besides the vertically aligned several input elements. I am using bootstrap grid to achieve the required effect.
Currently, when I use "form-horizontal", all the items stack up in a single column, hence, the textarea lies under the phone input element.
I want it to be responsive. If I use margin property on the text area, then the inputs overlap each other and so, makes the UI look messy. It would be great if I could get your help.
Desired layout:
Current layout:
<div class="container">
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="col-sm-10 col-md-2 col-lg-2 col-lg-offset-0">
<input type="text" class="form-control" id="name" placeholder="NAME">
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-md-2 col-lg-2 col-lg-offset-0">
<input type="email" class="form-control" id="email" placeholder="E-MAIL">
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-md-2 col-lg-2 col-lg-offset-0">
<input type="tel" class="form-control" id="tel" placeholder="PHONE">
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-md-6 col-lg-6 col-lg-offset-0">
<textarea class="form-control message" rows="6" id="comment" placeholder="MESSAGE"></textarea>
</div>
</div>
</form>
</div>
You can do this by nesting columns. Create two columns (equal to 12 columns), then place another row inside each along with your columns that contain the form inputs. I imagine you want your input to use the entire space available so set the nested columns to col-*-12 so they utilize the entire parent columns width.
Working Example: Open at FullPage
form {
background: #f2f2f2;
padding: 20px 20px 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form>
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<input type="text" class="form-control" id="name" placeholder="NAME">
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<input type="email" class="form-control" id="email" placeholder="E-MAIL">
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<input type="tel" class="form-control" id="tel" placeholder="PHONE">
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<textarea class="form-control message" rows="6" id="comment" placeholder="MESSAGE"></textarea>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
I'm trying to have on the same line: text, search box and the button "Locate", but the following code seems not working because what I get is: the text "Map for network..." aligned with the input box while the "Locate" button is below the input box. Any suggestion?
<div style="border-color:#FCD229; margin-bottom:0px" class="panel panel-primary">
<!-- Default panel contents -->
<div style="border-color:#FCD229; background-color:#FCD229"class="panel-heading">
<div class="input-group">
<label class="control-label col-lg-8">Map for Network<p class="badge"><?php echo $net_name ?></p></label>
<div class="form-horizontal col-lg-4">
<input id="marker_id" name="address" class="form-control input-sm" type="text" placeholder="node name..">
<span class="input-group-btn">
<button type="submit" class="btn btn-default btn-sm">Locate</button>
</span>
</div>
</div>
</div>
</div>
JSFiddle "Answer"
To cut to the chase - you can look at the result of my tests on JSFiddle: http://jsfiddle.net/eThej/. NOTE - Bootstrap is responsive so you need to make the window with the preview large enough or the controls will wrap to the next line. This is intentional to allow for forms to work on smaller screens (responsive design).
Explanation / Notes
I believe the following example (pulled from the bootstrap site) does something like what you are looking for:
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
I took your code and applied a few changes to it and got a similar result. First - you are looking for a form with a class of "form-inline". Second, if you are using a column layout I think you probably want "md" columns and not "lg" columns. Finally I think you div's aren't nested correctly. It isn't pretty but I applied these few changes and got much closer to what I think you want. The following is that result:
<div style="border-color:#FCD229; margin-bottom:0px" class="panel panel-primary">
<!-- Default panel contents -->
<div style="border-color:#FCD229; background-color:#FCD229" class="panel-heading">
<form class="form-inline">
<div class="col-md-4">
<label class="control-label">Map for Network</label>
<p class="badge">Test</p>
</div>
<div class="col-md-8">
<div class="form-group"><input id="marker_id" name="address" class="form-control input-sm"
type="text" placeholder="node name.." />
</div>
<button type="submit" class="btn btn-default">Locate</button>
</div>
</form>
</div>
</div>
Again, not a perfect answer but I think it should get you on the right track. Best of luck!
This code seems to be more suitable for what I had in mind.
<div style="border-color:#FCD229; margin-bottom:0px" class="panel panel-primary">
<!-- Default panel contents -->
<div style="border-color:#FCD229; background-color:#FCD229"class="panel-heading">
<label class="control-label col-lg-8">Map for Network Test</label>
<div class="input-group input-group-sm">
<input id="" type="text" class="form-control" placeholder="Node Name">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Locate</button>
</span>
</div><!-- /input-group -->
</div>
</div>